Javascript for loop in Google Maps

Question

I have created a map containing a couple of markers and when the user clicks the markers it will open a popup page. It will just work fine when I had 5 markers but right now, I have to implement ~400 markers. So I would like to use a for loop for this. But somehow the markers won't appear on the map. It won't give any errors.

Here is my code:

let allMarkerOpts = [
    {
        finalLat: '35.6695585',
        finalLng: '139.7611172',
        iconUrl: 'hotelMarker.png',
        locationName: 'openGinza();'
    },

    {
        finalLat: '35.6961571',
        finalLng: '139.7547658',
        iconUrl: 'restaurantMarker.png',
        locationName: 'openKanda();'
    },

    {
        finalLat: '35.7058408',
        finalLng: '139.7407026',
        iconUrl: 'hotelMarker.png',
        locationName: 'openDome();'
    },

    {
        finalLat: '35.7012901',
        finalLng: '139.7368178',
        iconUrl: 'coffeehouseMarker.png',
        locationName: 'openKagurazaka();'
    },
];

    for ( var i; i < 5; i++ ) {
        (function(){
            let markerOptions = {
                map: map,
                position: {
                    lat: allMarkerOpts[i].finalLat,
                    lng: allMarkerOpts[i].finalLng
                }
            };

            markerOptions.icon = {
                url: "https://sitename.com/demo/img/destinations/markers/" + allMarkerOpts[i].iconUrl,
                scaledSize: new google.maps.Size(
                    52,
                    57),
                size: new google.maps.Size(
                    52,
                    57),
                anchor: new google.maps.Point(
                    26,
                    57)
            };

            let marker = new google.maps.Marker(markerOptions);



            google.maps.event.addListener(marker, 'click', (function(marker) {
            return function() {
                allMarkerOpts[i].locationName
            }
            })(marker));
        })();
    };

didn't you see this? stackoverflow.com/questions/29765720/… — Udara Kasun
– Udara Kasun, Commented Sep 4, 2018 at 15:22

geocodezip · Accepted Answer · 2018-09-04 16:01:34Z

You have two issues with the posted code:

your loop doesn't have a valid starting value:

 for ( var i; i < 5; i++ ) {

should be:

for ( var i=0; i < 5; i++ ) {

your latitude and longitude values are strings, not numbers. I get the javascript error: InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number. One option is to use parseFloat to make them numbers:

let markerOptions = {
    map: map,
    position: {
        lat: parseFloat(allMarkerOpts[i].finalLat),
        lng: parseFloat(allMarkerOpts[i].finalLng)
    }
};

proof of concept fiddle

code snippet:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  var infowindow = new google.maps.InfoWindow();
  for (var i = 0; i < allMarkerOpts.length; i++) {
    (function() {
      let markerOptions = {
        map: map,
        position: {
          lat: parseFloat(allMarkerOpts[i].finalLat),
          lng: parseFloat(allMarkerOpts[i].finalLng)
        }
      };
      let marker = new google.maps.Marker(markerOptions);
      bounds.extend(marker.getPosition());


      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(allMarkerOpts[i].locationName);
          infowindow.open(map, marker);
        }
      })(marker, i));
    })();
  };
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
let allMarkerOpts = [{
    finalLat: '35.6695585',
    finalLng: '139.7611172',
    iconUrl: 'hotelMarker.png',
    locationName: 'openGinza();'
  },

  {
    finalLat: '35.6961571',
    finalLng: '139.7547658',
    iconUrl: 'restaurantMarker.png',
    locationName: 'openKanda();'
  },

  {
    finalLat: '35.7058408',
    finalLng: '139.7407026',
    iconUrl: 'hotelMarker.png',
    locationName: 'openDome();'
  },

  {
    finalLat: '35.7012901',
    finalLng: '139.7368178',
    iconUrl: 'coffeehouseMarker.png',
    locationName: 'openKagurazaka();'
  },
];

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Collectives™ on Stack Overflow

Javascript for loop in Google Maps

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related