Generic Google Map Example with Markers

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map_div" style="height: 400px;"></div>

CSS

body {
    margin: 0;
    padding: 0;
    font: 12px sans-serif;
}
h1, p {
    margin: 0;
    padding: 0;
}

JavaScript

/*
 * declare map as a global variable
 */
var data = {
    "route": [{
        "latitude": -27.38851,
            "longitude": 153.11606
    }, {
        "latitude": -27.47577,
            "longitude": 153.01693
    }]
}


var map;

/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

    /*
     * create map
     */
    var map = new google.maps.Map(document.getElementById("map_div"), {
        center: new google.maps.LatLng( -25.363, 131.044),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    /*

   */
    function createMarker(options) {
        var marker = new google.maps.Marker(options);

        return marker;
    }

    for (i = 0; i < data.route.length; i++) {
        createMarker({
            position: new google.maps.LatLng(data.route[i].latitude, data.route[i].longitude),
            map: map

        });

    };
});