- Upload this plugin to your /wp-content/plugins/ directory.
- Activate the plugin through the 'Plugins' menu in WordPress.
- Add the shortcode [flexiblemap] to your pages / posts to embed maps
There are two ways to load maps with this plugin:
- specify the map's coordinates or street address
- specify the URL to a KML file (e.g. from Google Earth)
To add a Flexible Map to a post or a page, add a shortcode [flexiblemap] and give it some useful parameters. A map can either be specified using centre coordinates or street address, or by loading a KML file.
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
- 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"
- locale: use a specific locale (language) for messages like the text of the Directions link, e.g. locale="nl-BE"
Additional parameters for centre coordinates or street address map
Either the center or the address paramater is required. If you provide both, the centre coordinates will be used for the map centre, but directions will use the street address. (This will prevent directions from telling people how to get to the destination opposite yours!)
- 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.
<img src='http://example.com/logo.img' />
- showinfo: show the marker's info window when the map loads, from [true, false], e.g. showinfo="true"; default=true html
- showdirections: show directions when the map loads, e.g. showdirections="true"; default=false
- directionsfrom: initial from: location for directions, e.g. directionsfrom="Sydney"
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: the URL for a 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
Sample:
[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. If you want it to return the map as a string without output to screen, add "echo"=>"false" to array of attributes.
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_args: filter the array of arguments that will be passed to the Google Maps API, e.g. 'v'=>'3.11', 'sensor'=>'false'
- flexmap_google_maps_api_url: filter the Google Maps API URL, as a string
- flexmap_shortcode_attrs: filter the array of shortcode attributes, e.g. change the width and height
- flexmap_shortcode_styles: filter the array of 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: filter the generated html, e.g. wrap another div around it, add a link to Google Maps, add some additonal script, etc.
For more information and examples, see the website.