CODEWITHSUNDEEP
jqueryjsongoogle-maps
bagofmilk
bagofmilk

Reputation: 1550

gmap3 json request not working

Running XAMPP (PHP with JSON requests) jQuery 1.11 gMap3 (v5.1.1)

My map worked fine until I tried to add a JSON request. Right now it shows nothing, not even the map and I'm receiving no errors in Chrome:

Here's the script:

$(document).ready(function() {

 var point1 = [29.425705,-98.486075];
 var point2 = [29.426928,-98.437418];

$.ajax({
    url: 'js/markers.json'
}).done(function(data) {
    // Re-initialise the map with loaded marker data
    initMap(data);
});

function initMap(markers) {
  $('#gmap-4').gmap3({
   marker:{
       values:markers || [],
       options:{draggable:false}
   },
   map:{
       options:{
           center:[29.4401784,-98.4793855],
           zoom:12,
       }
   },
   overlay:{
       values:[
           {
               latLng:point1,
               data:"<div class='infobox'><span class='x1'>The Alamo </span><br/><span class='x2'>300 Alamo Plaza, San Antonio TX 78205</span></div>",
               options:{content:"<div class='masterpin bounce'></div><div class='pulse'></div>"}
           },
           {
               latLng:point2,
               data:"<div class='infobox'><span class='x1'>AT&T Center </span><br/><span class='x2'>1 AT&T Center Pkwy, San Antonio TX 78219</span></div>",
               options:{content:"<div class='masterpin bounce'></div><div class='pulse'></div>"}
           }
       ],

       options:{
           draggable: false,

       }
   } // close overlay
}); // close gmap3     
}  // close function initMap()
}); // close $(document).ready()

Here's the JSON file:

var markers = [
   {'latLng':[29.765032,-98.707404], 'address':'106 STONEGATE N BOERNE, TX 78006', 'data':'1', 'options': { 'icon': 'images/markers/dot_red.png'}},
   {'latLng':[29.719604,-98.654005], 'address':'8510 MONUMENT OAK BOERNE, TX 78015', 'data':'1', 'options': { 'icon': 'images/markers/dot_red.png'}}

];

This is driving me crazy. I can't figure out whats wrong. Can anyone help?

Upvotes: 1

Views: 75

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117314

This is not JSON, it's javascript.

a valid JSON would be:

[{"latLng":[29.765032,-98.707404],"address":"106 STONEGATE N BOERNE, TX 78006","data":"1","options":{"icon":"images/markers/dot_red.png"}},{"latLng":[29.719604,-98.654005],"address":"8510 MONUMENT OAK BOERNE, TX 78015","data":"1","options":{"icon":"images/markers/dot_red.png"}}]

Upvotes: 2

Related Questions