ASP.NET and Google Maps – part 2

Hi,

in the last post, we talked about how to integrate an ASP.NET application with google maps. But, we didn’t do anything interesting at all. Today, I will show some features of the google maps API so your application can be more funny. What about an application that show how to people arrive in your home from anywhere? So, let’s do it now.

First off all, you will need to find the latitude and longitute of your home. For that, use the permalink of http://maps.google.com. There you can search for coordinates and use them in your javascript code. For example, after a search for my address I got the follow URL when click on Link option:

http://maps.google.com/maps?f=q&hl=pt-BR&geocode=&q=R.+General+Luis+Mallet,+Recife&sll=-8.126297,-34.905066&sspn=0.009644,0.013819&ie=UTF8&ll=-8.126212,-34.904251&spn=0.009644,0.013819&t=h&z=16&iwloc=addr

So, as you can see, my home is located on (-8.126212,-34.904251), so I used this valued to set the center of my map with the funtion setCenter(point, zoom?). To add a reference to your home, let’s use a map marker. You will need to create a marker in a specific point with the marker constructor GMarker(point) and add the marker in the map with the function addOverlay(marker). After this operations your javascript will be like that:

Now, if you compile and run you application, you will see the marker over your home on map.

All right, now let’s create the ASP.NET controllers that your friends will use to type their address. I will use that a Labe, a TextBox and a Button. So, after that my form will be like this:

Because we are calling a javascript function,  I’ve allready set the button click event using OnClientClick. In this function we will have to:

  1. Get the textfield value;
  2. Create a new google directions object;
  3. Use the function directions.load() to return a route from your friend’s address to yours.

The searchRoute function is shown below:

Here, we use the ClientID property to get the server control identifier generated by ASP.NET. All we have to do later is to create a string in the format from: Source to: Destination and call the function directions.load(). Notice that I’m using my coordinates as destination, so in your case, just use yours.

Because every ASP.NET control sends a PostBack to the server, we will have to use some Ajax to view the result. If we don’t use Ajax, the page will be reloaded (and also the map since the function load() well be called to our form). To prevent that, we just have to use a ScriptManner and an UpdatePanel, which will make that just a part of the page is reloaded after the button click event.

Our new <body> is show belown:

If it’s still not working, remember to type the whole address, with city, country, etc.

Today we talked about more google maps API features and created a simple application that shows how to arrive to you home from anywhere.  To learn more about google maps and its API take a look at google maps API documentation.

See you.


Fernando

One thought on “ASP.NET and Google Maps – part 2

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