Google Maps - Multiple marker from extern json

Asked
Active3 hr before
Viewed126 times

4 Answers

markergooglemultiple
90%

I have to add multiple marker to a google map, but the data is in an extern json file.,At the moment Im running it like this, Can I add a new result to a paper that has been accepted but not published yet? ,Here is a working example based on the google maps tutorial. You need the correct file foo.txt:

There are two problems in your code. Your json file misses the [ at the beginning and ] at the end. Your javascript is wrong too, you want to do something with the json in the callback of getJSON. The code for your problem is:

$.getJSON("foo.txt", function(json1) {
   $.each(json1, function(key, data) {
      var latLng = new google.maps.LatLng(data.lat, data.lng);
      // Creating a marker and putting it on the map
      var marker = new google.maps.Marker({
         position: latLng,
         map: map,
         title: data.title
      });
   });
});

Here is a working example based on the google maps tutorial. You need the correct file foo.txt:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true">
    </script>
    <script type="text/javascript">
      var map;
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(58, 16),
          zoom: 7,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
    </script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>    
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
    <script type="text/javascript">
      $(document).ready(function() {
        $.getJSON("foo.txt", function(json1) {
          $.each(json1, function(key, data) {
            var latLng = new google.maps.LatLng(data.lat, data.lng); 
            // Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
                position: latLng,
                title: data.title
            });
            marker.setMap(map);
          });
        });
      });
    </script>
  </body>
</html>
load more v
88%

The JSON data looks like this:,In this example I’m going to use the capitals of the Scandinavian countries: Stockholm, Oslo and Copenhagen. Each capital will be displayed on the map with a marker. When you click a marker an InfoWindow will popup with some brief information about the city.,Now if we're try the code, it will work perfectly and each InfoWindow will display the right information.,My json file looks like:

The JSON data looks like this:

var json = [{
      "title": "Stockholm",
      "lat": 59.3,
      "lng": 18.1,
      "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
   },
   {
      "title": "Oslo",
      "lat": 59.9,
      "lng": 10.8,
      "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
   },
   {
      "title": "Copenhagen",
      "lat": 55.7,
      "lng": 12.6,
      "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
   }
]
load more v
72%

I have to add multiple marker to a google map, but the data is in an extern json file.,At the moment Im running it like this,Here is a working example based on the google maps tutorial. You need the correct file foo.txt: ,Now im trying to exlude the Json File to an another file, but sadyl I cant get it to work ;(

At the moment Im running it like this

var json = [{
      "title": "Stockholm",
      "lat": 59.3,
      "lng": 18.1,
      "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
   },
   {
      "title": "Oslo",
      "lat": 59.9,
      "lng": 10.8,
      "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
   },
   {
      "title": "Copenhagen",
      "lat": 55.7,
      "lng": 12.6,
      "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
   }
];

for (var i = 0, length = json.length; i < length; i++) {
   var data = json[i],
      latLng = new google.maps.LatLng(data.lat, data.lng);

   // Creating a marker and putting it on the map
   var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      title: data.title
   });
}

Code

$.getJSON("foo.txt", function(json1) {

});

for (var i = 0, length = json.length; i < length; i++) {
   var data = json[i],
      latLng = new google.maps.LatLng(data.lat, data.lng);

   // Creating a marker and putting it on the map
   var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      title: data.title
   });
}

foo.txt

{
   "title": "Stockholm",
   "lat": 59.3,
   "lng": 18.1,
   "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
}, {
   "title": "Oslo",
   "lat": 59.9,
   "lng": 10.8,
   "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
}, {
   "title": "Copenhagen",
   "lat": 55.7,
   "lng": 12.6,
   "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
}
load more v
65%

I need to add some markers to google map, but the data is in extern json file.,You can find an example in the documentation for Google maps: https://developers.google.com/maps/documentation/javascript/importing_data,Here is a working example based on the Google Maps tutorial . You need the correct foo.txt file:,The given halex example did not work for me. I sorted it by adding square brackets in foo.txt to declare it as an array and start the web server to access the html file, and not just open it in a browser.

Im currently working as if

var json = [{
   "title": "Stockholm",
   "lat": 59.3,
   "lng": 18.1,
   "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
}, {
   "title": "Oslo",
   "lat": 59.9,
   "lng": 10.8,
   "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
}, {
   "title": "Copenhagen",
   "lat": 55.7,
   "lng": 12.6,
   "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
}];
for (var i = 0, length = json.length; i < length; i++) {
   var data = json[i],
      latLng = new google.maps.LatLng(data.lat, data.lng); // Creating a marker and putting it on the map var marker = new google.maps.Marker({ position: latLng, map: map, title: data.title }); } 

the code

 $.getJSON("foo.txt", function(json1) {});
 for (var i = 0, length = json.length; i < length; i++) {
    var data = json[i],
       latLng = new google.maps.LatLng(data.lat, data.lng); // Creating a marker and putting it on the map var marker = new google.maps.Marker({ position: latLng, map: map, title: data.title }); } 

foo.txt

 {
    "title": "Stockholm",
    "lat": 59.3,
    "lng": 18.1,
    "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
 }, {
    "title": "Oslo",
    "lat": 59.9,
    "lng": 10.8,
    "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
 }, {
    "title": "Copenhagen",
    "lat": 55.7,
    "lng": 12.6,
    "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
 }
load more v

Other "marker-google" queries related to "Google Maps - Multiple marker from extern json"