CODEWITHSUNDEEP
javascriptjqueryjsongoogle-mapsgoogle-maps-api-3
Struct
Struct

Reputation: 970

show jSON data in google maps marker

I want to show several markers in my google maps. Each marker has a pop-up with some informations. I get the information by a database. But I don't get the info in the pop-up:

<div id="map-canvas"></div>

JavaScript/jQuery:

var info = "";
$(function() {
    $.getJSON("http://server:8080/getInfo", function(data) {
        $.each(data, function(i, f) {
            info = "<tr>" + "<td> Info: " + f.address + " / " + f.date + "</td>" + "</tr>";
            $(info).appendTo("#info");
        });
    });
});

var contentString2 = 
    '<div id="content">'+
        '<h2>Barcelona</h2>'+
        '<div>' +info+ '</div>'+
        '<p><a href="#contact" data-role="button" data-mini="true">Contact</a></a> '+
        '</p>'+
    '</div>';               


// marker
var parkingList = [
    ['Spain', contentString1, 41.469326, 1.489334, 1],
    ['Barcelona', contentString2, 41.353812, 2.157440, 2]
],...

Now, I have to questions:

  1. How can I insert the data from my json into the contentString?
  2. How can I create a variable, which includes the json data and can be used in the whole JavaScript and not only in the getJSON function?

Upvotes: 1

Views: 1025

Answers (1)

codingrose
codingrose

Reputation: 15709

1) You can declare a variable before calling function to pull json and use it anywhere in your script. Please note, it will be assigned value only after getJson is called.

2) I have shown example how to insert data from json into the contentString.

var alldata,contentString = "";
$(function() {
    $.getJSON("http://server:8080/getInfo", function(data) {
        alldata = data; //stores json
        $.each(data, function(i, f) {
            contentString += "<tr>" + "<td> Info: " + f.address + " / " + f.date + "</td>" + "</tr>";
            $(contentString).appendTo("#info");
        });
    });
});

Upvotes: 1

Related Questions