Location: PHPKode > scripts > WP Flexible Map > wp-flexible-map/instructions.html
<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=&quot;500&quot;</em></dd>
	<dt>height</dt>
	<dd>height in pixels, e.g. <em>height=&quot;400&quot;</em></dd>
	<dt>zoom</dt>
	<dd>zoom level as an integer, larger is closer, e.g. <em>zoom=&quot;16&quot;</em></dd>
	<dt>maptype</dt>
	<dd>type of map to show, from [roadmap, satellite], e.g. <em>maptype=&quot;roadmap&quot;</em>; default=roadmap</dd>
	<dt>hidemaptype</dt>
	<dd>hide the map type controls, from [true, false], e.g. <em>hidemaptype=&quot;true&quot;</em>; default=false</dd>
	<dt>hidepanning</dt>
	<dd>hide the panning controls, from [true, false], e.g. <em>hidepanning=&quot;true&quot;</em>; default=true</dd>
	<dt>hidezooming</dt>
	<dd>hide the zoom controls, from [true, false], e.g. <em>hidezooming=&quot;true&quot;</em>; default=false</dd>
	<dt>hidestreetview</dt>
	<dd>hide the street view control, from [true, false], e.g. <em>hidestreetview=&quot;true&quot;</em>; default=true</dd>
	<dt>hidescale</dt>
	<dd>hide the map scale, from [true, false], e.g. <em>hidescale=&quot;true&quot;</em>; default=true</dd>
	<dt>scrollwheel</dt>
	<dd>enable zoom with mouse scroll wheel, from [true, false], e.g. <em>scrollwheel=&quot;true&quot;</em>; default=false</dd>
	<dt>draggable</dt>
	<dd>enable dragging to pan, from [true, false], e.g. <em>draggable=&quot;true&quot;</em>; default=true</dd>
	<dt>dblclickzoom</dt>
	<dd>enable double-clicking to zoom, from [true, false], e.g. <em>dblclickzoom=&quot;true&quot;</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=&quot;-34.916721,138.828878&quot;</em></dd>
	<dt>address</dt>
	<dd>street address of map centre, e.g. <em>address=&quot;116 Beaumont Street Hamilton NSW Australia&quot;</em></dd>
	<dt>marker</dt>
	<dd>coordinates of the marker if different from the centre, in latitude,longitude, e.g. <em>marker=&quot;-34.916721,138.828878&quot;</em></dd>
	<dt>title</dt>
	<dd>title of the marker, displayed in a text bubble, e.g. <em>title=&quot;Adelaide Hills&quot;</em></dd>
	<dt>link</dt>
	<dd>URL to link from the marker title, e.g. <em>link=&quot;http://example.com/&quot;</em></dd>
	<dt>icon</dt>
	<dd>URL to icon for the marker, e.g. <em>icon="http://maps.google.com/mapfiles/kml/pal3/icon29.png"</em></dd>
	<dt>description</dt>
	<dd>a description of the marker location (can have HTML links), e.g. <em>description=&quot;Lorem ipsum dolor sit amet&quot;</em></dd>
	<dt>html</dt>
	<dd>some simple HTML to add to the info window, e.g. <em>&lt;img src='http://example.com/logo.img' /&gt;</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=&quot;true&quot;</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=&quot;nl-BE&quot;</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=&quot;au&quot;</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=&quot;http://example.com/map.kml&quot;</em></dd>
	<dt>targetfix</dt>
	<dd>prevent links from opening in new window, from [true, false], e.g. <em>targetfix=&quot;true&quot;</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>
Return current item: WP Flexible Map