CODEWITHSUNDEEP
javascriptjsongoogle-mapsgoogle-maps-api-3
jovicbg
jovicbg

Reputation: 1553

Import markers from json with javascript api google map

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...

Upvotes: 0

Views: 2270

Answers (3)

Saravana
Saravana

Reputation: 278

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"}]

Upvotes: 2

grateful
grateful

Reputation: 1128

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>

Upvotes: 1

Milan Rakos
Milan Rakos

Reputation: 1763

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"}
]

Upvotes: 1

Related Questions