Question

How can I draw a map based on the XML or json returned by the google api?

For example, I have a web site of tour information. A manager on the administration side can add tour details including several destinations. The desired outcome would be a dynamic map showing directions, a map, and the destination details.

I have read that google api can output XML or json, how would I then draw a map from that parsed XML or json code?

Answer 1

These are the function I use in my site (together with a little bit of jQuery:

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

function setMap(midpoint)
{
    var latlng = new google.maps.LatLng(midpoint.lat(), midpoint.lng());
    var myOptions = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
                                             myOptions);
    directionsDisplay.setMap(map);

    var request = {
        origin:"[Put origin here]",
        destination:"[Put destination here]",
        travelMode: google.maps.TravelMode.DRIVING
    };

    directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(result);
        }
    });

}

function initialize() {
    var address = "[Put destination here]";
    var geocoder = new google.maps.Geocoder();
    directionsDisplay = new google.maps.DirectionsRenderer();

    var result = "";
    geocoder.geocode({'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK)
        {
            result = results[0].geometry.location;
            setMap(result);
        }
        else
        {
            $("#map_canvas").hide();
        }
    });
}