Micheal C. Micheal C. - 15 days ago 5
Javascript Question

How do I output the geojon points on google maps using javascript?

I am trying to get an understanding javascript and json objects on a whole. Forgive my beginner lingo but I have these five json objects(which are the result of a database query) I am trying to display these five coordinates onto the map. I spent the last three hours searching the internet to find some relevant info on googlemaps. That was a failure, now i am here on SO. I would like to know how do i go about outputting the coordinates onto a google map. Below is my code but for some reason my map doesn't load.

<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxx&callback=initMap">
</script>
<script>


var json = {
"type": "Point",
"coordinates": [
[40.7666969299316, -73.9906158447266],
[40.6885147094727, -73.9647598266602],
[40.7145042419434, -74.0056304931641],
[40.704719543457, -74.0092620849609],
[40.7271041870117, -74.0029678344727]
]
}

var map;


function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(40.730610, -73.935242),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);


var cods = json.coordinates;
for (i = 0; i < cods.length; i++) {

latlng = new google.maps.LatLng(cods[i][1], cods[i][0]);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'test'
});

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


google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div> <!-- ommiting this div will show the map -->
<div id="map-canvas"></div>
</div>
</body>
</html>


UPDATE:

So scaisEdge greatly helped me get my map to display. so the map is generated, but i am unable to load the markers from the json object onto the map. I get uncaught Eb ... You have included the Google Maps API multiple times on this page Can someone help me to show the markers from the json object onto google maps?

ALSO here is a link to the code

Answer

If you want a marker for each lat,lng you should place the marker creation inside the loop and this inside tye function initilize()

  var json = {
        "type": "Point",
        "coordinates": [
            [40.7666969299316, -73.9906158447266],
            [40.6885147094727, -73.9647598266602],
            [40.7145042419434, -74.0056304931641],
            [40.704719543457, -74.0092620849609],
            [40.7271041870117, -74.0029678344727]
        ]
    }

    var map;

    function initialize() {
        var mapOptions = {
            zoom: 12,
            center: new google.maps.LatLng(40.730610, -73.935242),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);




      var cods = json.coordinates;
      for (i=0; i<cods.length; i++){

        latlng =  new google.maps.LatLng( cods[i][1], cods[i][0]);
        var marker = new google.maps.Marker({
           position: latlng,
           map: map,
          title: 'test'
        });

     }