<style type="text/css">
.flxmap-instructions-parameters dt {
font-weight: bold;
}
.flxmap-instructions-parameters dd {
margin-left: 1.5em;
}
.flxmap-instructions-parameters code {
font-family: "Liberation Mono", monospace;
font-size: 110%;
}
</style>
<p>To add a Flexible Map to a post or a page, add a shortcode [flexiblemap] and give it some useful parameters.</p>
<p>Map can either be specified using centre coordinates, or by loading a KML file. A KML file has the advantage that you can have
many different markers all on the one map.</p>
<h3>Parameters for all maps:</h3>
<dl class="flxmap-instructions-parameters">
<dt>width</dt>
<dd>width in pixels, e.g. <em>width="500"</em></dd>
<dt>height</dt>
<dd>height in pixels, e.g. <em>height="400"</em></dd>
<dt>zoom</dt>
<dd>zoom level as an integer, larger is closer, e.g. <em>zoom="16"</em></dd>
<dt>maptype</dt>
<dd>type of map to show, from [roadmap, satellite], e.g. <em>maptype="roadmap"</em>; default=roadmap</dd>
<dt>hidemaptype</dt>
<dd>hide the map type controls, from [true, false], e.g. <em>hidemaptype="true"</em>; default=false</dd>
<dt>hidepanning</dt>
<dd>hide the panning controls, from [true, false], e.g. <em>hidepanning="true"</em>; default=true</dd>
<dt>hidezooming</dt>
<dd>hide the zoom controls, from [true, false], e.g. <em>hidezooming="true"</em>; default=false</dd>
<dt>hidestreetview</dt>
<dd>hide the street view control, from [true, false], e.g. <em>hidestreetview="true"</em>; default=true</dd>
<dt>hidescale</dt>
<dd>hide the map scale, from [true, false], e.g. <em>hidescale="true"</em>; default=true</dd>
<dt>scrollwheel</dt>
<dd>enable zoom with mouse scroll wheel, from [true, false], e.g. <em>scrollwheel="true"</em>; default=false</dd>
<dt>draggable</dt>
<dd>enable dragging to pan, from [true, false], e.g. <em>draggable="true"</em>; default=true</dd>
<dt>dblclickzoom</dt>
<dd>enable double-clicking to zoom, from [true, false], e.g. <em>dblclickzoom="true"</em>; default=true</dd>
</dl>
<hr />
<h3>Additional parameters for centre coordinates map:</h3>
<dl class="flxmap-instructions-parameters">
<dt>center</dt>
<dd>coordinates of centre in latitude,longitude, e.g. <em>center="-34.916721,138.828878"</em></dd>
<dt>address</dt>
<dd>street address of map centre, e.g. <em>address="116 Beaumont Street Hamilton NSW Australia"</em></dd>
<dt>marker</dt>
<dd>coordinates of the marker if different from the centre, in latitude,longitude, e.g. <em>marker="-34.916721,138.828878"</em></dd>
<dt>title</dt>
<dd>title of the marker, displayed in a text bubble, e.g. <em>title="Adelaide Hills"</em></dd>
<dt>link</dt>
<dd>URL to link from the marker title, e.g. <em>link="http://example.com/"</em></dd>
<dt>description</dt>
<dd>a description of the marker location (can have HTML links), e.g. <em>description="Lorem ipsum dolor sit amet"</em></dd>
<dt>html</dt>
<dd>some simple HTML to add to the info window, e.g. <em><img src='http://example.com/logo.img' /></em></dd>
<dt>directions</dt>
<dd>show directions link in text bubble; by default, directions will be displayed underneath map, but you can specify the element ID for directions here.</dd>
<dt>showdirections</dt>
<dd>show directions when the map loads</dd>
<dt>directionsfrom</dt>
<dd>initial from: location for directions</dd>
<dt>showinfo</dt>
<dd>show the marker's info window when the map loads, from [true, false], e.g. <em>showinfo="true"</em>; default=true</dd>
<dt>locale</dt>
<dd>use a specific locale (language) for messages like the text of the Directions link, e.g. <em>locale="nl-BE"</em></dd>
<dt>region</dt>
<dd>specify region to help localise address searches for street address map and directions, taken from the list of <a href="http://en.wikipedia.org/wiki/List_of_Internet_top-level_domains#Country_code_top-level_domains">ccTLD</a> (without the .), e.g. <em>region="au"</em></dd>
<dt>Samples:</dt>
<dd><code>[flexiblemap center="-34.916721,138.828878" width="500" height="400" zoom="9" title="Adelaide Hills" description="The Adelaide Hills are repleat with wineries."]</code></dd>
<dd><code>[flexiblemap center="-34.916721,138.828878" width="500" height="400" title="Adelaide Hills" directions="true"]</code></dd>
<dd><code>[flexiblemap center="-34.916721,138.828878" width="500" height="400" title="Adelaide Hills" directions="my-dir-div"]</code></dd>
</dl>
<hr />
<h3>Additional parameters for KML map:</h3>
<dl class="flxmap-instructions-parameters">
<dt>src</dt>
<dd>URL for KML file to load map details from, e.g. <em>src="http://example.com/map.kml"</em></dd>
<dt>targetfix</dt>
<dd>prevent links from opening in new window, from [true, false], e.g. <em>targetfix="true"</em>; default=true</dd>
<dt>Sample:</dt>
<dd><code>[flexiblemap src="http://snippets.webaware.com.au/maps/example-toronto.kml" width="500" height="400"]</code></dd>
</dl>
<hr />
<h3>Calling from templates or plugins</h3>
<p>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.</p>
<dl class="flxmap-instructions-parameters">
<dt>Sample:</dt>
<dd><pre><code>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',
));</code></pre></dd>
</dl>