MX Google Map documentation

Tags

Primary Tag Pair

{field_name}
{point_id}
{latitude}
{longitude}
{custom_gm_fields}
{icon}
{/field_name}

{exp:channel:entries channel="about"}
<ul>
{gmap_field}<li>{latitude} : {longitude}  : {icon} : {address} : {city} : {state} : {zipcode}</li>{/gmap_field}
<ul>
{/exp:channel:entries}

{field_name:map}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/themes/third_party/mx_google_map/mxgooglemap.js"></script>

<p>{exp:channel:entries channel="my_channel" limit="1"}<br />
{field_name:map maptype="ROADMAP" mt_control_style = "DROPDOWN_MENU" scrollwheel = "false" doubleclickzoomoff="true"}<br />
{/exp:channel:entries}

Parameters

maptype ROADMAP

The initial Map type

HYBRID This map type displays a transparent layer of major streets on satellite images.

ROADMAP This map type displays a normal street map.

SATELLITE This map type displays satellite images.

TERRAIN This map type displays maps with physical features such as terrain and vegetation.

n_control_style ZOOM_PAN

The initial Navigation control style
    • SMALL displays a mini-zoom control, consisting of only + and - buttons. This style is appropriate for mobile devices.
    • ZOOM_PAN displays the standard zoom slider control with a panning control, as on Google Maps.
    • ANDROID displays the small zoom control as used on the native Maps application on Android devices.
    • DEFAULT picks an appropriate navigation control based on the map’s size and the device on which the map is running.

mt_control_style HORIZONTAL_BAR

  The initial MapType control style
    • HORIZONTAL_BAR displays the array of controls as buttons in a horizontal bar as is shown on Google Maps.
    • DROPDOWN_MENU displays a single button control allowing you to select the map type via a dropdown menu.
    • DEFAULT displays the “default” behavior, which depends on screen size and may change in future versions of the API

navigationControl true

The initial enabled/disabled state of the navigation control.

scaleControl true

The initial enabled/disabled state of the scale control.

mapTypeControl true

The initial enabled/disabled state of the Map type control.

scrollwheel true

If false, disables scrollwheel zooming on the map. The scrollwheel is enabled by default.

doubleclickzoomoff false

Enables/disables zoom and center on double click. Enabled by default.

draggable true

If false, prevents the map from being dragged. Dragging is enabled by default.

icon

Custom Icons for marker without icons

marker_draggable false

If false, prevents the makrer from being dragged.

width="500px"

height="100%"

id

class

{exp:mx_google_map:form}

Form Example

{exp:mx_google_map:form result_page = "/search.html" long="" lat="" unit = "" backspace="1"}
<h2>Shop locator</h2>
<p><label for="address">Enter street address, city and/or zip</label>
<input name="address" type="text" value="">


<p><label for="radius">Select all points within</label>

<select name="radius"><option value="100">100</option>
<option value="50" selected="selected">50</option>
<option value="30">30</option>
<option value="25">25</option>
<option value="20">20</option>
<option value="15">15</option>
<option value="10">10</option></select>
<span>miles</span></p>
<p><input type="submit" value="Submit" /></p>

<p>{/exp:mx_google_map:form}

you can also used category in your locator form

{exp:channel:categories channel="news"}
<input type="checkbox" name="categories[]" value="{category_id}" /> {category_name}
{/exp:channel:categories}

 

Parameters

result_page

The Template_Group/Template where you would like the search results to be shown. If you do not specify this parameter, then it will the same page.

long

Default center longitude

lat

Default center latitude

unit

Unit of distance : miles or km

backspace

{exp:mx_google_map:search}

For result ({exp:mx_google_map:search}) addon used channel class , so you can used all Channel tags inside {entries}{/entries} tags.

<h2>Results</h2>
<ul>
{exp:mx_google_map:search channel="about" reverse_geocoding= "true" address="" long="" lat="" unit = "" radius = "500" prec="2" prefix="" address_fields="address"}
{entries}
<li><ul>
{field_name}<li>{title} #{point_id}-{distance}</li>{/field_name}
</ul>
</li><p>{/entries}<br />
{/exp:mx_google_map:search}</p>
</ul>

Parameters

address

radius

The radius of searching

prec

Precision rounding

orderby

Specify orderby for ({exp:mx_google_map:search}) tag - orderby=“distance”

sort

sort=“asc|desc”

address_fields

address_fields="address"[code]
List of fields for address. For example you give user choose country as separate field or you can add hidden field for this.
<div class="highlight-ci">
[code]
[code]address_fields="address|country"[code]

unit

Specify the unit of distance : miles or km

Single Variables

{radius}

The radius of searching

{distance}