javascript - Calling json file from external sources

Question

I used this JavaScript to call my JSON data from an external source. The json data will load from server. So, what will be the script that I can get the markers from google map using the external JSON data.

 var map, infowindow; ////

// The JSON data
var json = "http://www.tripleclickstudio.com/json/file.json"
$.getJSON(json,{
    tags:"location",
    tagmode:"any",
    format:"json"
    
})

function initialize() {
  
  // Giving the map som options
  var mapOptions = {
    ////
  };
  
  // Creating the map
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  
  var bounds = new google.maps.LatLngBounds(); ////
  
  // Looping through all the entries from the JSON data
  var responses = json[0].ResponseData; ////
  for(var i = 0; i < responses.length; i++) { ////
    
    // Current object
    var obj = responses[i]; ////

    // Adding a new marker for the object
    var position =
      new google.maps.LatLng( obj.CoordinateY, obj.CoordinateX ); ////
    bounds.extend( position ); ////
    var marker = new google.maps.Marker({
      position: position, ////
      map: map,
      draggable: true,
      animation: google.maps.Animation.DROP,
      title: obj.BuildingName
    });
    
    // Adding a new info window for the object
    var clicker = addClicker(marker, obj.BuildingName); ////

  } // end loop
  
  map.fitBounds( bounds ); ////
  
  // Adding a new click event listener for the object
  function addClicker(marker, content) {
    google.maps.event.addListener(marker, 'click', function() {
      
      if (infowindow) {infowindow.close();}
      infowindow = new google.maps.InfoWindow({content: content});
      infowindow.open(map, marker);
      
    });
  }
  
}

// Initialize the map
google.maps.event.addDomListener(window, 'load', initialize);

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
   <script src="https:////cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div id="map-canvas"></div>

Answer 1

I get two javascript errors in your code snippet:

1. XMLHttpRequest cannot load http://www.tripleclickstudio.com/json/file.json?tags=location&tagmode=any&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

2. Uncaught TypeError: Cannot read property 'length' of undefined on this line:

for(var i = 0; i < responses.length; i++) {  

Because responses doesn't exist when you are running the loop. $.getJSON is asynchronous, the data isn't populated until the callback function is run (which you haven't defined). Your first problem, however, is that there is a security policy preventing you from downloading it with $.getJSON. You either need to get permission to download it for your domain (the appropriate Access-Control-Allow-Origin in the header) or to download it via JSONP.

However, when I do that, I get a syntax error in your JSON.