Import markers from json with javascript api google map

Question

I hava a json file:

{"lat": "45.496275", "lon": "19.700225"}
{"lat": "39.9332040422", "lon": "19.3821478025"}
{"lat": "42.7236250523", "lon": "22.6935022429"}
{"lat": "56.7236250523", "lon": "22.6935022429"}
{"lat": "45.7236250523", "lon": "22.6935022429"}
{"lat": "39.749522", "lon": "21.454769"}

And code:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 80%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDK1PVNmr_Hmj3eFJPZU21J8h9EGBmCsqM&sensor=true">
    </script>
    <script type="text/javascript">
      var map;
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(44.7866, 20.4489),
          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("/home/user/Desktop/markers.js", function(json1) {
          $.each(json1, function(key, data) {
            var mylatlng = new google.maps.LatLng(data.lat, data.lon);
            // Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
                position: mylatlng,
            });
            marker.setMap(map);
          });
        });
      });
    </script>


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDK1PVNmr_Hmj3eFJPZU21J8h9EGBmCsqM&callback=myMap"></script>

</body>
</html>

And all I got is an empty map, with no markers. I have no idea what is wrong, maybe json is not a well structured? Also, I have tried with a few more code version, but it's the same...

score 2 · Accepted Answer · answered Jul 12 '17 at 10:25

Please replace your html code with below code. I tweak your code.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 80%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDK1PVNmr_Hmj3eFJPZU21J8h9EGBmCsqM&sensor=true">
    </script> 

    <script type="text/javascript">
      var map;
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(44.7866, 20.4489),
          zoom: 7,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);

        $.ajax({
                url:'/home/user/Desktop/markers.js',
                dataType: "json", 
                success: function(data){
                    $.each(data, function(key, data) {
                        var mylatlng = new google.maps.LatLng(data.lat, data.lon);
                        // Creating a marker and putting it on the map
                        var marker = new google.maps.Marker({
                          position: mylatlng,
                        });
                        marker.setMap(map);
                    });
                }
            });

      }
    </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> 

</body>
</html>

Please make sure marker.js in correct path and replace your marker.js json object with this

[{"lat": "45.496275", "lon": "19.700225"},
{"lat": "39.9332040422", "lon": "19.3821478025"},
{"lat": "42.7236250523", "lon": "22.6935022429"},
{"lat": "56.7236250523", "lon": "22.6935022429"},
{"lat": "45.7236250523", "lon": "22.6935022429"},
{"lat": "39.749522", "lon": "21.454769"}]

Move marker.js file from desktop to project folder and change this url:'/home/user/Desktop/markers.js' to this url:'http://localhost/projectfolder/markers.js' - please use http in the prefix and test — Saravana, Jul 12 '17 at 10:57
The site can't be reached. When I start a server with Python, enter with the localhost it's the same, without markers, but that's expected I guess. — jovicbg, Jul 12 '17 at 11:51

score 1 · Answer 2 · answered Jul 12 '17 at 09:19

1

You can try with this JSON file:

[
 {"lat": "45.496275", "lon": "19.700225"},
 {"lat": "39.9332040422", "lon": "19.3821478025"},
 {"lat": "42.7236250523", "lon": "22.6935022429"},
 {"lat": "56.7236250523", "lon": "22.6935022429"},
 {"lat": "45.7236250523", "lon": "22.6935022429"},
 {"lat": "39.749522", "lon": "21.454769"}
]

answered Jul 12 '17 at 09:19

Milan Rakos

1,705
17
24

It doesn't help, unfortunately. – jovicbg Jul 12 '17 at 09:26

score 1 · Answer 3 · answered Jul 12 '17 at 09:55

The answer from Milan Rakos regarding the formatting of the JSON is correct, as demonstrated in this Snippet...

I have also removed the double call to load the Google api and the

callback=myMap

which was causing an error from the api.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    html {
      height: 100%
    }
    
    body {
      height: 80%;
      margin: 0;
      padding: 0
    }
    
    #map_canvas {
      height: 100%
    }
  </style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script type="text/javascript">
    var map;

    function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(44.7866, 20.4489),
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

      var json1 = [{
          "lat": "45.496275",
          "lon": "19.700225"
        },
        {
          "lat": "39.9332040422",
          "lon": "19.3821478025"
        },
        {
          "lat": "42.7236250523",
          "lon": "22.6935022429"
        },
        {
          "lat": "56.7236250523",
          "lon": "22.6935022429"
        },
        {
          "lat": "45.7236250523",
          "lon": "22.6935022429"
        },
        {
          "lat": "39.749522",
          "lon": "21.454769"
        }
      ];
      
      $.each(json1, function(key, data) {
        var mylatlng = new google.maps.LatLng(data.lat, data.lon);
        // Creating a marker and putting it on the map
        var marker = new google.maps.Marker({
          position: mylatlng,
        });
        marker.setMap(map);
      });
    }
  </script>

</head>

<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>

</body>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDK1PVNmr_Hmj3eFJPZU21J8h9EGBmCsqM"></script>

</html>

But a problem is when I tried to import json file (it has 2000+ coordinates), I can't figure it out what is a problem in that case, why can't collect data from json, even when I copy Milan's json sample in my file. — jovicbg, Jul 12 '17 at 10:22
If you use Chrome, press F12 to open the developer console, reload the page, and check for errors like this ... "XMLHttpRequest cannot load file:///C://home/user/Desktop/markers.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https". See this page for more info: https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local — grateful, Jul 12 '17 at 10:52

Import markers from json with javascript api google map

3 Answers3