How to display multiple different MapQuest leaflet maps on one single page?

Question

I'm pulling dynamic data from a database to display different maps with different cities and states on one single page.

The problem is that with the code that I have, only one map displays properly.

All the other ones appear grayed-out just like this one :

How can I display multiple MapQuest leaflet maps on one page? Is there a much more efficient way to do this?

This is my code below :

//set var   
$x =0;  

while($map = $result_data->fetch_assoc()){$x++;

//construct the mapid for mapquest
$mapid = 'map'.$x;

//get city 
$city = $map['city'];

//get state
$state = $map['state'];

echo "<script>
L.mapquest.key = 'my_key';
var $mapid = L.mapquest.map('$mapid', {
center: [0, 0],
layers: L.mapquest.tileLayer('map'),
zoom: 14
});
L.mapquest.geocoding().geocode('$city, $state');
</script>";

echo '<div id="map'.$x.'" style="width: 100%; height: 200px;"></div>';

}

Answer 1

I've created three leaflet maps in javascript using the mapquest geocoding this way:

window.onload = function() {
    var mapLayer = MQ.mapLayer(), map;
        map = L.map('map', {
        layers: mapLayer,
        center: [ 40.731701, -73.993411 ],
        zoom: 12
    }); 
    searchForPosition('Barcelona, Spain', map);

    mapLayer = MQ.mapLayer(), map2;
        map2 = L.map('map2', {
        layers: mapLayer,
        center: [ 40.731701, -73.993411 ],
        zoom: 12
    });
    searchForPosition('London, UK', map2);

    mapLayer = MQ.mapLayer(), map3;
        map3 = L.map('map3', {
        layers: mapLayer,
        center: [ 40.731701, -73.993411 ],
        zoom: 12
    });
    searchForPosition('New York, USA', map3);
}

function searchForPosition(query, map) {
  MQ.geocode({ map: map, mapFitBounds: true })
      .search(query)
      .on('success', (result) => {
      const position = result.data.results[0].locations[0].displayLatLng;
      console.log(position)
      map.panTo(new L.LatLng(position.lat, position.lng));
    });
}

I use this css:

https://unpkg.com/[email protected]/dist/leaflet.css

and this js:

https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js

https://open.mapquestapi.com/sdk/leaflet/v2.2/mq-map.js?key=***

https://www.mapquestapi.com/sdk/leaflet/v2.2/mq-geocoding.js?key=***

If you fork this codepen:

https://codepen.io/jeprubio/pen/QWwdexq

and set the api keys in the Settings / Javascript section you can see it working.

You can adapt it to write the coordinates from your code. In your code it should be something like:

echo "<script>
function searchForPosition(query, map) {
  MQ.geocode({ map: map, mapFitBounds: true })
      .search(query)
      .on('success', (result) => {
      const position = result.data.results[0].locations[0].displayLatLng;
      map.panTo(new L.LatLng(position.lat, position.lng));
    });
}
</script>";

//set var   
$x = 0;  

while ($map = $result_data->fetch_assoc()) {
   $x++;

   //construct the mapid for mapquest
   $mapid = 'map'.$x;

   //get city 
   $city = $map['city'];

   //get state
   $state = $map['state'];

   echo "<script>
   mapLayer = MQ.mapLayer(), $mapid;
     $mapid = L.map('$mapid', {
     layers: mapLayer,
     center: [ 40.731701, -73.993411 ],
     zoom: 12
   }); 
   searchForPosition('$city, $state', map3);
   </script>";

   echo '<div id="'.$mapid.'" style="width: 100%; height: 200px;"></div>';
}