Add API key to shortcode

G’day jsymmetry,

I’ve noticed the warnings about requiring a key, but I’ve not seen it throw an error yet so was putting off support for keys until “next time”. I’d guess that your site is hitting the API sufficiently for it to now require the key, or you’re in a zone that requires a key.

Here’s a pre-release cut with support for adding a key. Please install this in place of the copy you have, and set your key through the Settings page for Flexible Map.

https://dl.dropboxusercontent.com/u/26305751/wp-flexible-map-1.11.1-dev.zip

Let me know how that goes.

cheers,
Ross

Resolved with v1.12.0

Thank you for the prompt response and for looking into the issue. I managed to embed the map using JavaScript, but now that the plugin offers the same functionality, I will give it another try with the next embed.

Hello jsymmetry.

Would you be able to share your JS solution. Unfortunately it does not work on my install even after updating to v.1.12.0 and saving my API Key in the plugin settings.

From what I can tell, there is no /?key=xxx parameter added to the line script output https://maps.googleapis.com/maps/api/js in the markup of my site.

Many thanks for any hints.

Kind regards,

Karl

G’day Karl (@KarlFox2014akaKLDKarl),

It sounds like your website has other things loading the Google Maps API, possibly registering it with the same handle as this plugin (google-maps — generally a good idea).

Please open a new support topic and share a link to your website so that I can look at it. While you’re at it, try disabling some plugins that might be loading Google Maps, or temporarily switch themes to twentysixteen to see if your theme is causing the problem.

We can chat about your site once you open a new topic.

cheers,
Ross

Hi Karl,

The dev is the voice of wisdom on this topic, so please take note of his suggestions above. I think that getting the plugin working is a better option than going with code. He has a good thing going here, has updated the plugin to be compatible with API keys, and is also responsive to users’ questions.

That said, here’s an excerpt:

<div id="map-wrapper"><div id="map"></div></div>

<script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 23.61, lng: 121},
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    scrollwheel: false,
    zoom: 8
  });

var kmlRoutesUrl = 'https://example.com/YOUR-KML-FILE.kml';
var kmlRoutesOptions = {
  suppressInfoWindows: false,
  preserveViewport: true,
  zIndex: 1,
  map: map
};
var kmlRoutesLayer = new google.maps.KmlLayer(kmlRoutesUrl, kmlRoutesOptions);

}
</script>

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap"
    async defer></script>

Some more things to note:

1. You will need to adjust the code above if you plan to use it.
2. You will also need to disable any plugins that interfere with the code.
3. The “map-wrapper” div above needs to be given an explicit height using custom CSS.
4. On my site, I also needed to activate a plugin called “Toggle wpautop” because WordPress likes to arbitrarily add p tags to the code even when using the text editor to post.

I hope that helps. I’d still suggest going with the plugin if possible.

Jonathan

Hello, jsymmetry.

Many thanks for your great answer. I will look into both opitions – working with your code and getting additional feedback directly from the developer.

Have a great day!

Kind regards from Austria.

Karl