I spent part of the weekend tapping the Google Maps API, developing a custom ASP.NET 1.x app that pinpoints some of the more memorable locations during my brief residency in Seattle (see my sample here). Bill Pierce created a .NET custom server control to use Google Maps in ASP.NET 1.x, which basically acts as a wrapper for the public API so that you can use server-side event handlers that automatically generate client-side code that display a map. Bill's process really makes the effort easy.
But if you'd prefer to be like me and do things the manual way, the hard part of the process is working with the necessary client-side code, passing in arguments that generates maps dynamically. I'm assuming that if you're using a platform like PHP, ASP/ASP.NET or JSP with Google Maps, you're working with scripting code to generate maps on-the-fly. I've found that assembling a long string containing all the client-side JavaScript in a server-side StringBuilder object and calling Page.RegisterClientScriptBlock(), passing an abstract script block name and the StringBuilder object works best for generating dynamic maps. Passing in the latitudes/longitudes for a map if extracting such data from a database or XML file gets tricky if it's all hard-coded within the page, so I prefer writing out such values within server-side events in a code-behind class and then spitting this out on the page.
The neat thing about RegisterClientScriptBlock() is that the JavaScript generated gets written within the page immediately after the opening server-side <FORM> tag, ensuring that the internal reference made to the map control (Google recommends placing a map in a <DIV>) can be referenced easily in DOM-like fashion. I pull this off in a helper method, into which I pass the latitude, longitude, address and other data. In this instance, I'd pass it data to point to Microsoft's Redmond headquarters - to generate the following client-side code:
<script type="text/javascript">
//<![CDATA[
if(GBrowserIsCompatible()) {
function ShowMap() {
var map = new GMap(document.getElementById("map"));
// DEFAULT LOCATION
var point = new GPoint(-85.144740, 41.092104)
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(point,2);
// ADD PUSHPIN
var edo = new GPoint(-85.144740, 41.092104);
var marker = new GMarker(point);
map.addOverlay(marker);
// ADD LISTENER EVENT TO HANDLE --CLICK-- EVENT
GEvent.addListener(marker,"click",function() {
marker.openInfoWindowHtml("<b>Microsoft</b><br/><font size='2'>1 Microsoft Way</font><br/><font size='1'>Redmond, 98052</font>");
});}
}
//]]>
</script>
<div id="map" style="width: 600px; height: 400px"></div>
...I call this helper method in my code-behind class. private void WriteGoogleMapsClientSideCode(string lng, string lat,string address)
{
StringBuilder sb = new StringBuilder();
sb.Append("<script type=\"text/javascript\">\n\t//<![CDATA[\n\t\t");
sb.Append("if(GBrowserIsCompatible()) {\n\t\tfunction ShowMap() {\n\t\t\tvar map = new GMap(document.getElementById(\"map\"));\n\n\t\t\t");
sb.Append("// DEFAULT LOCATION\n\t\t\tvar point = new GPoint(" + lng + ", " + lat + ")\n\t\t\tmap.addControl(new GLargeMapControl());\n\t\t\tmap.addControl(new GMapTypeControl());\n\t\t\tmap.centerAndZoom(point,2);\n\n\t\t\t");
sb.Append("// ADD PUSHPIN\n\t\t\tvar edo = new GPoint(" + lng + ", " + lat + ");\n\t\t\tvar marker = new GMarker(point);\n\t\t\tmap.addOverlay(marker);\n\n\t\t\t");
sb.Append("// ADD LISTENER EVENT TO HANDLE --CLICK-- EVENT\n\t\t\tGEvent.addListener(marker,\"click\",function() {\n\t\t\tmarker.openInfoWindowHtml(\"" + address + "\");\n\t\t});");
sb.Append("}\n\t}\n\n\t//]]>\n\t</script>");
if(!this.IsClientScriptBlockRegistered("GoogleMapClientCode"))
{
this.Page.RegisterClientScriptBlock("GoogleMapClientCode",sb.ToString());
}
}
It's actually quite easy to generate dynamic maps in Google Maps using ASP.NET. Good luck in your own projects!