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 and js enthusiast, badminton lover, foodie.

drei01 Matthew_Reid


Published