EEC.MS - ExpressionEngine add-ons
You are here: Home → Forum Home → Fieldtypes → MX Google Map → Thread
Documentations
20/03/2011 New documentations
Features
- MSM compatible
- Based on Google Map API 3
- Support multi geo fields for entry
- Support multi markers per entry
- Drag and drop map marker point for precise control
- “Store locator” functionality
Requirements
PHP 5+
ExpressionEngine2
Installation
1. Download the latest version of MX Google Map and extract the .zip to your desktop.
2. Copy system/expressionengine/third_party/mx_google_map to system/expressionengine/third_party/mx_google_map
3. Copy themes/third_party/mx_google_map to themes/third_party/mx_google_map
Activation
1. Log into your control panel
2. Browse to Addons → Fieldtypes
3. Enable all the MX Google Map components
Update from version <1.1.0rc
1-3. The same as for Installation
4. Delete pi.mx_google_map.php
5. Enable MX Google Map module
Todo
*markers list in slider bar with ordering option
*Performance (php/js/cache optimization)
*Google maps for members custom fileds
*Directions support
*Geo request caching
Documentations
20/03/2011 New documentations
1.1.0rc - *Please read update instruction and documentations.
Version 1.3.0 download / change log / bug tracker / future requests topic
Image Attachments
Click thumbnail to see full-size image
Signature
my EE1 addons | @eecms @max_lazar
Like my addons? Buy me a coffee 
Default Icon Folder:
http://site.com/themes/third_party/mx_google_map/maps-icons/
Display Map template
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/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>
{exp:channel:entries channel="my_channel" limit="1"}
{field_name:map maptype="ROADMAP" mt_control_style = "DROPDOWN_MENU" scrollwheel = "false" doubleclickzoomoff="true"}
{/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%
Display Markers list template
{exp:channel:entries channel="about"}
<ul>
{gmap}<li>{latitude} : {longitude} : {icon} : {address} : {city} : {state} : {zipcode}</li>{/gmap}
<ul>
{/exp:channel:entries}
Image Attachments
Click thumbnail to see full-size image
Signature
my EE1 addons | @eecms @max_lazar
Like my addons? Buy me a coffee
Locator template:
Form (form.html)
{exp:mx_google_map:form result_page = "/search.html" log="" 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>
<input type="submit" value="Submit" />
{/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}
! For result ({exp:mx_google_map:search}) addon used channel class , so you can used all Channel tags inside {entries}{/entries} tags.
Results - list of points (search.html)
<h2>Results</h2>
<ul>
{exp:mx_google_map:search channel="about" reverse_geocoding= "true" address="" log="" lat="" unit = "" radius = "500" prec="2" prefix=""}
{entries}
<li><ul>
{field_name}<li>{title} #{point_id}-{distance}</li>{/field_name}
</ul>
</li>{/entries}
{/exp:mx_google_map:search}
</ul>
Results - map (search.html)
For result ({exp:mx_google_map:search}) used Channel class, so you can used all Channel tags.
Parameters:
address (optional)
radius (optional) The radius of searching
prec (optional) Precision rounding
orderby (optional) Specify orderby for ({exp:mx_google_map:search}) tag - orderby=“distance”
sort (optional) sort=“asc|desc”
unit (optional, default = “km”) Specify the unit of distance.
Tag’s:
{radius} - The radius of searching
{distance}
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/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>
{exp:mx_google_map:search channel="about" sort="DESC" orderby="distance"}
< script type="text/javascript">
marker_icons_path = "/themes/third_party/mx_google_map/maps-icons/";
$(document).ready(function() {
$("#my_search_results").mxgoogleMaps({
latitude: {center:lat},
longitude: {center:long},
zoom: 10,
markers: [{entries}{field_name}{marker_id : {point_id},
state: "{state}",
address: "{address}",
city: "{city}",
zipcode: "{zipcode}",
latitude: {latitude},
longitude: {longitude},
draggable: false,
icon: "{icon}"},{/field_name}{/entries}]
,mapTypeId: google.maps.MapTypeId.ROADMAP
,navigationControl: true
,scaleControl: true
,mapTypeControl: true
,mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
,scrollwheel:false
,disableDoubleClickZoom:true
}
);
});
{if no_results}
$("#my_search_results").hide();
$("#no_results").show();
{/if}
< /script>
{/exp:mx_google_map:search}
<div style="height:600px;width:100%"><div id="my_search_results" style="width: 100%; height: 100%"></div></div>
<div id="no_results" style="display:none;">No Results</div>
Searching with static parameters (Postal code as center of searching with radius 500 )
<ul>
{exp:mx_google_map:search channel="about" address="94105" radius = "500" prec="2"}
{entries}
<li><ul>
{field_name}<li>{title} #{point_id}-{distance}</li>{/field_name}
</ul>
</li>{/entries}
{/exp:mx_google_map:search}
</ul>
Signature
my EE1 addons | @eecms @max_lazar
Like my addons? Buy me a coffee
Display more that 1 entry on the map
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/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>
< script type="text/javascript">
marker_icons_path = "/themes/third_party/mx_google_map/maps-icons/";
$(document).ready(function() {
$("#my_full_map").mxgoogleMaps({
latitude: 44.062919801560106,
longitude: -121.30090713500977,
zoom: 10,
markers: [{exp:channel:entries channel="about" dynamic="off" backspace="1"}{field_name}{marker_id : {point_id},
state: "{state}",
address: "{address}",
city: "{city}",
zipcode: "{zipcode}",
latitude: {latitude},
longitude: {longitude},
draggable: false,
icon: "{icon}"},{/field_name}{/exp:channel:entries}]
,mapTypeId: google.maps.MapTypeId.ROADMAP
,navigationControl: true
,scaleControl: true
,mapTypeControl: true
,mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
,scrollwheel:false
,disableDoubleClickZoom:true
}
);
});
< /script>{
<div style="height:600px;width:100%"><div id="my_full_map" style="width: 100%; height: 100%"></div></div>
Signature
my EE1 addons | @eecms @max_lazar
Like my addons? Buy me a coffee
Google Map with Markers List & InfoWindow
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/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 >
< script type="text/javascript">
marker_icons_path = "/themes/third_party/mx_google_map/maps-icons/";
$(document).ready(function() {
$("#my_full_map").mxgoogleMaps({
latitude: 44.062919801560106,
longitude: -121.30090713500977,
zoom: 10,
markers: [{exp:channel:entries channel="markers" dynamic="off" backspace="1"}
{your_custom_field_name}
{marker_id : {point_id},
latitude: {latitude},
longitude: {longitude},
draggable: false,
icon: "{icon}",
//infowindows template:
infow:"Lat: {latitude}<br/> Long: {longitude}<br> City: {city}"
},
{/your_custom_field_name}
{/exp:channel:entries}]
,mapTypeId: google.maps.MapTypeId.ROADMAP
,navigationControl: true
,scaleControl: true
,mapTypeControl: true
,mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
,scrollwheel:false
,disableDoubleClickZoom:true
}
);
//marker_list begin
side_bar_html ="";
for ( var gmarker in $.mxgoogleMaps.marker) {
side_bar_html += '<a href="j_a_v_a_s_c_r_i_p_t_:myclick('+gmarker+')">' + $.mxgoogleMaps.marker[gmarker].opts.icon + '<\/a><br>';
}
jQuery("#side_bar").html(side_bar_html);
//marker_list end
});
function myclick(i) {
google.maps.event.trigger($.mxgoogleMaps.marker[i], "click");
}
</ script >
<div style="height:600px;width:100%"><div id="my_full_map" style="width: 100%; height: 100%"></div></div>
<div id="side_bar"></div>
Signature
my EE1 addons | @eecms @max_lazar
Like my addons? Buy me a coffee
Simple SAEF (create marker base on address string).
*You need to replace field_id_XX with your mx googel map field ID(field_id_77 for example).
*You can find your field_id in Edit Field page URL.
{exp:channel:entry_form channel="news" return="site/index" preview="site/entry"}
<p>Title<br />
<input type="text" name="title" id="title" value="{title}" size="50" maxlength="100"></p>
<p>URL Title<br />
<input type="text" name="url_title" id='url_title' value="{url_title}" maxlength="75" size="50" /></p>
My Map
<input type="text" id="field_id_XX" name="field_id_XX" maxlength="75" size="50" /></p>
<input type="submit" name="submit" value="Submit" />
{/exp:channel:entry_form}
Signature
my EE1 addons | @eecms @max_lazar
Like my addons? Buy me a coffee
The following types are supported and returned by the HTTP Geocoder and you can use it in the field pattern:
* street_address indicates a precise street address.
* route indicates a named route (such as “US 101”).
* intersection indicates a major intersection, usually of two major roads.
* political indicates a political entity. Usually, this type indicates a polygon of some civil administration.
* country indicates the national political entity, and is typically the highest order type returned by the Geocoder.
* administrative_area_level_1 indicates a first-order civil entity below the country level. Within the United States, these administrative levels are states. Not all nations exhibit these administrative levels.
* administrative_area_level_2 indicates a second-order civil entity below the country level. Within the United States, these administrative levels are counties. Not all nations exhibit these administrative levels.
* administrative_area_level_3 indicates a third-order civil entity below the country level. This type indicates a minor civil division. Not all nations exhibit these administrative levels.
* colloquial_area indicates a commonly-used alternative name for the entity.
* locality indicates an incorporated city or town political entity.
* sublocality indicates an first-order civil entity below a locality
* neighborhood indicates a named neighborhood
* premise indicates a named location, usually a building or collection of buildings with a common name
* subpremise indicates a first-order entity below a named location, usually a singular building within a collection of buildings with a common name
* postal_code indicates a postal code as used to address postal mail within the country.
* natural_feature indicates a prominent natural feature.
* airport indicates an airport.
* park indicates a named park.
* point_of_interest indicates a named point of interest. Typically, these “POI"s are prominent local entities that don’t easily fit in another category such as “Empire State Building” or “Statue of Liberty.”
you need to add suffix “_ln” for long name and “_sn” for short name
Example:
{street_number_ln} {route_ln}, {postal_code_ln}
Signature
my EE1 addons | @eecms @max_lazar
Like my addons? Buy me a coffee
Did you know, that you can create dynamic map pins with Google Chart API(more info)?
You need to setup marker_icons_path as “” and put Google Chart API URL into icon
example was made with :search tag, but you can also used it with regular map code
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/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>
{exp:mx_google_map:search channel="about" sort="DESC" orderby="distance"}
< script type="text/javascript">
marker_icons_path = "";
google_chart = "http://chart.apis.google.com/chart?chst=d_map_pin_letter& chld=";
pin_bg_color = "FF776B";
pin_br_color = "000000";
$(document).ready(function() {
$("#my_search_results").mxgoogleMaps({
latitude: {center:lat},
longitude: {center:long},
zoom: 10,
markers: [{entries}{field_name}{marker_id : {point_id},
state: "{state}",
address: "{address}",
city: "{city}",
zipcode: "{zipcode}",
latitude: {latitude},
longitude: {longitude},
draggable: false,
icon: google_chart + {point_id} + "|" + pin_bg_color + "|" + pin_br_color },{/field_name}{/entries}]
,mapTypeId: google.maps.MapTypeId.ROADMAP
,navigationControl: true
,scaleControl: true
,mapTypeControl: true
,mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
,scrollwheel:false
,disableDoubleClickZoom:true
}
);
});
{if no_results}
$("#my_search_results").hide();
$("#no_results").show();
{/if}
< /script>
{/exp:mx_google_map:search}
<div style="height:600px;width:100%"><div id="my_search_results" style="width: 100%; height: 100%"></div></div>
<div id="no_results" style="display:none;">No Results</div>
Image Attachments
Click thumbnail to see full-size image
Signature
my EE1 addons | @eecms @max_lazar
Like my addons? Buy me a coffee