Display Markers On Google Map Using Json

I have the following test Google Map: http://dev.driz.co.uk/googlemap/ I'm using the design of Foursquare markers as an example to test out my code and so far I have implemented a

Solution 1:

Follow these steps

1. Pull the data using an AJAX request and store it in a variable.

   • You can use jQuery for this. http://api.jquery.com/jQuery.getJSON/

     $.getJSON('http://dev.driz.co.uk/googlemap/data.json', function(data){
           // loop  and add markers
     });
     

   • Or you can use plain javascript and a JSON parser.

     • http://www.degraeve.com/reference/simple-ajax-example.php
     • http://www.json.org/

2. Loop in data and pick each item and add to map

   for (var i = 0; i < data.length; i++) {
       var item = data[i];
   
       var markerLatlng = new google.maps.LatLng(item.Post.latitude, item.Post.longitude);
       var marker = new google.maps.Marker({
           position: markerLatlng
       });
       marker.item = item; // store information of each item in marker
       marker.setMap(map); // where `map` is the instance of Google Map
       google.maps.event.addListener(marker, "click", function(mark) {
           // retrieve information using `this.item` and create dynamic HTML to show it. // this.item.Post.datetime, this.item.Post.content etc.
       });
   
   }