Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You should remove the following line:</p> <pre><code>var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); </code></pre> <p>and put it outside the for loop.</p> <p>If this doesn't work, please paste the console log in order to see what is failing.</p> <p>Edit: Try this:</p> <pre><code>var myLat = 'lat.to.center.your.map'; var myLong = 'long.to.center.your.map'; var myLatlng= new google.maps.LatLng( myLat, myLong); var mapOptions = { zoom: 4, center: myLatlng } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); for(var i=0;i&lt;obj.length;i++) { var poiLatLang = new google.maps.LatLng( obj[i].latitude, obj[i].longitude); var marker = new google.maps.Marker({ position: poiLatLang , map: map, title: obj[i].city }); markers.push(marker); } </code></pre> <p>You where always defining a new map, with new options and a new center. Try this out in order to see if it works. The vars myLat and myLong should be the latitude and longitude where you want your map to be centered a the begining.</p> <h1>EDIT 2</h1> <p>Checking at the log you have posted in your comment, I now see that the url you are loading from google is wrong, you are missing the apiKey and secretKey, Check out the following link in order to solve this:</p> <p><a href="https://developers.google.com/maps/documentation/javascript/tutorial#api_key" rel="nofollow">https://developers.google.com/maps/documentation/javascript/tutorial#api_key</a></p> <p>Nevertheless, the modifications in my first edit, you will have to apply them in order to make it work correctly.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload