MX Google Map documentation


Primary Tag Pair


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


<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></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 />


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.


Custom Icons for marker without icons

marker_draggable false

If false, prevents the makrer from being dragged.






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>
<p><input type="submit" value="Submit" /></p>


you can also used category in your locator form

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




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.


Default center longitude


Default center latitude


Unit of distance : miles or km



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

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




The radius of searching


Precision rounding


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




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">


Specify the unit of distance : miles or km

Single Variables


The radius of searching