In my last post I showed how easy it was to add a Google map to a Web page. This time, I want to look at how you can customize the map by adding markers to it, as well as using data binding to build the script dynamically.
The application I’m using provides restaurant recommendations for Learning Tree education centers. What I want to do is add a map that shows the location of the restaurant – and for that, we need to have the latitude and longitude. That’s not something users will know, so the first thing we need is a form that asks Google for the information.
Here is the form:
The user fills in the address, then clicks on the Get Coords button– this calls a retrieveCoords() function which asks Google to look up the address and give us the longitude and latitude. The key object we need is Google.maps.Geocoder. It has a geocode() method that accepts a string address argument and returns an array of results containing location information – and specifically, lat() and lng() methods that have the details we need. Here is the code:
So now we have the longitude and latitude available, we want to add a map showing the restaurant location, so the the app goes from looking something like this:
To something like this:
This is similar to what we did last time, except that now we’re going to be building the script using longitude and latitude values from the database.
The basic page is as follows:
Now what we have to do is build a script to
Since we have all the data ready to hand inside the DetailsView, that’s where we’re going to build the script. The first thing we need is TemplateField, and since there’s already one there, we’re just going to reuse that – we’re only adding script, after all, so it’s not going to affect the look and feel:
Then we use the same code that we did when we were building a simple Google Map – but this time using data binding to write the values into the JavaScript:
If you look carefully at the image, you’ll see that Visual Studio isn’t entirely happy. It thinks there’s a syntax error:
Fortunately, it’s wrong. The generated code is perfectly fine:
Which means we now have a Google map driven by a script that’s built dynamically using data binding. The resulting page looks like this:
However, we’re not done yet. We want to show the user the exact location of the restaurant, not just the general area. For that we need a marker – a google.maps.Marker, to be precise – which can be added to the map using the setMap() method. Like the Map object itself, the Marker needs a google.maps.LatLng object, so this time I’m going to create one explicitly and then use it in both methods. Here is the code:
And this is the final result, complete with marker (which will display the name of the restaurant if you hover over it, thanks to the title attribute:
There’s obviously a lot more you can do with Google maps – like customizing icons, adding directions and waypoint markers and much else besides – and I may just explore some of those features in future posts. For now, though, I think that should be enough to help those former (and future) students who want to make a start on combining Google maps and ASP.NET web forms.
For other related information, check out these courses from Learning Tree:
