Always have trouble with the intergration of Google Maps on your site? Always struggling to get it work? Well, those days are gone with the Google Maps (Gmaps) plugin for ExpressionEngine. You can now easily create Maps, markers, polygon, routes and more! It support all major functionality of the Google Maps API and more will come. Be awere of the Google Maps limits.
The following features are supported
Make sure your system meets the minimum requirements:
ee2/system/third_party/gmaps to system/expressionengine/third_party/ee2/system/themes/third_party/gmaps to themes/third_party/As of version 3.0.0 of EE, Gmaps for EE2 will not be extended with new features, but only with bugfixes.
On the CP page you can modify a couple of things.
his tag will ensure that all Javascript is loaded correctly. Just place this in the <head> of your page.
{exp:gmaps:init
lang="en_US"
}Below are the Tag Parameters. Those parameters can be used in the tag described above
The API browser key from google https://developers.google.com/maps/documentation/javascript/get-api-key#get-an-api-key
There is also a setting in the cp for this, to set it global to every map. Even to the Gmaps Fieldtype map
key=""the language code. e.g. en-US or nl-NL or nl-BE, Default to your current browser language
lang=""Load the jquery library or not. Default to yes
load_jquery="yes"Catch the JS output so later on you can use the {exp:gmaps:output_js} tag to ouput all the js code
catch_output_js="no"{exp:gmaps:circle}Below are the Tag Parameters. Those parameters can be used in the tag described above.
For the default parameters, see http://reinos.nl/expressionengine/gmaps/docs/default-params
set the markers.
values: yes no
More marker options, see http://reinos.nl/add-ons/gmaps/docs/markers
marker="yes" [OPTIONAL]The address
address="" [REQUIRED] if latlng is emptyLat Lng points
latlng="" [REQUIRED] if address is emptythe zoom level.
zoom="15" [OPTIONAL]the max_zoom level.
max_zoom="" [OPTIONAL]fit the circle on screen.
fit_circle="yes" [OPTIONAL]set the stroke color.
stroke_color="#131540" [OPTIONAL]set the stroke opacity.
stroke_opacity="0.6" [OPTIONAL]set the stroke weight.
stroke_weight="6" [OPTIONAL]set the fill color.
fill_color="#131540" [OPTIONAL]set the fill opacity.
fill_opacity="0.6" [OPTIONAL]set the radius in feet.
radius="1000" [OPTIONAL]{exp:gmaps:empty_map}Below are the Tag Parameters. Those parameters can be used in the tag described above.
multiple addresses, eg. addresses seperated with a pipline '|'
address="" [REQUIRED] if latlng is emptymultiple latitude longlitude, eg. addresses seperated with a pipline '|'
latlng="" [REQUIRED] if address is emptythe zoom level.
zoom="15" [OPTIONAL]the max_zoom level.
max_zoom="" [OPTIONAL]{exp:gmaps:geolocation}Below are the Tag Parameters. Those parameters can be used in the tag described above.
set the markers.
values: yes no
More marker options, see http://reinos.nl/add-ons/gmaps/docs/markers
marker="yes" [OPTIONAL]the zoom level.
zoom="15" [OPTIONAL]the max_zoom level.
max_zoom="" [OPTIONAL]{exp:gmaps:geocoder
address="heerde"
}Below are the Tag Parameters. Those parameters can be used in the tag described above.
multiple addresses, eg. addresses seperated with a pipline '|'
address="" [REQUIRED] if latlng or ip is emptymultiple latitude longlitude, seperated with a pipline '|'
latlng="" [REQUIRED] if address or ip is emptymultiple ips, seperated with a pipline '|' (Magic const: CURRENT_IP and SERVER_IP)
ip="" [REQUIRED] if address or latlng is emptyBelow are the variable and accessible withing the {result}{/result} tag
{result}
{latitude}
{/result}{latitude}{longitude}{bounds}
{south}
{west}
{north}
{east}
{/bounds}{street_name}{street_number}{city}{zipcode}{city_district}{country}{country_code}{timezone}With the geocoding tag you can easily create a map with markers, infowindow etc...
{exp:gmaps:geocoding
address="[your address here]"
}Below are the Tag Parameters. Those parameters can be used in the tag described above.
multiple addresses, eg. addresses seperated with a pipline '|'
address=""The address to center the map, this will not set an marker but just center the map
address:center="" [OPTIONAL]multiple latitude longlitude, eg. addresses seperated with a pipline '|'
latlng=""The latlng to center the map, this will not set an marker but just center the map
address:center="" [OPTIONAL]the zoom level.
zoom="15" [OPTIONAL]the max_zoom level.
max_zoom="" [OPTIONAL]set the markers.
values: yes no
For the options see http://reinos.nl/add-ons/gmaps/docs/markers
marker="yes" [OPTIONAL]enable clustering for the makers
values: yes no
marker:show_cluster="no" [OPTIONAL]change the cluster style
See: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html
marker:cluster_style:element_type="" [OPTIONAL]
marker:cluster_style:url="/themes/third_party/gmaps/images/cluster/conv40.png"width and height for the image
marker:cluster_style:size="40,36" [OPTIONAL]top, topLeft position of the text
marker:cluster_style:anchor="6,0" [OPTIONAL]The text size
marker:cluster_style:text_size="15" [OPTIONAL]Enable the elevation service.
e.g: you can add to the marker_html the following text to show the elevation for an address marker_html="[address] is on [elevation] meters"
show_elevation ="no" [OPTIONAL]is this a static map. (This will create a image of the map)
values: yes no
static="no" [OPTIONAL]{exp:gmaps:geolocation}Below are the Tag Parameters. Those parameters can be used in the tag described above.
set the markers.
values: yes no
More marker options, see http://reinos.nl/add-ons/gmaps/docs/markers
marker="yes" [OPTIONAL]{exp:gmaps:places
address="apeldoorn"
search_types="store"
}Below are the Tag Parameters. Those parameters can be used in the tag described above.
multiple addresses, eg. addresses seperated with a pipline '|'
address="" [REQUIRED] if latlng is emptymultiple latitude longlitude, eg. addresses seperated with a pipline '|'
latlng="" [REQUIRED] if address is emptythe zoom level.
zoom="15" [OPTIONAL]the max_zoom level.
max_zoom="" [OPTIONAL]the type of a places. Multiple seperated with a pipeline '|'
valid types are listed here
search_types="" [REQUIRED]keyword for a places.
search_keyword="" [OPTIONAL]set the radius in meters.
radius="1000" [OPTIONAL]Set the search type. (radar search goes up to 200 results)
Options: search radar_search
type="search" [OPTIONAL]{exp:gmaps:polygon
address="den-helder|zwolle|deventer|gorssel|arnhem|klarenbeek|apeldoorn"
}Below are the Tag Parameters. Those parameters can be used in the tag described above.
set the markers.
values: yes no
More marker options, see http://reinos.nl/add-ons/gmaps/docs/markers
marker="yes" [OPTIONAL]The address
address="" [REQUIRED] if latlng is emptyLat Lng points
latlng="" [REQUIRED] if address is emptya json string with Polygon. this should be surrounded by brackets, according the specification .
json="" [REQUIRED] if address or latlng is emptyset the stroke color.
stroke_color="#131540" [OPTIONAL]set the stroke opacity..
stroke_opacity="0.6" [OPTIONAL]Set the stroke weight
stroke_weight="6" [OPTIONAL]set the fill opacity.
fill_opacity="0.6" [OPTIONAL]set the fill color
stroke_weight="#131540" [OPTIONAL]is this a static map. Default to no. (This will create a image of the map)
values: yes no
static="no" [OPTIONAL]{exp:gmaps:polyline
address="den-helder|zwolle|deventer|gorssel|arnhem|klarenbeek|apeldoorn"
}Below are the Tag Parameters. Those parameters can be used in the tag described above.
set the markers.
values: yes no
More marker options, see http://reinos.nl/add-ons/gmaps/docs/markers
marker="yes" [OPTIONAL]The address
address="" [REQUIRED] if latlng is emptyLat Lng points
latlng="" [REQUIRED] if address is emptyset the stroke color.
stroke_color="#131540" [OPTIONAL]set the stroke opacity..
stroke_opacity="0.6" [OPTIONAL]Set the stroke weight
stroke_weight="6" [OPTIONAL]is this a static map. Default to no. (This will create a image of the map)
values: yes no
static="no" [OPTIONAL]Show the total lenght for a polyline (example)
EE_GMAPS.vars.polylineLenght{exp:gmaps:rectangle
address="apeldoorn|heerde"
}Below are the Tag Parameters. Those parameters can be used in the tag described above.
set the markers.
values: yes no
More marker options, see http://reinos.nl/add-ons/gmaps/docs/markers
marker="yes" [OPTIONAL]multiple addresses, eg. addresses seperated with a pipline '|' There must be 2 addresses before we can set an rectangle
address="" [REQUIRED] if latlng is emptymultiple latitude longlitude, eg. addresses seperated with a pipline '|' There must be 2 latlng points before we can set an rectangle
latlng="" [REQUIRED] if address is emptyset the stroke color.
stroke_color="#131540" [OPTIONAL]set the stroke opacity.
stroke_opacity="0.6" [OPTIONAL]set the stroke weight.
stroke_weight="6" [OPTIONAL]set the fill color.
fill_color="#131540" [OPTIONAL]set the fill opacity
fill_opacity="0.6" [OPTIONAL]{exp:gmaps:route
from_address="heerde"
to_address="apeldoorn"
stops_address="epe nederland|klarenbeek"
}Below are the Tag Parameters. Those parameters can be used in the tag described above.
A from address name, can also a name like 'reichenbach im vogtland or amsterdam or america'.
from_address="" [REQUIRED] if from_latlng is emptylatitude longitude coordinates
from_latlng="" [REQUIRED] if from_address is emptyA to address name, can also a name like 'reichenbach im vogtland or amsterdam or america'.
to_address="" [REQUIRED] if to_latlng is emptylatitude longitude coordinates
to_latlng="" [REQUIRED] if to_address is emptystops between the from and to point. addresses seperated with a pipline '|'
stops_address="" [OPTIONAL] if stops_latlng is emptystops between the from and to point. latitude longitude coordinates seperated with a pipline '|'
stops_latlng="" [OPTIONAL] if stops_address is emptyset the markers.
values: yes no
More options, see http://reinos.nl/add-ons/gmaps/docs/markers
marker="yes" [OPTIONAL]Show details for the route.
show_details="no" [OPTIONAL]add click event to zoom in on a step.
show_details_per_step="no" [OPTIONAL]customize the steps template for the details.
variables: [instructions] [distance] [duration].
Transit only: [arrival_stop] [arrival_time] [departure_stop] [departure_time] [headsign] [num_stops] [name] [vehicle_icon] [vehicle_name] [vehicle_type]
details_per_step_template="" [OPTIONAL]customize the info template for the details.
variable: [start_address] [end_address] [distance] [duration]
details_template="" [OPTIONAL]define the position of the details_template=""
values: top bottom
details_template_position="" [OPTIONAL]set the travel mode.
values: bicycling driving transit walking
travel_mode="driving" [OPTIONAL]set the stroke color.
stroke_color="#131540" [OPTIONAL]set the stroke opacity.
stroke_opacity="0.6" [OPTIONAL]set the stroke weight.
stroke_weight="6" [OPTIONAL]set the fill color.
fill_color="#131540" [OPTIONAL]Enable the elevation service.
This will show an Graph for the elevation on the route.
show_elevation="no" [OPTIONAL]{exp:gmaps:street_view_panorama
address="heerde"
}Below are the Tag Parameters. Those parameters can be used in the tag described above.
Set the address
address="" [REQUIRED] if latlng is emptySet the latlng
latlng="" [REQUIRED] if address is emptyShow address Control, showing on the screen
address_control="yes" [OPTIONAL]click_to_go
click_to_go="yes" [OPTIONAL]Disable double click event
disable_double_click_zoom="no" [OPTIONAL]Show image data control
image_date_control="yes" [OPTIONAL]Show links control
links_control="yes" [OPTIONAL]Position the Point of View: Set the heading
pov:heading="" [OPTIONAL]Position the Point of View: Set the pitch
pov:pitch="" [OPTIONAL]Position the Point of View: Set the zoom level
pov:zoom="15" [OPTIONAL]Set the radius (in meters) where data for that address can be found. This wil fix the issue with gray maps.
checkaround="50" [OPTIONAL]The Geocoder from Gmaps can also be used outside the area of the JS Maps. For example if you only need to geocode an address using Javascript, or in an other PHP app on your site.
domain.com/gmaps_api/address
domain.com/gmaps_api/latlng
domain.com/gmaps_api/ip
input
//set POST variables
$url = 'http://domain.com/gmaps_api/address';
$fields = array(
'input' => urlencode('apeldoorn')
);
//url-ify the data for the POST
$fields_string = '';
foreach($fields as $key=>$value) { $fields_string .= $key.'='.$value.'&'; }
rtrim($fields_string, '&');
//open connection
$ch = curl_init();
//set the url, number of POST vars, POST data
curl_setopt($ch,CURLOPT_URL, $url);
curl_setopt($ch,CURLOPT_POST, count($fields));
curl_setopt($ch,CURLOPT_POSTFIELDS, $fields_string);
//execute post
$result = curl_exec($ch);
print_r(json_decode($result));
//close connection
curl_close($ch);jQuery.post('domain.com/gmaps_api/address', {input:'amsterdam'}, function(result){
console.log(jQuery.parseJSON(result));
});{exp:gmaps:calculate_distance}Below are the Tag Parameters. Those parameters can be used in the tag described above.
The from address.
address_from="" [OPTIONAL]The to address.
address_to="" [OPTIONAL]The from latlng.
latlng_from="" [OPTIONAL]The to latlng.
latlng_to="" [OPTIONAL]direct route calculation or via highways.
direct="yes" [OPTIONAL]Below are the Tag Variables. Those Variables can be used in the tag described above
The KM.
{k}The meters.
{m}Below are the Tag Parameters. Those parameters can be used in the tag described above.
the div ID name.
Default is ee_gmap
div_id="" [OPTIONAL]the div CLASS name.
Default is ee_gmap
div_class ="" [OPTIONAL]the map type.
values: Hybrid Roadmap Satellite Terrain
map_type="hybrid" [OPTIONAL]Set the new or old Google Maps style. Default to yes
values: yes no
enable_new_style="yes" [OPTIONAL]set the map type which can be choosen by the user. values: osm stamentoner stamenwatercolor stamenterrain
(osm = OpenStreetMap)
map_types="hybrid|roadmap|satellite|terrain" [OPTIONAL]possible to scroll the map with the scrollwheel.
values: yes no
scroll_wheel="yes" [OPTIONAL]place the zoom control on the map.
values: yes no
zoom_control="yes" [OPTIONAL]Set the position for the control. https://developers.google.com/maps/documentation/javascript/controls?hl=nl#ControlPositioning
zoom_control_position="" [OPTIONAL]place the map type control on the map.
values: yes no
map_type_control="yes" [OPTIONAL]Set the position for the control. https://developers.google.com/maps/documentation/javascript/controls?hl=nl#ControlPositioning
map_type_control_position="" [OPTIONAL]Set the control type
map_type_control_style="" [OPTIONAL]place the scale control on the map.
values: yes no
scale_control="yes" [OPTIONAL]place the street view control on the map.
values: yes no
street_view_control="yes" [OPTIONAL]Set the position for the control.
https://developers.google.com/maps/documentation/javascript/controls?hl=nl#ControlPositioning
street_view_control_position="" [OPTIONAL]show the panoramio layer.
values: yes no
show_panoramio="no" [OPTIONAL]add a filter for the panoramio layer. e.g. panoramio_tag="sea" will filter only the pictures with a tag 'sea'.
panoramio_tag="" [OPTIONAL]the width of the map
width="400px" [OPTIONAL]the height of the map
height="400px" [OPTIONAL]when the map is wrapped in a div that is hidden and only is visible onclick, there is in some situation a problem that the maps is not loaded correctly.
With this param you can add an identifier (class or ID) so the plugin will show the maps correct.
hidden_div="" [OPTIONAL]set the language of the Google Maps.
language codes can be found here: https://spreadsheets.google.com/pub?key=p9pdwsai2hDMsLkXsoM05KQ&gid=1
lang="auto" [OPTIONAL]how long needs an address be cached. Time is in hour.
cache_time="168" [OPTIONAL]show the traffic layer.
values: yes no
show_traffic="no" [OPTIONAL]show the Transit layer.
values: yes no
show_transit="no" [OPTIONAL]show the Bicycling layer.
values: yes no
show_bicycling="no" [OPTIONAL]The parameters shown beneath can be used to change the style of the map. For more info see: https://developers.google.com/maps/documentation/javascript/styling
The name [featureType] refer to the name of the feature type. You can use the name default to change all features at once. Which element you want to change. e.g. geometry labels labels.icon etc... https://developers.google.com/maps/documentation/javascript/styling#map_features
map_style:[featureType]:element_type="" [OPTIONAL]change styles of the map with the above params. https://developers.google.com/maps/documentation/javascript/styling#stylers
map_style:[featureType]:hue="" [OPTIONAL]
map_style:[featureType]:lightness="" [OPTIONAL]
map_style:[featureType]:saturation="" [OPTIONAL]
map_style:[featureType]:inverse_lightness="" [OPTIONAL]
map_style:[featureType]:visibility="" [OPTIONAL]
map_style:[featureType]:color="" [OPTIONAL]
map_style:[featureType]:width="" [OPTIONAL]Snazzymap is also supported and is the easy way of creating nice maps https://snazzymaps.com/
map_style:snazzymap="" [OPTIONAL]Show a Google Maps iframe overlay
overlay:html="<p><b>Gmaps Overlay</b></p>This is a Google Like overlay<p><p>Just like the Iframe</p>" [OPTIONAL]Set the position of the overlay.
values: left right
overlay:position="right" [OPTIONAL]The api keys for the maps
google_maps_key="" [OPTIONAL]
bing_maps_key="" [OPTIONAL]
yahoo_maps_key="" [OPTIONAL]
cloudmade_maps_key="" [OPTIONAL]the format an address when it is displaying on the gmaps
variables: [streetNumber] [streetName] [city] [region] [country] [countryCode] [county] [zipCode]
address_format="" [OPTIONAL]Focus on the users current location
focus_current_location="no" [OPTIONAL]Below are the Tag Variables. Those Variables can be used in the tag described above
The map ID of the current map
{exp:gmaps:method_name}
{map_id}
{/exp:gmaps:method_name}Below are the Tag Parameters for the markers. Those parameters can be used in the tag like {exp:gmaps:gecoding} or in {exp:gmaps:polygon} for example.
set the markers.
Available in: Geocoding Geolocation Route Polygon Polyline Circle Rectangle
marker="yes" [OPTIONAL]enable the animation for the marker, this will drop your marker.
Available in: Geocoding Geolocation Route Polygon Polyline Circle Rectangle
marker:animation="no" [OPTIONAL]show the title for a marker or not.
Available in: Geocoding Geolocation Route Polygon Polyline Circle Rectangle
marker:show_title="yes" [OPTIONAL]set the title for the marker.
Available in: Geocoding Geolocation Route Polygon Polyline Circle Rectangle
marker:title="[location]" [OPTIONAL]set the label for the marker.
Available in: Geocoding Circle
marker:label="[location]" [OPTIONAL]set icon path for a the marker. For different icons by multiple address, use a pipeline (|) between the icon paths.
Available in: Geocoding Geolocation Route Polygon Polyline Circle Rectangle
marker:icon:url="" [OPTIONAL]set icon path for a the marker. For different icons by multiple address, use a pipeline (|) between the icon paths.
Available in: Geocoding Route
marker:icon_default:url="" [OPTIONAL]Set the size for an icon. For different size by multiple address, use a pipeline (|) between the sizes. Google documentation
Available in: Geocoding Geolocation Route Polygon Polyline Circle Rectangle
marker:icon:size="" [OPTIONAL]Set the size for an icon. For different size by multiple address, use a pipeline (|) between the sizes. Google documentation
Available in: Geocoding Route
marker:icon_default:size="" [OPTIONAL]set the origin for an icon. For different origins by multiple address, use a pipeline (|) between the origins. Google documentation
Available in: Geocoding Geolocation Route Polygon Polyline Circle Rectangle
marker:icon:origin="" [OPTIONAL]set the default origin for an icon. For different origins by multiple address, use a pipeline (|) between the origins. Google documentation
Available in: Geocoding Route
marker:icon_default:origin="" [OPTIONAL]set the anchor for an icon. For different anchors by multiple address, use a pipeline (|) between the anchors. Google documentation
Available in: Geocoding Geolocation Route Polygon Polyline Circle Rectangle
marker:icon:anchor="" [OPTIONAL]set the default anchor for an icon. For different anchors by multiple address, use a pipeline (|) between the anchors. Google documentation
Available in: Geocoding Route
marker:icon_default:anchor="" [OPTIONAL]set the shape coords for an icon. For different coords by multiple address, use a pipeline (|) between the coords. Google documentation
Available in: Geocoding Geolocation Route Polygon Polyline Circle Rectangle
marker:shape:coords="" [OPTIONAL]set the default shape coords for an icon. For different coords by multiple address, use a pipeline (|) between the coords. Google documentation
Available in: Geocoding Route
marker:shape_default:coords="" [OPTIONAL]set the shape type for an icon. For different types by multiple address, use a pipeline (|) between the types. defaults to type. Google documentation
Available in: Geocoding Geolocation Route Polygon Polyline Circle Rectangle
marker:shape:types="" [OPTIONAL]set the default shape type for an icon. For different types by multiple address, use a pipeline (|) between the types. defaults to type. Google documentation
Available in: Geocoding Route
marker:shape_default:types="" [OPTIONAL]the html for inside the infowindow that popups on click. For different content by multiple address, use a pipeline (|) between the content.
e.g: <h1>Yeah [location]</h1>
Variables : [location] [route_to_url] [route_from_url] [map_url]
Available in: Geocoding Geolocation Route Polygon Polyline Circle Rectangle
marker:html="" [OPTIONAL]the html for inside the infowindow that popups on click. This will set the html for every marker. Widht the marker:html you can set it per marker.
e.g: <h1>Yeah [location]</h1>
Variables : [location] [route_to_url] [route_from_url] [map_url]
Available in: Geocoding Geolocation Route Polygon Polyline Circle Rectangle
marker:html_default="" [OPTIONAL]a custom marker structure html, replacement for the whole infowindow html. For different content by multiple address, use a pipeline (|) between the content.
e.g: <div class='overlay'>this is the title of the window<div class='overlay_arrow above'></div></div>
Variables: [location] [route_to_url] [route_from_url] [map_url]
Available in: Geocoding Geolocation Route Circle
marker:custom_html="" [OPTIONAL]show the google marker even with the custom HTML
Available in: Geocoding Geolocation Route Circle
marker:custom_show_marker="no"set the marker vertical alignment.
values: top middle bottom
Available in: Geocoding Geolocation Route Circle
marker:custom_vertical_align="top" [OPTIONAL]set the marker horizontal alignment.
values: left center right
Available in: Geocoding Geolocation Route Circle
marker:custom_horizontal_align="center" [OPTIONAL]The content of the InfoBox. For different content by multiple markers, use a pipeline (|) between the content.
reference http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
Available in: Geocoding Geolocation Route Circle
marker:infobox:content="" [OPTIONAL]An object literal whose properties define specific CSS style values to be applied to the InfoBox. Style values defined here override those that may be defined in the boxClass style sheet. If this property is changed after the InfoBox has been created, all previously set styles (except those defined in the style sheet) are removed from the InfoBox before the new style values are applied.
Available in: Geocoding Geolocation Route Circle
marker:infobox:box_style="" [OPTIONAL]The name of the CSS class defining the styles for the InfoBox container.
Available in: Geocoding Geolocation Route Circle
marker:infobox:box_class="infoBox" [OPTIONAL]The CSS margin style value for the close box. The default is "2px" (a 2-pixel margin on all sides).
Available in: Geocoding Geolocation Route Circle
marker:infobox:close_box_margin="2px" [OPTIONAL]The URL of the image representing the close box.
Available in: Geocoding Geolocation Route Circle
marker:infobox:close_box_url="http://www.google.com/intl/en_us/mapfiles/close.gif" [OPTIONAL]The maximum width (in pixels) of the InfoBox. Set to 0 if no maximum.
Available in: Geocoding Geolocation Route Circle
marker:infobox:max_width="" [OPTIONAL]The CSS z-index style value for the InfoBox. Note: This value overrides a zIndex setting specified in the boxStyle property.
Available in: Geocoding Geolocation Route Circle
marker:infobox:z_index="" [OPTIONAL]Set the left position for the box, relative to its current location
Available in: Geocoding Geolocation Route Circle
marker:infobox:pixel_offset_left="0" [OPTIONAL]Set the top position for the box, relative to its current location
Available in: Geocoding Geolocation Route Circle
marker:infobox:pixel_offset_top="0" [OPTIONAL]when there is one marker on the screen, this param will open this infowindow by default.
values: yes no
Available in: Geocoding Geolocation Route Polygon Polyline Circle Rectangle
marker:open_by_default="yes" [OPTIONAL]To get the marker via the api, you have to enter the key for you marker. By default the keys are generated for you based on the address, number and latlng. To extend this with your own keys, you can use this param.
Use a pipeline (|) to set it per location, and/or use a color (:) to give a locations multiple keys
Available in: Geocoding
marker:keys="key1_for_the_first_marker:key2_for_the_first_marker|key1_for_the_second_marker:key2_for_the_second_marker"With the Javascript API, you are able to modify the data without any EE tags. You can add markers, cirlces etc but also you`re able to modify the Map style etc.
In the methods where you work with the markers, you have to enter a key that belongs to the marker. This key is the latlng or the address you entered
This will execute after the (all) Gmaps is fully loaded
EE_GMAPS.ready(function(){
//your logic code
});mapID : the ID of the map (eg ee_gmap_1)
EE_GMAPS.api('refresh', {
mapID : ''
});center: center the map to the bounds of the markers
EE_GMAPS.api('refreshAll', {
center: true
});mapID : the ID of the map (eg ee_gmap_1)
zoomLevel : zoom level between 0-14
EE_GMAPS.api('setZoom', {
mapID : '' ,
zoomLevel : ''
});mapID : the ID of the map (eg ee_gmap_1)
zoomLevel : zoom level 0-14
EE_GMAPS.api('fitZoom', {
mapID : '',
zoomLevel : ''
});mapID : the ID of the map (eg ee_gmap_1)
lat : the lng coordinate
lng: the lat coordinate
EE_GMAPS.api('center', {
mapID : '',
lat : '',
lng: ''
});mapID : the ID of the map (eg ee_gmap_1)
options : a options object (see https://hpneo.github.io/gmaps/documentation.html#GMaps-setContextMenu)
EE_GMAPS.api('contextMenu', {
mapID : '',
options : ''
});mapID : the ID of the map (eg ee_gmap_1)
EE_GMAPS.api('getMap', {
mapID : ''
});mapID : the ID of the map (eg ee_gmap_1)
options: a object with map options (see https://developers.google.com/maps/documentation/javascript/reference#MapOptions)
EE_GMAPS.api('updateMap', {
mapID : '',
options: ''
});mapID : the ID of the map (eg ee_gmap_1)
lat : latitude coordinate
lng : longitude coordinate
title : title of the marker
click : function that will be execute when a marker will be clicked
infowindow.content : the content of an infowindow, html markup is allowed
See more options here: https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions
EE_GMAPS.api('addMarker', {
mapID : '',
lat : '',
lng : '',
title : '',
click : function(e){},
infoWindow : {
content : ''
}
});mapID : the ID of the map (eg ee_gmap_1)
key : the key of the marker
EE_GMAPS.api('removeMarker', {
mapID : '',
key: ''
});mapID : the ID of the map (eg ee_gmap_1)
EE_GMAPS.api('removeMarkers', {
mapID : ''
});mapID : the ID of the map (eg ee_gmap_1)
key : the key of the marker
EE_GMAPS.api('hideMarker', {
mapID : '',
key: ''
});mapID : the ID of the map (eg ee_gmap_1)
EE_GMAPS.api('hideMarker', {
mapID : ''
});mapID : the ID of the map (eg ee_gmap_1)
key : the key of the marker
This method will show a marker which is removed or hided from the map.
EE_GMAPS.api('showMarker', {
mapID : '',
key: ''
});mapID : the ID of the map (eg ee_gmap_1)
This method will show a marker which is removed or hided from the map.
EE_GMAPS.api('showMarkers', {
mapID : ''
});mapID : the ID of the map (eg ee_gmap_1)
key : the ID of the marker
lat : latitude coordinate
lng : longitude coordinate
title : title of the marker
click : function that will be execute when a marker will be clicked
infowindow.content : the content of an infowindow, html markup is allowed
See more options here: https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions
EE_GMAPS.api('updateMarker', {
mapID : '',
key: '',
lat : '',
lng : '',
title : '',
click : function(e){},
infoWindow : {
content : ''
}
});mapID : the ID of the map (eg ee_gmap_1)
key: The marker key
EE_GMAPS.api('getMarker', {
mapID : '',
key: ''
});mapID : the ID of the map (eg ee_gmap_1)
EE_GMAPS.api('getMarkers', {
mapID : ''
});EE_GMAPS.api('getAllMarkers');mapID : the ID of the map (eg ee_gmap_1)
key : the key of the marker
EE_GMAPS.api('markerClick', {
mapID : '',
key : ''
});mapID : the ID of the map (eg ee_gmap_1)
key : the key of the marker
callback: the callback function
EE_GMAPS.api('markerClickCallback', {
mapID : '',
key : '',
callback: function(map){
//your logic
}
});mapID : the ID of the map (eg ee_gmap_1)
key : the key of the marker
EE_GMAPS.triggerEvent('infowindowClose', {
mapID : ''
key : ''
});mapID : the ID of the map (eg ee_gmap_1)
layerName : The name of a layer (eg transit traffic bicycling panoramio places)
EE_GMAPS.api('addLayer', {
mapID : ''
layerName : ''
});mapID : the ID of the map (eg ee_gmap_1)
layerName : The name of a layer (eg transit traffic bicycling panoramio places)
EE_GMAPS.api('removeLayer', {
mapID : ''
layerName : ''
});mapID : the ID of the map (eg ee_gmap_1)
lat: Lat coordinate
lng: lng coordinate
fillColor: the fill color
fillOpacity: the opacity of the fill
strokeColor: The stroke color
strokeWeight: Weight of the stroke
strokeOpacity: Stroke opacity
radius: Radius in meters,
EE_GMAPS.api('addCircle', {
mapID : '',
lat: '',
lng: '',
fillColor: '',
fillOpacity: '',
strokeColor: '',
strokeWeight: '',
strokeOpacity: '',
radius: ''
});mapID : the ID of the map (eg ee_gmap_1)
key: the key of the circle
EE_GMAPS.api('getCircle', {
mapID : '',
key: ''
});mapID : the ID of the map (eg ee_gmap_1)
key: the key of the circle
lat: Lat coordinate
lng: lng coordinate
fillColor: the fill color
fillOpacity: the opacity of the fill
strokeColor: The stroke color
strokeWeight: Weight of the stroke
strokeOpacity: Stroke opacity
radius: Radius in meters
EE_GMAPS.api('updateCircle', {
mapID : '',
key: '',
lat: '',
lng: '',
fillColor: '',
fillOpacity: '',
strokeColor: '',
strokeWeight: '',
strokeOpacity: '',
radius: ''
});mapID : the ID of the map (eg ee_gmap_1)
key: the key of the circle
EE_GMAPS.api('removeCircle', {
mapID : '',
key: ''
});mapID : the ID of the map (eg ee_gmap_1)
bounds: a bound of coordinates new google.maps.LatLngBounds()
fillColor: the fill color
fillOpacity: the opacity of the fill
strokeColor: The stroke color
strokeWeight: Weight of the stroke
strokeOpacity: Stroke opacity
EE_GMAPS.api('addRectangle', {
mapID : '',
bounds: '',
fillColor: '',
fillOpacity: '',
strokeColor: '',
strokeWeight: '',
strokeOpacity: '',
radius: ''
});mapID : the ID of the map (eg ee_gmap_1)
key: the key of the Rectangle
EE_GMAPS.api('getRectangle', {
mapID : '',
key: ''
});mapID : the ID of the map (eg ee_gmap_1)
key: the key of the Rectangle
bounds: a bound of coordinates new google.maps.LatLngBounds()
fillColor: the fill color
fillOpacity: the opacity of the fill
strokeColor: The stroke color
strokeWeight: Weight of the stroke
strokeOpacity: Stroke opacity
radius: Radius in meters
EE_GMAPS.api('updateRectangle', {
mapID : '',
key: '',
bounds: '',
fillColor: '',
fillOpacity: '',
strokeColor: '',
strokeWeight: '',
strokeOpacity: '',
radius: ''
});mapID : the ID of the map (eg ee_gmap_1)
key: the key of the Rectangle
EE_GMAPS.api('removeRectangle', {
mapID : '',
key: ''
});mapID : the ID of the map (eg ee_gmap_1)
path: array of latLng objects new google.maps.LatLng()
fillColor: the fill color
fillOpacity: the opacity of the fill
strokeColor: The stroke color
strokeWeight: Weight of the stroke
strokeOpacity: Stroke opacity
EE_GMAPS.api('addPolygon', {
mapID : '',
path: '',
fillColor: '',
fillOpacity: '',
strokeColor: '',
strokeWeight: '',
strokeOpacity: ''
});mapID : the ID of the map (eg ee_gmap_1)
key: the key of the Polygon
EE_GMAPS.api('getPolygon', {
mapID : '',
key: ''
});mapID : the ID of the map (eg ee_gmap_1)
key: the key of the Polygon
path: array of latLng objects new google.maps.LatLng()
fillColor: the fill color
fillOpacity: the opacity of the fill
strokeColor: The stroke color
strokeWeight: Weight of the stroke
strokeOpacity: Stroke opacity
EE_GMAPS.api('updatePolygon', {
mapID : '',
key: '',
path: '',
fillColor: '',
fillOpacity: '',
strokeColor: '',
strokeWeight: '',
strokeOpacity: ''
});mapID : the ID of the map (eg ee_gmap_1)
key: the key of the Polygon
EE_GMAPS.api('removePolygon', {
mapID : '',
key: ''
});mapID : the ID of the map (eg ee_gmap_1)
path: array of latLng objects new google.maps.LatLng()
strokeColor: The stroke color
strokeWeight: Weight of the stroke
strokeOpacity: Stroke opacity
EE_GMAPS.api('addPolyline', {
mapID : '',
path: '',
strokeColor: '',
strokeWeight: '',
strokeOpacity: ''
});mapID : the ID of the map (eg ee_gmap_1)
key: the key of the Polyline
EE_GMAPS.api('getPolyline', {
mapID : '',
key: ''
});mapID : the ID of the map (eg ee_gmap_1)
key: the key of the Polyline
path: array of latLng objects new google.maps.LatLng()
strokeColor: The stroke color
strokeWeight: Weight of the stroke
strokeOpacity: Stroke opacity
EE_GMAPS.api('updatePolyline', {
mapID : '',
key: '',
path: '',
fillColor: '',
fillOpacity: '',
strokeColor: '',
strokeWeight: '',
strokeOpacity: '',
radius: '',
lat: '',
lng: ''
});mapID : the ID of the map (eg ee_gmap_1)
key: the key of the Polyline
EE_GMAPS.api('removePolyline', {
mapID : '',
key: ''
});mapID : the ID of the map (eg ee_gmap_1)
overlay_html: The html markup
overlay_position: the position of the overlay left right
EE_GMAPS.api('addGoogleOverlay', {
mapID : '',
overlay_html: '',
overlay_position: ''
});mapID : the ID of the map (eg ee_gmap_1)
overlay_html: The html markup
overlay_position: the position of the overlay left right
EE_GMAPS.api('updateGoogleOverlay', {
mapID : '',
overlay_html: '',
overlay_position: ''
});mapID : the ID of the map (eg ee_gmap_1)
EE_GMAPS.api('removeGoogleOverlay', {
mapID : ''
});callback : a callback function
EE_GMAPS.api('removeGoogleOverlay', {
callback : function(position){}
});address : addres to geocode, multiple addresses seperated by a pipline '|'
latlng : latlng to reverse geocode, multiple latlngs seperated by a pipline '|'
ip : ip to geocode, multiple ips seperated by a pipline '|'
callback : function that will be triggered when the results are loaded
EE_GMAPS.triggerEvent('geocode', {
address: '',
latlng : '',
ip : '',
callback : function(result, type){}
});Special note about key
the key of the marker (can be the index number or address) You can also define the key in the address="key:address|key:address" or latlng="key:latlng|key:latlng"
To avoid problems with the parse order of ExpressionEngine, you can use the Tag Pair(s) for the address and latlng. The parse order problems are mostly causing by using other module tags in combination with the Gmap module.
{exp:gmaps:geocoding}
{address}[some module tag or address here]{/address}
{/exp:gmaps:geocoding}multiple addresses, eg. addresses seperated with a pipline '|'
{address}{/address}multiple latitude longlitude, eg. addresses seperated with a pipline '|'
{latlng}{/latlng}Add a marker outside the default gmaps tags
{exp:gmaps_data:radius}Below are the Tag Parameters. Those parameters can be used in the tag described above
Give the ID of map
map_id="1"The address
address=""The latlng
latlng=""Show the title or not
show_title="yes"Place it with a animation
animation="no"Fit the map when the marker has been placed
fit_map="no"The infowindow content html
marker_html=""{exp:gmaps:add_marker map:id="1" address="amsterdam holland" fit_map="yes"}In some cases it is possible that the Gmaps can`t find or run into trouble. In thoses cases you can use the tag pair below to output the errors or wrap a exception message in a no result if statement.
The tagpair below must bewrapped in a code block like:
{exp:gmaps:geocoding} ... {/exp:gmaps:geocoding}Below are the Tag Variables. Those Variables can be used in the tag described above
Output the errors.
{errors}
{error}
{/errors}No result statement.
{if no_results} No result message {/if}To avoid problems with the parse order of ExpressionEngine, you can use Tag Pair(s) like {address}{/address} inside the method(s). For example, when you are using stash you can use the code below
{exp:stash:set name="address"}
{exp:channel:entries channel="gmaps" dynamic="off"}
{address}|
{/exp:channel:entries}
{/exp:stash:set}
{exp:gmaps:init}
{exp:gmaps:geocoding
width="100%"
marker="yes"
}
{address}{exp:stash:get name="address"}{/address}
{/exp:gmaps:geocoding}{exp:gmaps:init}
{exp:gmaps:geocoding
width="100%"
height="700px"
}
{address}
{exp:query sql="SELECT count(*) as member_count, m_field_id_3 as country FROM exp_member_data WHERE m_field_id_3 != '' GROUP BY m_field_id_3 ORDER BY m_field_id_3 ASC"}{country}|{/exp:query}
{/address}
{/exp:gmaps:geocoding}By using the Tag pair this way, the code inside the {address}{/address} tag is always parsed before we parse the Gmaps tags.
All tags can be converted to use the tagpaired way of the tags.
Gmap partially hidden on print
Gmap in hidden div not initialised on displaying the div
Possible to use EE code within the plugin?
Trick to getting advanced conditionals (or any conditional) to work
Getting "Oops! Something went wrong" on your Gmaps? Use the key param http://docs.reinos.nl/gmaps/#key to provide a Key