Google Maps API

The Google Maps Javascript API lets you embed Google Maps in your own web pages. With current code solution you can get location of map by providing location, zoom level, width and height as query string so it can be dynamic according to your requirements. In code you will need to change Google Map key.
You can modify the code if you plan to use code without asp.net, Currently its using asp.net to get querystring values.

 
<head>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<%=ConfigurationManager.AppSettings("GoogleMapKey")%>&amp;sensor=true"
        type="text/javascript"></script>

    <script type="text/javascript">
        var map = null;
        var geocoder = null;

        function initialize() {
            if (GBrowserIsCompatible()) {
                var mapWidth = parseInt(document.getElementById('<%=hdnWidth.ClientID%>').value);
                var mapHeight = parseInt(document.getElementById('<%=hdnHeight.ClientID%>').value);
                var address = document.getElementById('<%=hdnAddress.ClientID%>').value;
                var zoom = parseInt(document.getElementById('<%=hdnZoomLevel.ClientID%>').value);
                
                geocoder = new GClientGeocoder();
                geocoder.getLatLng(address,
                    function(point) {
                        if (!point) {
                            divMap.innerHTML = '<table style="width: 100%; height: 100%;"><tr style="height: 100%;"><td style="font-family: Calibri; font-size: 12pt; color: #808080; text-align: center; vertical-align: middle; width: 100%;">Invalid Address</td></tr></table>';
                        } else {
                            var mapOptions = {
                                size: new GSize(mapWidth, mapHeight),
                                mapTypes: [G_NORMAL_MAP]
                            };
                            var marker = new GMarker(point);
                            
                            map = new GMap2(divMap, mapOptions);
                            map.setCenter(point, zoom);
                            map.setUIToDefault();
                            map.addOverlay(marker);
                            marker.bindInfoWindowHtml(address);
                        }
                    }
                )
            }
        }
    </script>

</head>
<body onload="initialize()" onunload="GUnload()" style="padding: 0px; margin: 0px;">
    <div id="divMap" style="padding: 0px; margin: 0px; width: 100%; height: 100%;">
    </div>
    <form id="frmShowMap" runat="server" enableviewstate="False">
    <asp:HiddenField ID="hdnAddress" runat="server" />
    <asp:HiddenField ID="hdnZoomLevel" runat="server" />
    <asp:HiddenField ID="hdnWidth" runat="server" />
    <asp:HiddenField ID="hdnHeight" runat="server" />
    </form>
</body>

VB.net Code behind

 
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Try
            hdnAddress.Value = Request.QueryString("address")
            hdnZoomLevel.Value = Request.QueryString("zoom")
            hdnWidth.Value = Request.QueryString("width")
            hdnHeight.Value = Request.QueryString("height")
        Catch ex As Exception
            ErrorLog.Add(ex)
        End Try
    End Sub

Visit below websites for other sources related to Maps

Let me know if any of you have found any problem.

2 thoughts on “Google Maps API

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>