Title: Add API key to shortcode
Last modified: September 1, 2016

---

# Add API key to shortcode

 *  Resolved [jsymmetry](https://wordpress.org/support/users/jsymmetry/)
 * (@jsymmetry)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/add-api-key-to-shortcode/)
 * Using the shortcode to load a map with kml overlay results in the following message:
 * > Oops! Something went wrong.
   >  This page didn’t load Google Maps correctly. See
   > the JavaScript console for technical details.
 * The JavaScript console reveals the following error:
 * `Google Maps API error: MissingKeyMapError`
 * The shortcode looks like this:
 * `[flexiblemap src="http://www.taiwantrail.org/files/taiwantrail-landmarks.kml"
   width="100%" kmlcache="5 minutes"]`
 * I have a Google Maps API Key.
 * **Can this be added as a parameter to the shortcode, does it need to be included
   as a separate script, or is it not compatible with the Flexible Map plugin?**
 * I have tried both of those possible solutions to no avail.
 * I see that the plugin description page says “no special Google Maps key is required—
   uses the latest stable Google Maps API,” but as far as I know, Google now requires
   API keys for using kml overlays.
 * [https://wordpress.org/plugins/wp-flexible-map/](https://wordpress.org/plugins/wp-flexible-map/)

Viewing 7 replies - 1 through 7 (of 7 total)

 *  Plugin Author [webaware](https://wordpress.org/support/users/webaware/)
 * (@webaware)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/add-api-key-to-shortcode/#post-7515454)
 * 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](https://dl.dropboxusercontent.com/u/26305751/wp-flexible-map-1.11.1-dev.zip)
 * Let me know how that goes.
 * cheers,
    Ross
 *  Plugin Author [webaware](https://wordpress.org/support/users/webaware/)
 * (@webaware)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/add-api-key-to-shortcode/#post-7515540)
 * Resolved with v1.12.0
 *  Thread Starter [jsymmetry](https://wordpress.org/support/users/jsymmetry/)
 * (@jsymmetry)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/add-api-key-to-shortcode/#post-7515546)
 * 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.
 *  [Karl Silver](https://wordpress.org/support/users/karlfox2014akakldkarl/)
 * (@karlfox2014akakldkarl)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/add-api-key-to-shortcode/#post-7515609)
 * 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](https://maps.googleapis.com/maps/api/js)
   in the markup of my site.
 * Many thanks for any hints.
 * Kind regards,
 * Karl
 *  Plugin Author [webaware](https://wordpress.org/support/users/webaware/)
 * (@webaware)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/add-api-key-to-shortcode/#post-7515610)
 * 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](https://wordpress.org/support/plugin/wp-flexible-map)
   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
 *  Thread Starter [jsymmetry](https://wordpress.org/support/users/jsymmetry/)
 * (@jsymmetry)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/add-api-key-to-shortcode/#post-7515612)
 * 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
 *  [Karl Silver](https://wordpress.org/support/users/karlfox2014akakldkarl/)
 * (@karlfox2014akakldkarl)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/add-api-key-to-shortcode/#post-7515613)
 * 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

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Add API key to shortcode’ is closed to new replies.

 * ![](https://ps.w.org/wp-flexible-map/assets/icon-256x256.png?rev=2590627)
 * [Flexible Map](https://wordpress.org/plugins/wp-flexible-map/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-flexible-map/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-flexible-map/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-flexible-map/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-flexible-map/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-flexible-map/reviews/)

## Tags

 * [api key](https://wordpress.org/support/topic-tag/api-key/)
 * [kml](https://wordpress.org/support/topic-tag/kml/)

 * 7 replies
 * 3 participants
 * Last reply from: [Karl Silver](https://wordpress.org/support/users/karlfox2014akakldkarl/)
 * Last activity: [9 years, 11 months ago](https://wordpress.org/support/topic/add-api-key-to-shortcode/#post-7515613)
 * Status: resolved