WP Flexible Map

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.

NEW: check out the new homepage for this plugin, with better doco and examples on the way…

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
dirdraggable
allow directions to be draggable, from [true, false]; default=false
dirnomarkers
suppress start and end markers when showing directions, from [true, false]; 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);
facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmail