Simple Asp.net -Google map by address without Geocode

Posted by A IT Devotee on Wednesday, September 2, 2009 

Simple Asp.net -Google map by address without Geocode using Jquery





Using google map in Asp.net is not a new stuff to rise your eye brow.
But yes a simple way of coding, understandable code and dynamic google map will definetly attract attention of a developer.


Since 2 months I was trying so many options, user controls which are bulk and difficult to understand. So since yesterday i thought let me make a simple one which i can use for dynamic address on google map and not with geocode or langitude or latitude.

Here we go...
Parent page (any page, html or aspx)
Let us assume we have an anchor, which will have href directed to a google map page ,
so we better send address by query string. like below
<a  href="javascript: window.open('http://localhost/Test/common/usercontrols/Generalmap.aspx?address=Banagalore,INDIA&id=4','Window1','menubar=no,width=550,height=550,toolbar=no');"  title="pageSlide Demo">Click for a pageSlide demo.</a>
where  address=Banagalore,INDIA is a dynamic address.

on clicking this anchor it will open a pop-up screen. so in our pop-up screen we must have..
1. a Jquery ref script
2. Google map api reference.... For this we need google api key.
For localhost you can use the same api key which i have used.
for other domain you can get api key here :

Now back to code, on ready func() we need to read the querystring (address).
Follow this code you will understand.







<div id="map"   style="width:550px;height:550px;"></div> 
<script src="../Scripts/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAIKI1RJamIEvP7_Du5ZGi6xS4M_PhMYp3D1A5cqeLLIOnkUYWYhS8jdwSdUjZxBwswqHipWYzfju7fA"
      type="text/javascript"></script> 
<script type="text/javascript">
    $(document).ready(function() {
        var originaladdress = null; // global variable to store address
        qs();
        var qsParm = new Array();
        function qs() {
            var query = window.location.search.substring(1);
            var parms = query.split('&');
            for (var i = 0; i < parms.length; i++) {
                var pos = parms[i].indexOf('=');
                if (pos > 0) {
                    var key = parms[i].substring(0, pos);
                    var val = parms[i].substring(pos + 1);
                    if (key == 'address') {  // fill only the adddress
                        originaladdress = val;
                    }
                }
            }
        }
        var geocoder;
        var map;
        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(34, 0), 1);
        geocoder = new GClientGeocoder();       
        var location = originaladdress; //$("#location").val();            
        var address = location;
        geocoder.getLocations(address, addAddressToMap);
        // addAddressToMap() is called when the geocoder returns an
        // answer.  It adds a marker to the map with an open info window
        // showing the nicely formatted version of the address and the country code.
        function addAddressToMap(response) {
            map.clearOverlays();
            if (!response || response.Status.code != 200) {
                alert("Sorry, we were unable to geocode that address");
            }
            else {
                place = response.Placemark[0];        // marking a label on the address.
                point = new GLatLng(place.Point.coordinates[1],
                                        place.Point.coordinates[0]);
                marker = new GMarker((point), 8);
                map.addOverlay(marker);
                marker.openInfoWindowHtml(place.address);
                // optional for zooming purpose
                ne = new GLatLng(place.Point.coordinates[1] + 0.05, place.Point.coordinates[0] + 0.05);  // zooming the location
                bound = new GLatLngBounds(point, ne);
                map.setZoom(map.getBoundsZoomLevel(bound));
                map.panTo(bound.getCenter());
            }
        }
        return false;      
    });
      </script>

Thats it, you got ur simple google map in your Asp.net application.

Happy coding

This entry was posted on Wednesday, September 2, 2009 at 12:18 AM. You can follow any responses to this entry through the RSS 2.0. You can