javascript - Display multiple markers, variable and array problems -
i try display multiple markers on map. put multiples location in adata-attribute trough php file. try grab information in javascript one.
if directly paste coordinates, markers appear. if reference data-attribute don't. (the difference on line beginning 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(); (i = 0; < 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 1 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(); (i = 0; < 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 wrong variable locations when references emplacements variable markers don't show?
the non-working version emplacements string, not array.
convert string javascript array:
var locations = json.parse(emplacements); 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(); (i = 0; < 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>
Comments
Post a Comment