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...
3 answers
solution1
2 ACCPTED 2017-07-12 10:25:33
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"}]
solution2
1 2017-07-12 09:19:29
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"}
]
solution3
1 2017-07-12 09:55:35
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Google Map api markers Javascript
Adding multiple markers from external json to Google Map in Javascript
Using JSON markers in Google Maps API with Javascript
Load markers to google map from json php
Integrate Google Map with Markers from HTTPrequest Javascript
Deleting markers from a google map help - JavaScript
set many google markers from json in javascript
Google maps JS API V3,add multiple markers to map with infowindows from remote json source
Error hiding markers on google map javascript api zoom 3.7
Google map API 3 / javascript : Markers suddenly become invisible
Related Tags