WordPress.org

Ready to get started?Download WordPress

Plugin Directory

WP Flexible Map

Embed Google Maps in pages and posts, either by centre coordinates or street address, or by URL to a Google Earth KML file.

Why do I get "The Google Maps API server rejected your request"?

If Google Maps is telling you this:

The Google Maps API server rejected your request. The "sensor" parameter specified in the request must be set to either "true" or "false".

then something on your website is stripping the query strings on scripts. It's probably a misguided attempt to make your website more secure, and it's a dumb idea. Some so-called "security" plugins do this, and I've heard of a theme doing it too. You need to find out what is doing it and fix it, or remove it. Start by deactivating plugins that pretend to enhance security and retest, then try switching your theme to twentytwelve to see if the theme is the problem.

Where are the settings?

There are none! You just need to add some attributes to your shortcode telling the map what to do.

Of course, in WordPress there is a plugin for everything :) so if you want settings, please install the Flexible Map Options plugin. That plugin lets you set some defaults so that if you use the same attributes over and over, you can put them all in one place.

Can I add multiple markers to a map?

Using a KML file, you can have as many markers on a map as you like, with as much detail in the info windows. With KML you can also change marker icons and add other nice features. You can generate your KML file from an application like Google Earth, or you can create it yourself (in a text editor or with your own programming). Learn more about KML.

Why won't my KML map update when I edit the KML file?

Google Maps API caches the KML file, so it can take a while for your new changes to appear. To force a change, append a URL query parameter with a number (known as a cache buster) and increment the number each time you change the KML file. A nice simple and commonly used parameter name is v (for version), like this: http://example.com/my-map.kml?v=2

If your map is auto-generated or changes frequently, add the kmlcache attribute to ask Google to fetch a new copy periodically. You can specify the interval in minutes (e.g. "90 minutes"), hours (e.g. "2 hours"), or days (e.g. "1 day"). The minimum interval is 5 minutes.

[flexiblemap src="http://snippets.webaware.com.au/maps/example-toronto.kml?v=2"]
[flexiblemap src="http://snippets.webaware.com.au/maps/example-toronto.kml" kmlcache="8 hours"]

What parts of KML are supported?

The Google Maps API supports many commonly used KML elements, but has some restrictions. Read about Google Maps support for KML in the developers' guide, and also see the list of KML elements supported in Google Maps.

Why won't the map show my place when I use the address attribute?

When you use a street address instead of centre coordinates, you are effectively searching Google Maps for your location. Try being very specific about your address, including your town / city, state / province, and country to make sure Google can find where you mean. You can also specify your region with the region attribute to help Google Maps refine its search. If the marker is still in the wrong place, you might need to specify the location using centre coordinates instead.

How can I use centre coordinates for the map and have directions to my address?

When you use just centre coordinates for your map, the directions may send people to the location opposite your location! Yes, I know... anyway, if you specify both the centre coordinates and the street address, the map will be centred correctly and the directions will be to your address.

How do I get the maps to use my language?

The plugin uses localised messages for things like the Directions link and the default message on links in info windows. If you have your WordPress installation set to use your language, the plugin should automatically pick it up. If you need to force it to pick up your language (or want to offer a different language), use the locale attribute, e.g. locale="ru" or locale="zh-TW".

Google Maps will use the locale information from your web browser to help display maps and directions in your language (see your browser's language settings). If you want to force the Google Maps language for every map on a page, you can use a filter hook. For example, here's how to force the Google Maps language to match the language of the page / post its on (e.g. when using WPML translated content):

add_filter('flexmap_google_maps_api_args', 'force_flexmap_map_language');

function force_flexmap_map_language($args) {
    $args['language'] = get_locale();
    return $args;
}

You've translated my language badly / it's missing

The initial translations were made using Google Translate, so it's likely that some will be truly awful! Please help by editing the .js file for your language in the i18n folder, and tell me about it in the support forum.

The map is broken in jQuery UI tabs

When you hide the map in a tab, and then click on the tab to reveal its contents, the map doesn't know how big to draw until it is revealed. You need to give Google Maps a nudge so that it will pick up the correct size and position when you reveal it. Here's some sample jQuery code to do this, which you should add somewhere on the page (e.g. in your theme's footer):

<script>
jQuery(function($) {

$("body").bind("tabsactivate", function(event, ui) {
    $("#" + ui.newPanel[0].id + " div.flxmap-container").each(function() {
        var flxmap = window[this.getAttribute("data-flxmap")];
        flxmap.redrawOnce();
    });
});

});
</script>

For jQuery versions 1.8 or older:

<script>
jQuery(function($) {

$("body").bind("tabsshow", function(event, ui) {
    $("#" + ui.panel.id + " div.flxmap-container").each(function() {
        var flxmap = window[this.getAttribute("data-flxmap")];
        flxmap.redrawOnce();
    });
});

});
</script>

For tabs in jQuery Tools, see this support topic.

How can I get access to the map object?

If you want to add your own scripting for the map, you can get the map object by identifying the FlexibleMap global variable for your map, and asking it to getMap(). By default, each FlexibleMap is given a randomly generated ID and the global variable name is derived from that. The map's containing div has a data property with this global variable name. Here's some sample jQuery code that gets the map object for the (first) map:

jQuery(window).load(function() {
    var flxmapName = jQuery("div.flxmap-container").attr("data-flxmap");
    var flxmap = window[flxmapName];
    var map = flxmap.getMap();
    // ... use map ...
});

Alternatively, you can specify the ID used for a given map, and it will then derive the global variable name from that. Here's a sample shortcode:

[flexiblemap center="-32.891058,151.538042" id="sugarloaf"]

And here's some sample jQuery code:

jQuery(window).load(function() {
    var map = flxmap_sugarloaf.getMap();
    // ... use map ...
});

Why won't the map load on my AJAX single-page website?

The plugin only loads the required JavaScript scripts when it knows that they are needed. When your website uses AJAX to load a page, the normal WordPress footer action for that page doesn't happen, and the scripts aren't loaded. You can make the scripts load on every page by adding this snippet to the functions.php file in your theme:

function my_preload_map_scripts() {
    if (function_exists('flexmap_load_scripts')) {
        flexmap_load_scripts();
    }
}
add_action('wp_enqueue_scripts', 'my_preload_map_scripts', 20);

To make it load locale scripts as well, e.g. for French and Chinese language text, add them to the function call like this:

flexmap_load_scripts(array('fr', 'zh'));

The plugin will detect when AJAX is being used via the WordPress standard method, and adjust accordingly (but you still need to load the scripts as above). If another method is used, add isajax='true' to the shortcode attributes.

NB: currently, only AJAX methods that parse script tags will work correctly; this includes some jQuery methods (but not all). A future version of the plugin will be more AJAX friendly.

I have CloudFlare Rocketscript turned on and the map doesn't work

Either turn off CloudFlare Rocketscript :) or install the Flxmap No Rocketscript plugin by loading that file into your website's wp-content/plugins folder and activating through the plugins admin page. Use the plugin if you still want Rocketscript to manage all of your other scripts but leave the Flexible Map scripts alone.

Requires: 3.2.1 or higher
Compatible up to: 3.9.1
Last Updated: 2014-4-18
Downloads: 61,837

Ratings

4 stars
4.7 out of 5 stars

Support

6 of 13 support threads in the last two months have been resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

3 people say it works.
0 people say it's broken.

50,2,1 100,1,1
0,1,0
100,2,2
0,1,0
100,1,1 100,3,3
100,1,1
100,3,3
100,2,2 100,1,1 100,2,2
100,2,2 100,1,1 100,2,2
100,1,1
100,2,2
100,3,3