CODEWITHSUNDEEP
javascriptphpgoogle-mapsgoogle-maps-api-3
Lucien Dubois
Lucien Dubois

Reputation: 1694

Display multiple markers, variable and array problems

I try to display multiple markers on my map. I put the multiples location in adata-attribute trough my php file. Then I try to grab this information in my javascript one.

If I directly paste the coordinates, the markers appear. If I reference the data-attribute they don't. (The only difference is on the line beginning with var locations.)

This code works:

function GoogleMapsInit(){
setTimeout(function initialize() {
    var emplacements = $('#iframecarte').attr("data-emplacements");
    // Emplacements returns [[45.5314817,-73.1835154], [45.570004,-73.448701] ]
    var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(45.5580421, -73.7303025)
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var locations = [[45.5314817,-73.1835154], [45.570004,-73.448701] ];

    var marker, i;
    var markers = new Array();

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map
      });

      markers.push(marker);

    }

}, 500);
}

This one doesn't:

function GoogleMapsInit(){
setTimeout(function initialize() {
    var emplacements = $('#iframecarte').attr("data-emplacements");
    // Emplacements returns [[45.5314817,-73.1835154], [45.570004,-73.448701] ]
    var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(45.5580421, -73.7303025)
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var locations = emplacements;

    var marker, i;
    var markers = new Array();

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map
      });

      markers.push(marker);

    }

}, 500);
}

What is wrong with the variable locations when it references the emplacements variable so that the markers don't show?

Upvotes: 0

Views: 113

Answers (1)

geocodezip
geocodezip

Reputation: 161384

The non-working version emplacements is a string, not an array.

Convert the string to a javascript array:

var locations = JSON.parse(emplacements);

proof of concept fiddle

code snippet:

function GoogleMapsInit() {
  setTimeout(function initialize() {
    var emplacements = $('#iframecarte').attr("data-emplacements");
    // Emplacements returns [[45.5314817,-73.1835154], [45.570004,-73.448701] ]
    var mapOptions = {
      zoom: 9,
      center: new google.maps.LatLng(45.5580421, -73.7303025)
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var locations = JSON.parse(emplacements);

    var marker, i;
    var markers = new Array();

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map
      });

      markers.push(marker);

    }

  }, 500);
}
GoogleMapsInit();
html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
<div id="iframecarte" data-emplacements="[[45.5314817,-73.1835154], [45.570004,-73.448701], [45.6066487,-73.712409]]"></div>

Upvotes: 1

Related Questions