Add markers to google maps from external json?

javascript jquery json google-maps

12,353

I've just tested below code & It's working. Just try :

<html>
<head>
<title>Eg. Google Maps Marker using External JSON</title>
<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://code.jquery.com/jquery-latest.min.js"></script> 
<script type="text/javascript" src = "http://maps.google.com/maps/api/js?sensor=false">

</script>
<script type="text/javascript">
function initialize() {

var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  $.getJSON('map_points.json', function(data) { 
            $.each( data.points, function(i, value) {

                var myLatlng = new google.maps.LatLng(value.lat, value.lon);
                alert(myLatlng);
                var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: "text "+value.lon
                });

            });
});


}

</script>
</head>
<body onload="initialize()">
<form id="form1" runat="server">
<div id="map_canvas" style="width: 500px; height: 400px"></div>
</form>
</body>
</html>

12,353

Author by

Admin

Updated on July 26, 2022

Comments

Admin almost 2 years

I have to add multiple markers to a google map, but the data is in an external json file.

At the moment I'm trying to run it using jquery getJSON. But it will not work at all, and console returns no errors!

    google.maps.event.addDomListener(window, 'load', initialize);



    function initialize() {

        var map_canvas = document.getElementById('map1'); 


        var map_options = {
            center: new google.maps.LatLng(44.5403, -78.5463), 
            zoom: 8, 
            mapTypeId: google.maps.MapTypeId.ROADMAP 
        };

        var map = new google.maps.Map(map_canvas, map_options); 



        $.getJSON('map_points.json', function(data) { 
            $.each( data.points, function(i, value) {
            var myLatlng =  new google.maps.LatLng(value.lat, value.lon);
            alert(myLatlng);
            var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title:"Hello World!"
        });

            });


    });


    } //End initialize()

And the Json

{

"points":[
    {"id":1,"lat":44.5403,"lon":-79.5463},
    {"id":2,"lat":45.5403,"lon":-78.5463},
    {"id":3,"lat":45.5403,"lon":-76.5463},
    {"id":4,"lat":45.5403,"lon":-77.5463}
]


}

Admin over 10 years

Thank you, but what did you change? Also, my mapping code is in an external js file, from the html. Does that matter? So there's three files: html, js and json
Jenson M John over 10 years

@user2559519 You can reuse this code. right? My code is almost in the similar structure what your code has.
Admin over 10 years

Kind of. I prefer to know why it works. This is a test code for a larger project, so I'd need to learn the concept behind what I'm doing wrong. But when I copy this api code into my js file, it still doesn't work. Does it have to be in the DOM? Or is there something you've added to the html?
Jenson M John over 10 years

@user2559519 I was just giving how you can mark different places using external json file. external json file you'll have to include in the same directory where you execute your html file. I've grouped html, js in a single file. You can just use this entire code to test & it should work (You've to have that json file included). That's it..:)
Admin over 10 years

Okay, thanks that worked! So external json has to be in the same directory as the html?
Jenson M John over 10 years

@user2559519 In the given code, I put like like that. You can change file into any other folder but you've to make proper changes for json path in your code as well..:)
Admin over 10 years

For some reason, when I use an external js file and run the code I get an OPTIONS error message in the console or sometimes a "XMLHttpRequest cannot load | No 'Access-Control-Allow-Origin' header" Any ideas as to why. Does this mean I can't use and external js? Because it works when the js code is in the html, but it is too long for me to want it there.
Jenson M John over 10 years

@user2559519 Juz check this : cypressnorth.com/blog/programming/…