Google Map Marker和嵌套的JSON以在Map Infowindow中显示数据

Question

I am using Google Map to show some places and users in it via the info window.

Google Map Script:

<script>
var markers = [
['<p>New York</p> <p><a href="#myModal" role="button" class="btn" data-toggle="modal">More information</a></p>', 40.769090, -74.002740],
['<p>Washington, Finland</p> <p><a href="#myModal" role="button" class="btn" data-toggle="modal">More information</a></p>', 38.908127, -77.034863],
];

function initializeMaps() {
var myOptions = {
    zoom: 3,
    center: new google.maps.LatLng(40.769090, -74.002740),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
};
var image = 'img/logos.png';
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[i][1], markers[i][2]),
        map: map,
        icon: image
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(markers[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}}</script> 

The Script for Map Info window

   <script> 
   var success = function(data) {
   $(".ID").append(data.sessions[0].ID); 
   $(".Users").append(data.sessions[0].Users); 
   $.each(data.sessions[0].Location, function(i, value){
   $(".Location").append('<li>' +  value.name + '</li>');
   })
   }
   $.getJSON("sample.json", success);
   </script>

The JSON file:

   {"sessions":[
    {
        "ID":"123",
        "Users":"4",
        "Location": 
            { "New York": [
                      { "id": 1, "name": "Mat" },
                      { "id": 2, "name": "Cat" }
                 ],
              "Washington": [
                      { "id": 1, "name": "Rat" },
                      { "id": 2, "name": "Sat" }
                 ]
            }   
    },
     {
        "ID":"456",
        "Users":"1",
        "Location": 
            { "New York": [
                      { "id": 1, "name": "Bat" }
                 ]
            }   
    }]}

The HTML:

    <div id="map_canvas"></div>   
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">More Details</h3>
    </div>
    <div class="modal-body">
    <p class="ID">ID</p>
    <ul class="Location"></ul>
    </div>
    <div class="modal-footer">
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
    </div>
    </div>

The problem I am facing is to show a specific user in its respective place. For example when I click new york in the marker, it should show me the info window with two sessions and its details (according to the JSON file). I am not sure how to deal with marker ID and Nested JSON. Please help.

Answer 1

There are a few problems in your yode you have to fix.

First:

 <script> 
   var success = function(data) {
   $(".ID").append(data.sessions[0].ID); 
   $(".Users").append(data.sessions[0].Users); 
   $.each(data.sessions[0].Location, function(i, value){
   $(".Location").append('<li>' +  value.name + '</li>');
   })
   }
   $.getJSON("sample.json", success);
   </script> 

That Script is loading when calling the page. So it puts the values for the modal in it at the beginning. So there are always the same information in it.

Good way should be to load the JSON File in the beginning and write it in a global variable.

When pushing the "More Information" button in your marker, you should call a javascript function with an id of the pushed city as parameter (not name, they aren't unique).

You have to put that id instead of the city name in your json.

Now the javascript function, which is called after pushing the "more information" button, should go in an iterative way (for each oder for) over the different sessions in your json and should look for an Location with the matching id. When the id matches, append the data to the model.

The usage of nested JSON is really easy. When you want to get the information of Mat in New york in the first session, you have to use the following code:

data.sessions[0].Location.NewYork[0] 

Have a look, that you better write the identifiers without a space.

So you can write a for construct like :

 for(var i = 0; i<data.sessions.length;i++){
       var locations = data.sessions[i].Location;
       if ('Washington' in locations) { 
          //Code to add it in your city information window
              console.log(locations.Washington);

       }
   }

the variable id is the passed parameter of the clicked marker.

You also should check your whole code, there are a few parts you should better change (The model won't really work with more than 1 Session)