Add Markers to Google Maps from JS Array

Question

I have the array:

var stops = [];
    stops[1] = {name:'One', lat:51.9219465100951 ,long:-8.61797176722262};
    stops[2] = {name:'Two', lat:51.9270744 ,long:-8.6105043};
    stops[3] = {name:'Three)', lat:51.9254898 ,long:-8.6100269};

I'm trying to loop through and display these markers on a map...

function initMap() {
 map = new google.maps.Map(document.getElementById('map'), {
 center: {lat: 51.933596, lng:  -8.578540},
 zoom: 14,
 mapTypeId: 'hybrid'
});

for(var i=0; i<=stops.length; i++){
  var mypos = {stops[i].lat, stops[i].long};
  var marker = new google.maps.Marker({
   position: mypos,
   map: map,
   title: stops[i].name
  });
 }
}

No markers are being drawn on the map.

I'm getting an unexpected token error of [ on the following line. var mypos = {stops[i].lat, stops[i].lng};

I've changed this around but still can't get it to work.

charlietfl · Accepted Answer · 2016-09-15 20:04:08Z

2

you are creating an invalid object when all you really need to do is pass stops[i] for your position

var mypos = {stops[i].lat, stops[i].lng};

should be

var mypos =stops[i];

But there is another issue , array indexing is zero based but you start at one

A much simpler way to create the initial array would be

var stops = [
    {name:'One', lat:51.9219465100951 ,lng:-8.61797176722262},
    {name:'Two', lat:51.9270744 ,lng:-8.6105043},
    {name:'Three)', lat:51.9254898 ,lng:-8.6100269}
];

Note that the property name long has been changed to lng to match what map script uses

edited Sep 15, 2016 at 20:04

answered Sep 15, 2016 at 19:44

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

charlietfl Over a year ago

@LinuxDisciple yes..in initial array..pointless using different property names

LinuxDisciple · Accepted Answer · 2016-09-15 20:00:41Z

0

mypos needs to be:

var mypos = {lat: stops[i].lat, lng: stops[i].long};

Without "lat:" and "lng:" you're trying to declare an object as if it's an array. 'position' expects either a LatLngLiteral (see above) or a LatLng object, which is declared like this:

var mypos = new google.maps.LatLng(stops[i].lat, stops[i].long};

edited Sep 15, 2016 at 20:00

answered Sep 15, 2016 at 19:46

LinuxDisciple

2,39818 silver badges22 bronze badges

2 Comments

Cian W Over a year ago

Thank you changed to LatLng object. It placing the markers properly but also showing an error: " Uncaught TypeError: Cannot read property 'lat' of undefined"

LinuxDisciple Over a year ago

Your for-loop looks like it's going one extra round. Arrays are zero-indexed, so it's hitting stops[0] first, which is undefined.Use '<' not '<=' in your for-loop, and declare your array as @charlietfl suggested (without specifying the position).

Sitesh Patel · Accepted Answer · 2016-09-15 19:50:10Z

Check the code example:

$(window).load(function() {
  $(document).ready(function() {
    var map;
    var elevator;
    var myOptions = {
      zoom: 1,
      center: new google.maps.LatLng(0, 0),
      mapTypeId: 'terrain'
    };
    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var addresses = ['Norway', 'Africa', 'Asia', 'North America', 'South America'];

    for (var x = 0; x < addresses.length; x++) {
      $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function(data) {
        var p = data.results[0].geometry.location
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        new google.maps.Marker({
          position: latlng,
          map: map
        });

      });
    }

  });
}); //]]>

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>


<style type="text/css">
  #map_canvas {
    width: 500px;
    height: 500px;
  }
</style>

<div id="map_canvas"></div>

Collectives™ on Stack Overflow

Add Markers to Google Maps from JS Array

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related