Cant get Places.js Map to render upon Page load always expects simple input

I am trying to dynamically generate a map based on a predefined locations in my worpdress page ids or queries, for example here but seems your map rendering API is designed to always expect an input event refer to script below before a location will output including markers.

(function() {
var placesAutocomplete = places({
appId: ‘xxxx’,
apiKey: ‘xxxxx’,
container: document.querySelector(’#input-map’)

rendering is triggered by input element below

How do i get locations to render dynamically upon page load instead of having to input location before a marker is rendered on map. ? Thanks in advance.

Hi @johnzuh,

I’ll rephrase the question to be sure we are on the same page. You would like to render the map and the input with an initial value without any user interaction e.g. the name of the city in the example is cantonments. On page load, you would like to have the input filled with the value and the map centered around the location. Is that right?

If I’m correct, which value you would like to have in the input? cantonments or the value we store in the Places dataset i.e. Cantonments, Accra, Greater Accra Region, Ghana ?

Thank you!

Thanks for the feedback and question rephrase :slightly_smiling_face:. Of course we are looking to render maps with initial value without any user interaction and input filled with value with map centered around location. The value we will like to have in the input is “cantonments” which is a value pulled from our wordpress Post slugs , refer to screenshot below which indicates the slug “Cantonments” from our post search terms and how the out should maybe look like.

The screenshot below is another example of how some our slugs are that currently returned when we search this page … e.g Adabraka [slug]

Results after searching based on the Adabraka Slug

So in a nutshell the value input should be based on the slug e.g Cantonments, Adabraka etc.

Hi @johnzuh,

Thank you for the details, it helps a lot!

The requirement to render the map center around the location is to have the position of the point i.e. latitude/longitude. Without this data it’s not possible to move the map. I can see two solutions to have this information:

  • store the location in the Wordpress site along with the slug
  • call the Places API on page load to get the coordinates of the location

Once the coordinates are found a call to the Leaflet API should do the trick to center the map. You can re-use the logic showcased in the Places documentation (see below).

map.setView(new L.LatLng(LAT, LNG), 1);

Hope that helps!

Pardon for the late response. Will give that a shot and will not hesitate to get back to you if i have further questions.