While overhauling a customer information system I found myself needing to display a map of a customers postcode without forcing the user to leave the page.

Here is the solution I came up with.

``` {.js name=”code”}

var map; var geocoder; function init() { geocoder = new google.maps.Geocoder(); }

function showAddress(theaddress,element) {
if(!geocoder){ init(); } geocoder.geocode( { ‘address’: theaddress}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { $(‘#map_dialog’).dialog({ width:500, height:500, title:”Map for “+theaddress
});

        var myOptions = {
            zoom: 8,
            center: results[0].geometry.location,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
                        myOptions);             
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });                                
      } else {
        alert("Google could not find the postcode "+theaddress+" : " + status);
      }
    });
}

<%–placeholder for google map popup src: http://marx-tseng.appspot.com/maps/Map_In_jQuery_Dialog.html –%>

```

Note then div within a div, this is important otherwise the map gets restricted to a small 200 x 200 square. Splitting up the divs allows jquery to resize one and google to use the other for the map.

 

Matt Reid

Lead Software Architect. Java/Node enthusiast, badminton lover, foodie.

drei01 Matthew_Reid


Published