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"),
        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.js and TypeScript enthusiast.

drei01 Matthew_Reid