Site is running on WordPress, using a child theme with custom taxonomies & template files.

I’m currently embedding a Google Maps box (with a custom overlay generated via third-party API) on each of my pages, however I need the default map coordinates to be different depending on the page. The map & API are being embedded via JavaScript, which is where the coordinates are being passed in (see asterisk’d items below).

Current Code:

<script src="https://cdn.airmap.io/map-sdk/1.2.1/dist/airmap.map.min.js"></script>
<script src="/js/airmap.config.json"></script>

<script>
  var map = new Airmap.Map(<<API KEY>>, {
    container: 'map',
    **center**: [27.9104234,-82.7700782],
    layers: [ 'airports_recreational', 'heliports', 'national_parks' ],
    theme: 'standard',
    **zoom**: 5.5,
    pitch: 0,
    bearing: 0,
    interactive: true,
    showControls: true,
    tileServiceUrl:"https://api.airmap.com/maps/v4/tilejson",
    webAppUrl:"https://app.airmap.io",
  });
</script>

My question is: is there a way for me to make the above code work by swapping out the asterisk’d attributes (center, zoom) with variables that change based on the page being loaded? The above code works if I copy/paste it into each page and manually update the values, however I’m trying to have all the pages generated via a custom wordpress template.php file. I know there’s a wordpress function for localize_script() which sounds like it might be what I’m looking for.

I’m still very new to all of this (self-teaching via Lynda.com courses), so let me know if anything isn’t clear of if I need to provide some additional info. If anyone could help point me in the right direction, I’d really appreciate it!

Read more here: WordPress – Javascript function with different parameters based on page info/taxonomy?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: