Display multiple markers, variable and array problems

Question

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?

geocodezip · Accepted Answer · 2015-10-02 23:20:52Z

1

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>

edited Oct 2, 2015 at 23:20

answered Oct 2, 2015 at 21:11

geocodezip

162k14 gold badges228 silver badges256 bronze badges

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

1 Comment

Lucien Dubois Over a year ago

How should I convert it?

Collectives™ on Stack Overflow

Display multiple markers, variable and array problems

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related