ASP.NET and Google Maps

Hi,

last moth I was little busy with graduation thesis’ activities, so I could not give such attention to the blog. But, I’ll try to write as soon as I have some time. Today, I’ll talk about how to create an ASP.NET application that integrates with google maps. This has been my work on Inove for the last two moths and it’s quite interesting. Let’s start.

First, let’s create our Web application in Visual Studio by clicking on File -> New Project… and choosing a new ASP.NET Web Application, as shown in figure below:

Later, run the project with F5 and copy your start page URL. With your web site URL, sign up for a google maps API key here. You just need to agree with the term and conditions, and paste your web site URL inside the tex box. Now, copy the javascript content of the given html and paste it into the head tag of your .aspx file. . Now, your head tag will be similar to the code show below.

In line 15, we create a new instance of google maps, passing the <div> tag which contains the maps. In line 16 we set where the map will be center on and the map zoom. Fell free to change this values.

Now, to visualize the map, will need two things:

  1. The map is supposed to be in a separate <div> tag. If you take a look at the javascript code, you will see something like document.getElementById(“map”). So, what you have to do is to create a new <div> tag, inside de body, which id property is “map”.
  2. You will need to call the function load(), so the map can be loaded. To do that, just use onload event in the <body> tag, passing the function load() as value.

After that, your <body> will look like this:

Notice that a use a style to set the size of the map.

Now, all that you have to do is to compile and run your project by pressing F5.
Very easy, don’t you think?

So, in this post I talked about how to integrate an ASP.NET application with google maps. In the next posts, I’ll talk more about this integration by addin markers, controllers and some functions.

See you in the next post


Fernando

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s