CODEWITHSUNDEEP
javascriptjsongoogle-maps
Cameron
Cameron

Reputation: 28783

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 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

Upvotes: 1

Views: 3434

Answers (1)

Diode
Diode

Reputation: 25135

Follow these steps

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

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

}

Upvotes: 3

Related Questions