WP Flexible Map | Snippets

WP Flexible Map allows you to embed Google Maps in pages and posts, either by centre coodinates or street address, or by URL to a Google Earth KML file.

Download WP Flexible Map. Get support in the forum. View the changelog.

To add a Flexible Map to a post or a page, add a shortcode [flexiblemap] and give it some useful parameters.

Map can either be specified using centre coordinates or street address, or by loading a KML file. A KML file has the advantage that you can have many different markers all on the one map.

Example: map by coordinates
[flexiblemap center="-34.916721,138.828878" width="100%" height="400" title="Adelaide Hills" directions="true"]

Example: map by KML
[flexiblemap src="http://snippets.webaware.com.au/maps/example-toronto.kml?v=2" width="100%" height="400"]

Sponsorships

directions on KML maps generously sponsored by Roger Los

Thanks for sponsoring new features on WP Flexible Maps!

Support this plugin

If you like this plugin and would like to help support its maintenance and further development, please consider making a donation.

Parameters for all maps:

width: width in pixels or valid CSS units, e.g. width=”500″
height: height in pixels or valid CSS units, e.g. height=”400″
id: the CSS id of the container div (instead of a random generated unique ID), e.g. id=”my_map”
zoom: zoom level as an integer, larger is closer, e.g. zoom=”16″
maptype: type of map to show, from [roadmap, satellite], e.g. maptype=”roadmap”; default=roadmap
hidemaptype: hide the map type controls, from [true, false], e.g. hidemaptype=”true”; default=false
hidepanning: hide the panning controls, from [true, false], e.g. hidepanning=”true”; default=true
hidezooming: hide the zoom controls, from [true, false], e.g. hidezooming=”true”; default=false
hidestreetview: hide the street view control, from [true, false], e.g. hidestreetview=”true”; default=true
hidescale: hide the map scale, from [true, false], e.g. hidescale=”true”; default=true
scrollwheel: enable zoom with mouse scroll wheel, from [true, false], e.g. scrollwheel=”true”; default=false
draggable: enable dragging to pan, from [true, false], e.g. draggable=”true”; default=true
dblclickzoom: enable double-clicking to zoom, from [true, false], e.g. dblclickzoom=”true”; default=true
directions: show directions link in text bubble; by default, directions will be displayed underneath map, but you can specify the element ID for directions here, e.g. directions=”true”, directions=”my-dir-id”; default=false
locale: use a specific locale (language) for messages like the text of the Directions link, e.g. locale=”nl-BE”
region: specify region to help localise address searches for street address map and directions, taken from the list of ccTLD (without the .), e.g. region=”au”

Additional parameters for centre coordinates map:

center: coordinates of centre in latitude,longitude, e.g. center=”-34.916721,138.828878″
address: street address of map centre, e.g. address=”116 Beaumont Street Hamilton NSW Australia”
marker: coordinates of the marker if different from the centre, in latitude,longitude, e.g. marker=”-34.916721,138.828878″
title: title of the marker, displayed in a text bubble, e.g. title=”Adelaide Hills”
link: URL to link from the marker title, e.g. link=”http://example.com/”
icon: URL to icon for the marker, e.g. icon=”http://maps.google.com/mapfiles/kml/pal3/icon29.png”
description: a description of the marker location (can have HTML links), e.g. description=”Lorem ipsum dolor sit amet”
html: some simple HTML to add to the info window, e.g. html=”<img src=’http://example.com/logo.img’ />”
showdirections: show directions when the map loads, e.g. showdirections=”true”; default=false
directionsfrom: initial from: location for directions, e.g. directionsfrom=”Sydney”
showinfo: show the marker’s info window when the map loads, from [true, false], e.g. showinfo=”true”; default=true
Samples:: [flexiblemap center="-34.916721,138.828878" width="500" height="400" zoom="9" title="Adelaide Hills" description="The Adelaide Hills are repleat with wineries."]; [flexiblemap address="116 Beaumont Street Hamilton NSW Australia" region="au" directions="true"]; [flexiblemap center="-32.891058,151.538042" title="Mount Sugarloaf" directions="true"]; [flexiblemap center="-32.918827,151.806164" title="Nobby's Head" directions="my-dir-div"]

Additional parameters for KML map:

src: URL for KML file to load map details from, e.g. src=”http://example.com/map.kml”
targetfix: prevent links from opening in new window, from [true, false], e.g. targetfix=”true”; default=true; [flexiblemap src="http://snippets.webaware.com.au/maps/example-toronto.kml" width="500" height="400"]

Calling from templates or plugins

There is a PHP function flexmap_show_map() for theme and plugin developers. All of the same parameters for the shortcode can be passed to the function in an associative array.

Sample:

flexmap_show_map(array(
  'center' => '-34.916721,138.828878',
  'width' => 500,
  'height' => 400,
  'zoom' => 12,
  'title' => 'Adelaide Hills',
  'description' => 'The Adelaide Hills are repleat with wineries.',
  'directions' => 'my-dir-div',
  'hidepanning' => 'false',
  'hidescale' => 'false',
  'maptype' => 'satellite',
));

There are also some filter hooks that allow you to change the behaviour of the plugin.

flexmap_google_maps_api_url: allows you to replace the Google Maps API URL, e.g. if you need a different API version (NB: this plugin’s scripts are coded for a specific API major version!)
flexmap_shortcode_attrs: allows you to change the shortcode attributes, e.g. change the width and height
flexmap_shortcode_styles: allows you to change the inline styles applied to the div wrapping the map, e.g. remove width and height so that it can be specified in the theme’s stylesheets
flexmap_shortcode_html: allows you to change the generated html, e.g. wrap in another div, add a link to Google Maps, etc.

Samples:

/**
* replace the current version Google Maps API with "experimental" version
* @param string $url the URL to Google Maps API script
* @return string
*/
function theme_flexmap_google_maps_api_url($url) {
    return '//maps.google.com/maps/api/js?v=3.exp&sensor=false';
}
add_filter('flexmap_google_maps_api_url', 'theme_flexmap_google_maps_api_url');

/**
* disable display of infowindows, and force display of directions form
* @param array $attrs an array of key:value pairs for shortcode attributes
* @return array
*/
function theme_flexmap_shortcode_attrs($attrs) {
    $attrs['showinfo'] = 'false';
    $attrs['showdirections'] = 'true';

    return $attrs;
}
add_filter('flexmap_shortcode_attrs', 'theme_flexmap_shortcode_attrs');

/**
* clear the width and height parameters on Google maps, so that stylesheets can take over
* @param array $styles an array of key:value pairs for inline styles on the div wrapping the map
* @param array $attrs an array of key:value pairs for shortcode attributes
* @return array
*/
function theme_flexmap_shortcode_styles($styles, $attrs) {
    unset($styles['width']);
    unset($styles['height']);

    return $styles;
}
add_filter('flexmap_shortcode_styles', 'theme_flexmap_shortcode_styles', 10, 2);

/**
* add some custom HTML after the map
* @param string $html the HTML generated for the
* @param array $attrs an array of key:value pairs for shortcode attributes
* @return string
*/
function theme_flexmap_shortcode_html($html, $attrs) {
    $html .= "
Your custom HTML here

\n";

    return $html;
}
add_filter('flexmap_shortcode_html', 'theme_flexmap_shortcode_html', 10, 2);