Display markers on Google Map using JSON

Question

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 simple display of where YOU the user is in the world with a small avatar and when you hover it tells you this in the form of a tooltip.

The next part is using some JSON data: http://dev.driz.co.uk/googlemap/data.json

I want to display those 5 posts on the map using the coordinates that are stored in the data and display them in a similar fashion to the current marker. The user will then hover the marker and be able to see a tooltip with the following information as an example:

Cameron asked:
Is Star Wars 3d still on at the cinema?
2012-05-20 02:31:21

The user should be able to click on the marker to be taken to the post.

I've had a look around the Developer section of Google Maps, but don't seem to getting the right stuff and not sure how best to use it with my tooltip function and map implementation.

Can anyone help? Post some code examples?

Thanks

Answer 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. }); }