Gmaps has been deprecated in favor of the Maps module. See https://addons.reinos.nl/maps
Always have trouble with the integration 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 aware of the Google Maps limits.
For the Gmaps modules there are a couple of modules/fieldtypes that extend the Gmaps with extra functionality
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/Examples can be found here
For every paid addon you need to validate your license in order to activate the module.
On a local environment, like *.dev *.local *.localhost *.test the license is valid for testing and building a new or existing sites.
For every other domain, you need to have a valid license.
Once installed, you will asked to enter your license key. When you entered a valid license you can hit the "Save license" button. This will start validating your license and will redirect you to addons.reinos.nl to login into your account. You can also register a new account in this process.
Once logged in, you are asked to use your current account or to login with another one.
Using the current logged in account, the server will check all info related to your license and once valid, it will redirect you back to your site where you see either a success message or an error message.
This module is using a license field to check if the license for the module is valid or not. On addons.reinos.nl you can check your license and add your valid domains.
In the Module CP you can enter then your license
When you enter a wrong license, the module will not work and it shows you an warning
Sometimes it happens that the license system says you have an invalid license. When this happens, make sure you have entered your domain url in your account, next to your license on addons.reinos.nl.
If this will not fix your license problem, please contact us on https://addons.reinos.nl/support
In order to use the Google Maps functionality, you need to create 2 API Keys. One for the server (curl) geocoding and for the client (browser) map.
Google Maps JavaScript API Google Maps Geocoding API api. Below are 2 examples
On the CP page you can modify a couple of things.
Gmaps will log important errors to the main Log.
Control all you cached addresses. Be careful with this cached data, delete it only when you have to (due the geocoding limits of Google).
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 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"Load the Google Maps library or not. Default to yes
load_google_maps_js="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: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}This is the main tag for all your mapping stuff
{exp:gmaps:map}Below are the Tag Parameters. Those parameters can be used in the tag described above.
Center the map based on an address
center:address=""Center the map based on an latlng
center:address=""the zoom level.
zoom="15" [OPTIONAL]the max zoom level.
zoom:max="8" [OPTIONAL]Fit the map on any sort of object
available options: markers routes rectangles polylines polygons circles
fit_map="markers" [OPTIONAL]enable clustering for the makers
values: yes no
show_marker_cluster="no" [OPTIONAL]Set the path to the images. There are 5 images and all have the same pattern eg: http://domain.com/images/cluster/m1.png ... m2.png ... m3.png ... m4.png ... m5.png The cluster determine the right size by himself, so the path to give is without size number and extension.
marker_cluster_image_path="http://domain.nl/themes/user/gmaps/images/cluser/m" [OPTIONAL]change the cluster style
See: https://github.com/googlemaps/js-marker-clusterer
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]the div CLASS name.
div_class="ee_gmap" [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. https://developers.google.com/maps/documentation/javascript/controls
map_type_control_style="DEFAULT|DROPDOWN_MENU|HORIZONTAL_BAR" [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]Using the gesture_handling option, you can control the panning and scrolling behavior of a map when viewed on a mobile device.
see for more info https://developers.google.com/maps/documentation/javascript/interaction
options: greedy cooperative none auto
gesture_handling="auto" [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:map}
{map_id}
{/exp:gmaps:map}The add circle tag for use inside the {exp:gmaps:map} tag
{gmaps:add_circle}Below are the Tag Parameters. Those parameters can be used in the tag described above.
The address for the marker
address=""The latlng for the marker
latlng=""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]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 colon (:) to give a locations multiple keys
keys="key1_for_the_first_marker:key2_for_the_first_marker"The add Fusion Table tag for use inside the {exp:gmaps:map} tag
{gmaps:add_fusion_table}Below are the Tag Parameters. Those parameters can be used in the tag described above.
The map ID
id="yes" [REQUIRED]If true, the layer receives mouse events.
clickable="yes" [OPTIONAL]Suppress the rendering of info windows when layer features are clicked.
suppress_info_windows="no" [OPTIONAL]Show a heatmap based on the Table
heatmap="no" [OPTIONAL]The add KML tag for use inside the {exp:gmaps:map} tag
{gmaps:add_kml}Below are the Tag Parameters. Those parameters can be used in the tag described above.
The URL of the KML document to display.
url="yes" [REQUIRED]If true, the layer receives mouse events.
clickable="yes" [OPTIONAL]By default, the input map is centered and zoomed to the bounding box of the contents of the layer. If this option is set to yes, the viewport is left unchanged, unless the map's center and zoom were never set.
preserve_viewport="no" [OPTIONAL]Whether to render the screen overlays.
screen_overlays="yes" [OPTIONAL]Suppress the rendering of info windows when layer features are clicked.
suppress_info_windows="no" [OPTIONAL]The z-index of the layer.
z_index="yes" [OPTIONAL]The add marker tag for use inside the {exp:gmaps:map} tag
{gmaps:add_marker}Below are the Tag Parameters. Those parameters can be used in the tag described above.
The address for the marker
address=""The latlng for the marker
latlng=""Geocode also latlng coordinates to get the best result
reverse_geocode_latlng="no"enable the animation for the marker, this will drop your marker.
animation="no" [OPTIONAL]show the title for a marker or not.
show_title="yes" [OPTIONAL]set the title for the marker.
title="[location]" [OPTIONAL]set the label for the marker.
label="[location]" [OPTIONAL]Optimize an marker
optimized="yes" [OPTIONAL]set icon path for a the marker. For different icons by multiple address.
icon:url="" [OPTIONAL]Set the size for an icon. For different size by multiple address. Google documentation
icon:size="" [OPTIONAL]Set the scaled size for an icon. For different size by multiple address. Google documentation
icon:scaled_size="" [OPTIONAL]set the origin for an icon. For different origins by multiple address. Google documentation
marker:icon:origin="" [OPTIONAL]set the anchor for an icon. For different anchors by multiple address. Google documentation
icon:anchor="" [OPTIONAL]set the shape coords for an icon. For different coords by multiple address. Google documentation
marker:shape:coords="" [OPTIONAL]set the shape type for an icon. For different types by multiple address. defaults to type. Google documentation
shape:types="" [OPTIONAL]the html for inside the infowindow that popups on click. For different content by multiple address.
e.g: <h1>Yeah [location]</h1>
Variables : [location] [route_to_url] [route_from_url] [map_url] [elevation] [address] [street_name] [street_number] [city] [country] [country_code] [zipcode]
Note[elevation] is only accessible when you set the get_elevation="yes" param
Note using the latlng and omit the reverse_geocode_latlng param to set to yes, you wont get any geocoding vars
infowindow="" [OPTIONAL]Open the infowindow on hover
infowindow:open_on_hover="no" [OPTIONAL]The content of the InfoBox. For different content by multiple markers.
reference http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
Variables : [location] [route_to_url] [route_from_url] [map_url] [elevation] [address] [street_name] [street_number] [city] [country] [country_code] [zipcode]
Note[elevation] is only accessible when you set the get_elevation="yes" param
Note using the latlng and omit the reverse_geocode_latlng param to set to yes, you wont get any geocoding vars
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.
infobox:box_style="" [OPTIONAL]The name of the CSS class defining the styles for the InfoBox container.
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).
infobox:close_box_margin="2px" [OPTIONAL]The URL of the image representing the close box.
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.
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.
infobox:z_index="" [OPTIONAL]Set the left position for the box, relative to its current location
infobox:pixel_offset_left="0" [OPTIONAL]Set the top position for the box, relative to its current location
infobox:pixel_offset_top="0" [OPTIONAL]Open the infowindow by default
values: yes no
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 colon (:) to give a locations multiple keys
keys="key1_for_the_first_marker:key2_for_the_first_marker"Get the elevation so you can use the [elevation] variable in the infowindows (only availble with the gmaps_service module installed)
get_elevation="no"Fit the marker on the map, so all markers are shown. Mostly not used directly on the add_marker tag, instead use the fit_map param
fit_map="no"Reverse geocoding, so latlng coordinates are geocoded to get the best known location.
reverse_geocoding_latlng="no"The add route tag for use inside the {exp:gmaps:map} tag
only available when the gmaps_services module is installed
{gmaps:get_places}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'.
address=""latitude longitude coordinates
latlng=""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]Below are the Tag variables. (note the prefix places:)
The latitude
{places:lat}The longitude
{places:lng}The icon
{places:icon}The name
{places:name}The vicinity
{places:vicinity}The photos
{places:photos}
{places:height}
{places:width}
{places:url}
{/places:photos}The types
{places:types}
{name}
{/places:types}The add polygon tag for use inside the {exp:gmaps:map} tag
{gmaps:add_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.
The address for the marker. Because this param need 2 address to create the rectangle, use a pipline to seperate.
address=""The latlng for the marker. Because this param need 2 latlng to create the rectangle, use a pipline to seperate.
latlng=""a json string with Polygon. this should be surrounded by brackets, according the specification
json="[
[
[
[-105.00432014465332, 39.74732195489861],
[-105.00715255737305, 39.74620006835170],
[-105.00921249389647, 39.74468219277038],
[-105.01067161560059, 39.74362625960105],
[-105.01195907592773, 39.74290029616054],
[-105.00989913940431, 39.74078835902781],
[-105.00758171081543, 39.74059036160317],
[-105.00346183776855, 39.74059036160317],
[-105.00097274780272, 39.74059036160317],
[-105.00062942504881, 39.74072235994946],
[-105.00020027160645, 39.74191033368865],
[-105.00071525573731, 39.74276830198601],
[-105.00097274780272, 39.74369225589818],
[-105.00097274780272, 39.74461619742136],
[-105.00123023986816, 39.74534214278395],
[-105.00183105468751, 39.74613407445653],
[-105.00432014465332, 39.74732195489861]
],[
[-105.00361204147337, 39.74354376414072],
[-105.00301122665405, 39.74278480127163],
[-105.00221729278564, 39.74316428375108],
[-105.00283956527711, 39.74390674342741],
[-105.00361204147337, 39.74354376414072]
]
],[
[
[-105.00942707061768, 39.73989736613708],
[-105.00942707061768, 39.73910536278566],
[-105.00685214996338, 39.73923736397631],
[-105.00384807586671, 39.73910536278566],
[-105.00174522399902, 39.73903936209552],
[-105.00041484832764, 39.73910536278566],
[-105.00041484832764, 39.73979836621592],
[-105.00535011291504, 39.73986436617916],
[-105.00942707061768, 39.73989736613708]
]
]
]"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 opacity.
fill_opacity="0.6" [OPTIONAL]set the fill color
stroke_weight="#131540" [OPTIONAL]
#### keys
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 colon (:) to give a locations multiple keys
```javascript
keys="key1_for_the_first_marker:key2_for_the_first_marker"The add polyline tag for use inside the {exp:gmaps:map} tag
{gmaps:add_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.
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]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 colon (:) to give a locations multiple keys
keys="key1_for_the_first_marker:key2_for_the_first_marker"The add recatangle tag for use inside the {exp:gmaps:map} tag
{gmaps:add_rectangle}Below are the Tag Parameters. Those parameters can be used in the tag described above.
The address for the marker. Because this param need 2 address to create the rectangle, use a pipline to seperate.
address=""The latlng for the marker. Because this param need 2 latlng to create the rectangle, use a pipline to seperate.
latlng=""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]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 colon (:) to give a locations multiple keys
keys="key1_for_the_first_marker:key2_for_the_first_marker"The add route tag for use inside the {exp:gmaps:map} tag
{gmaps:add_route}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'.
address:from="" [REQUIRED] if latlng:from is emptylatitude longitude coordinates
latlng:from="" [REQUIRED] if address:from is emptyA to address name, can also a name like 'reichenbach im vogtland or amsterdam or america'.
address:to="" [REQUIRED] if latlng:to is emptylatitude longitude coordinates
latlng:to="" [REQUIRED] if address:to is emptystops between the from and to point. addresses seperated with a pipline '|'
address:stops="" [OPTIONAL] if latlng:stops is emptystops between the from and to point. latitude longitude coordinates seperated with a pipline '|'
latlng:stops="" [OPTIONAL] if address:stops is emptyset 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]set the function name of the callback
start_callback="callback_function_name" [OPTIONAL]and the function should look like
<script>
function callback_function_name(routeResult){
console.log(routeResult);
}
</script>set the function name of the callback
step_callback="callback_function_name" [OPTIONAL]and the function should look like
<script>
function callback_function_name(routeResult, totalSteps){
console.log(routeResult, totalSteps);
}
</script>set the function name of the callback
end_callback="callback_function_name" [OPTIONAL]and the function should look like
<script>
function callback_function_name(routeResult, totalSteps){
console.log(routeResult, totalSteps);
}
</script>{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}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)
center: center the map to the bounds of the markers
currentZoom: if center is set to true, this will use the current zoom, other wise it will zoom in to the bounds
zoomLevel: if center is set to true, the map will use this zoom level
EE_GMAPS.api('refresh', {
mapID : ''
});center: center the map to the bounds of the markers
currentZoom: if center is set to true, this will use the current zoom, other wise it will zoom in to the bounds
zoomLevel: if center is set to true, the map will use this zoom level
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
multiple: Get multiple markers with the same key
EE_GMAPS.api('getMarker', {
mapID : '',
key: '',
multiple: false
});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.api('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){}
});mapID : the ID of the map (eg ee_gmap_1)
key : the key of the polyline
EE_GMAPS.api('polylineLength', {
mapID : 'ee_gmaps_1',
key : 'your-key'
});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.api('geocode', {
address: '',
latlng : '',
ip : '',
callback : function(result, type){}
}});mapID : The id of the map
origin : origin coordinates
destination : destination coordinates
waypoints : array of waypoints coordinates
travelMode : the travelmode
strokeColor : color of the stroke
strokeOpacity : opacity of the stroke
strokeWeight : weight of the stroke
startCallback : function that will be triggered when loaded
stepCallback : function that will be triggered when the step is loaded
endCallback : function that will be triggered when the all is loaded
EE_GMAPS.api('addRoute', {
mapID : "ee_gmap_1",
origin : ["52.3909176","6.049638"],
destination : ["52.211157","5.9699231"],
waypoints : ["52.3450173,5.9836544","52.1802463,6.0419227"],
travelMode: "driving",
strokeColor: "#131540",
strokeOpacity: "0.6",
strokeWeight: "6",
startCallback: function(){},
stepCallback: function(){},
endCallback: function(){},
}});As third param you can specify a callback. this is for every method the same.
EE_GMAPS.api('addMarker', {
address: 'new york',
mapID: 'ee_gmaps_1'
}}, function(){
//this is the default callback function
});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:map} ... {/exp:gmaps:map}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}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
Use the icon:scaled_size="" and optimized="yes"
See https://stackoverflow.com/questions/27261346/custom-svg-markers-wont-display-in-ie-11 and https://stackoverflow.com/questions/20414387/google-maps-svg-marker-doesnt-display-on-ie-11
*Note: you need to add your license key and license email from addons.reinos.nl in order to validate your license and add a valid domain url in your license field on addons.reinos.nl/profile/licenses or the module will not work on a live site. Also make sure you have read the license section in the documentation
unserialize() errorSubLocality Localitygmaps_datamarker:icon to the marker:collection [EE2]getMarker JS API methodreverse_geocoding_latlng option to the markers. Default is noreverse_geocode_latlng="no" param to enable reverse geocoding on latlng coordinates for the {gmaps:marker} tagstreetNumber streetName city region country countryCode county zipCode to the infobox:content="" and infowindow=""fit_map="routes" was not always workingfit_map on add_marker tagrefreshAll and refresh JS method was not refreshing the streetview mapsgesture_handling="" https://developers.google.com/maps/documentation/javascript/interaction{map_id} is not parsed with the {exp:gmaps:map} tag{gmaps:fit_map} is not parsing in the Gmaps_fieldtypeload_google_maps_js="yes" to load or not load the Google Maps urltype was not added in the installer{exp:gmaps:fusion_table} {exp:gmaps:kml_geo}, {exp:gmaps:places}, {exp:gmaps:circle}, {exp:gmaps:geolocation}, {exp:gmaps:empty_map}, {exp:gmaps:geocoding}, {exp:gmaps:polygon}, {exp:gmaps:polyline}, {exp:gmaps:rectangle}, {exp:gmaps:route} [EE3]{exp:gmaps:map} method to create a basic map [EE3]{gmaps:add_marker}, {gmaps:add_route}, {gmaps:add_circle}, {gmaps:add_rectangle}, {gmaps:add_polygon}, {gmaps:add_polyline}, {gmaps:add_kml}, {gmaps:add_fusion_table}, {gmaps:fetch_places} for use inside the {exp:gmaps:map} method [EE3]EE_GMAPS.vars.polylineLength to the API (see examples) [EE3]