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

Answers


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

Need Your Help

Checkboxes all showing the same text after switching orientations

android android-linearlayout

Edit: See the accepted answer. Lesson: Sometimes views will save and restore their state automatically. This happens AFTER onCreate. This can cause the overwriting of stuff you did in onCreate. ...

New view controller in x code?

ios objective-c xcode

Here is my original question for adding a new view controller in x code;

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.