Gmaps (Google Maps)

Introduction

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.

The following features are supported

Gmaps Modules

For the Gmaps modules there are a couple of modules/fieldtypes that extend the Gmaps with extra functionality

Installation

Prerequisites

Make sure your system meets the minimum requirements:

Installation Instructions

Update instructions

Important notes

Examples

Examples can be found here

API Keys

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.

  1. Go to https://console.developers.google.com/projectcreate and create a new project
  2. Go to https://console.developers.google.com/apis/library and enable Google Maps JavaScript API Google Maps Geocoding API api.
  3. and create the 2 credentials (api keys) here https://console.developers.google.com/apis/credentials
  4. after that you can enter the API keys in the Gmaps CP.

Below are 2 examples

Client key

API Key client

Server key

API Key server

CP Overview

On the CP page you can modify a couple of things.

Settings

Logs

Gmaps will log important errors to the main Log.

Cache

Control all you cached addresses. Be careful with this cached data, delete it only when you have to (due the geocoding limits of Google).

Control panel overview

Init tag

his tag will ensure that all Javascript is loaded correctly. Just place this in the <head> of your page.

The tag

{exp:gmaps:init
   lang="en_US"
}

Tag Parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above

lang

the language code. e.g. en-US or nl-NL or nl-BE, Default to your current browser language

lang=""

load_jquery

Load the jquery library or not. Default to yes

load_jquery="yes"

load_google_maps_js

Load the Google Maps library or not. Default to yes

load_google_maps_js="yes"

catch_output_js

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"

Geocoder

{exp:gmaps:geocoder
   address="heerde"
}

Tag Parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

address

multiple addresses, eg. addresses seperated with a pipline '|'

address="" [REQUIRED] if latlng or ip is empty

latlng

multiple latitude longlitude, seperated with a pipline '|'

latlng="" [REQUIRED] if address or ip is empty

ip

multiple ips, seperated with a pipline '|' (Magic const: CURRENT_IP and SERVER_IP)

ip="" [REQUIRED] if address or latlng is empty

Variables

Below are the variable and accessible withing the {result}{/result} tag

Result tag pair

{result}
    {latitude}
{/result}

latitude

{latitude}

longitude

{longitude}

bounds

{bounds}
    {south}
    {west}
    {north}
    {east}
{/bounds}

street_name

{street_name}

street_number

{street_number}

city

{city}

zipcode

{zipcode}

city_district

{city_district}

country

{country}

country_code

{country_code}

timezone

{timezone}

Map

This is the main tag for all your mapping stuff

The tag

{exp:gmaps:map}

Tag parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

center:address

Center the map based on an address

center:address=""

center:latlng

Center the map based on an latlng

center:address=""

zoom

the zoom level.

zoom="15" [OPTIONAL]

zoom:max

the max zoom level.

zoom:max="8" [OPTIONAL]

fit_map

Fit the map on any sort of object

available options: markers routes rectangles polylines polygons circles

fit_map="markers" [OPTIONAL]

show_marker_cluster

enable clustering for the makers
values: yes no

show_marker_cluster="no" [OPTIONAL]

marker_cluster_image_path

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]

marker_cluster_style:url

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"

marker_cluster_style:size

width and height for the image

marker_cluster_style:size="40,36" [OPTIONAL]

marker_cluster_style:anchor

top, topLeft position of the text

marker_cluster_style:anchor="6,0" [OPTIONAL]

marker_cluster_style:text_size

The text size

marker_cluster_style:text_size="15" [OPTIONAL]

div_class

the div CLASS name.

div_class="ee_gmap" [OPTIONAL]

map_type

the map type.
values: Hybrid Roadmap Satellite Terrain

map_type="hybrid" [OPTIONAL]

enable_new_style

Set the new or old Google Maps style. Default to yes
values: yes no

enable_new_style="yes" [OPTIONAL]

map_types

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]

scroll_wheel

possible to scroll the map with the scrollwheel.
values: yes no

scroll_wheel="yes" [OPTIONAL]

zoom_control

place the zoom control on the map.
values: yes no

zoom_control="yes" [OPTIONAL]

zoom_control_position

Set the position for the control. https://developers.google.com/maps/documentation/javascript/controls?hl=nl#ControlPositioning

zoom_control_position="" [OPTIONAL]

map_type_control

place the map type control on the map.
values: yes no

map_type_control="yes" [OPTIONAL]

map_type_control_position

Set the position for the control. https://developers.google.com/maps/documentation/javascript/controls?hl=nl#ControlPositioning

map_type_control_position="" [OPTIONAL]

map_type_control_style

Set the control type. https://developers.google.com/maps/documentation/javascript/controls

map_type_control_style="DEFAULT|DROPDOWN_MENU|HORIZONTAL_BAR" [OPTIONAL]

scale_control

place the scale control on the map.
values: yes no

scale_control="yes" [OPTIONAL]

street_view_control

place the street view control on the map.
values: yes no

street_view_control="yes" [OPTIONAL]

street_view_control_position

Set the position for the control.
https://developers.google.com/maps/documentation/javascript/controls?hl=nl#ControlPositioning

street_view_control_position="" [OPTIONAL]

show_panoramio

show the panoramio layer.
values: yes no

show_panoramio="no" [OPTIONAL]

panoramio_tag

add a filter for the panoramio layer. e.g. panoramio_tag="sea" will filter only the pictures with a tag 'sea'.

panoramio_tag="" [OPTIONAL]

width

the width of the map

width="400px" [OPTIONAL]

height

the height of the map

height="400px" [OPTIONAL]

hidden_div

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]

lang

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]

cache_time

how long needs an address be cached. Time is in hour.

cache_time="168" [OPTIONAL]

show_traffic

show the traffic layer.
values: yes no

show_traffic="no" [OPTIONAL]

show_transit

show the Transit layer.
values: yes no

show_transit="no" [OPTIONAL]

show_bicycling

show the Bicycling layer.
values: yes no

show_bicycling="no" [OPTIONAL]

map_style

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]

map_style

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]

map_style:snazzymaps

Snazzymap is also supported and is the easy way of creating nice maps https://snazzymaps.com/

map_style:snazzymap="" [OPTIONAL]

overlay:html

Show a Google Maps iframe overlay
Overlay

overlay:html="<p><b>Gmaps Overlay</b></p>This is a Google Like overlay<p><p>Just like the Iframe</p>"  [OPTIONAL]

overlay:position

Set the position of the overlay.
values: left right

overlay:position="right" [OPTIONAL]

Api keys

The api keys for the maps

google_maps_key="" [OPTIONAL]
bing_maps_key="" [OPTIONAL]
yahoo_maps_key="" [OPTIONAL]
cloudmade_maps_key="" [OPTIONAL]

address_format

the format an address when it is displaying on the gmaps variables: [streetNumber] [streetName] [city] [region] [country] [countryCode] [county] [zipCode]

address_format="" [OPTIONAL]

focus_current_location

Focus on the users current location

focus_current_location="no" [OPTIONAL]

gesture_handling

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]

Tag Variable

Below are the Tag Variables. Those Variables can be used in the tag described above

map_id

The map ID of the current map

{exp:gmaps:map}
   {map_id}
{/exp:gmaps:map}

Map Circle

The add circle tag for use inside the {exp:gmaps:map} tag

The tag

{gmaps:add_circle}

Tag parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

address

The address for the marker

address=""

latlng

The latlng for the marker

latlng=""

stroke_color

set the stroke color.

stroke_color="#131540" [OPTIONAL]

stroke_opacity

set the stroke opacity.

stroke_opacity="0.6" [OPTIONAL]

stroke_weight

set the stroke weight.

stroke_weight="6" [OPTIONAL]

fill_color

set the fill color.

fill_color="#131540" [OPTIONAL]

fill_opacity

set the fill opacity.

fill_opacity="0.6" [OPTIONAL]

radius

set the radius in feet.

radius="1000" [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

keys="key1_for_the_first_marker:key2_for_the_first_marker"

Map Fusion table

The add Fusion Table tag for use inside the {exp:gmaps:map} tag

The tag

{gmaps:add_fusion_table}

Tag parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

id

The map ID

id="yes" [REQUIRED]

clickable

If true, the layer receives mouse events.

clickable="yes" [OPTIONAL]

suppress_info_windows

Suppress the rendering of info windows when layer features are clicked.

suppress_info_windows="no" [OPTIONAL]

heatmap

Show a heatmap based on the Table

heatmap="no" [OPTIONAL]

Map KML

The add KML tag for use inside the {exp:gmaps:map} tag

The tag

{gmaps:add_kml}

Tag parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

url

The URL of the KML document to display.

url="yes" [REQUIRED]

clickable

If true, the layer receives mouse events.

clickable="yes" [OPTIONAL]

preserve_viewport

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]

screen_overlays

Whether to render the screen overlays.

screen_overlays="yes" [OPTIONAL]

suppress_info_windows

Suppress the rendering of info windows when layer features are clicked.

suppress_info_windows="no" [OPTIONAL]

z_index

The z-index of the layer.

z_index="yes" [OPTIONAL]

Map Markers

The add marker tag for use inside the {exp:gmaps:map} tag

The tag

{gmaps:add_marker}

Tag parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

address

The address for the marker

address=""

latlng

The latlng for the marker

latlng=""

reverse_geocode_latlng

Geocode also latlng coordinates to get the best result

reverse_geocode_latlng="no"

animation

enable the animation for the marker, this will drop your marker.

animation="no" [OPTIONAL]

show_title

show the title for a marker or not.

show_title="yes" [OPTIONAL]

title

set the title for the marker.

title="[location]" [OPTIONAL]

label

set the label for the marker.

label="[location]" [OPTIONAL]

icon:url

set icon path for a the marker. For different icons by multiple address.

icon:url="" [OPTIONAL]

icon:size

Set the size for an icon. For different size by multiple address. Google documentation

icon:size="" [OPTIONAL]

icon:scaled_size

Set the scaled size for an icon. For different size by multiple address. Google documentation

icon:scaled_size="" [OPTIONAL]

icon:origin

set the origin for an icon. For different origins by multiple address. Google documentation

marker:icon:origin="" [OPTIONAL]

icon:anchor

set the anchor for an icon. For different anchors by multiple address. Google documentation

icon:anchor="" [OPTIONAL]

shape:coords

set the shape coords for an icon. For different coords by multiple address. Google documentation

marker:shape:coords="" [OPTIONAL]

shape:types

set the shape type for an icon. For different types by multiple address. defaults to type. Google documentation

shape:types="" [OPTIONAL]

infowindow

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]

infowindow:open_on_hover

Open the infowindow on hover

infowindow:open_on_hover="no" [OPTIONAL]

infobox:content

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]

infobox:box_style

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]

infobox:box_class

The name of the CSS class defining the styles for the InfoBox container.

infobox:box_class="infoBox" [OPTIONAL]

infobox:close_box_margin

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]

infobox:close_box_url

The URL of the image representing the close box.

infobox:close_box_url="http://www.google.com/intl/en_us/mapfiles/close.gif" [OPTIONAL]

infobox:max_width

The maximum width (in pixels) of the InfoBox. Set to 0 if no maximum.

infobox:max_width="" [OPTIONAL]

infobox:z_index

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]

infobox:pixel_offset_left

Set the left position for the box, relative to its current location

infobox:pixel_offset_left="0" [OPTIONAL]

infobox:pixel_offset_top

Set the top position for the box, relative to its current location

infobox:pixel_offset_top="0" [OPTIONAL]

open_by_default

Open the infowindow by default
values: yes no

open_by_default="yes" [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

keys="key1_for_the_first_marker:key2_for_the_first_marker"

get_elevation

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_map

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_latlng

Reverse geocoding, so latlng coordinates are geocoded to get the best known location.

reverse_geocoding_latlng="no"

Map places

The add route tag for use inside the {exp:gmaps:map} tag

only available when the gmaps_services module is installed

The tag

{gmaps:get_places}

Tag parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

address

A from address name, can also a name like 'reichenbach im vogtland or amsterdam or america'.

address=""

latlng

latitude longitude coordinates

latlng=""

search_types

the type of a places. Multiple seperated with a pipeline '|'

valid types are listed here

search_types="" [REQUIRED]

search_keyword

keyword for a places.

search_keyword="" [OPTIONAL]

radius

set the radius in meters.

radius="1000" [OPTIONAL]

type

Set the search type. (radar search goes up to 200 results)

Options: search radar_search

type="search" [OPTIONAL]

Tag variables

Below are the Tag variables. (note the prefix places:)

lat

The latitude

{places:lat}

lng

The longitude

{places:lng}

icon

The icon

{places:icon}

name

The name

{places:name}

vicinity

The vicinity

{places:vicinity}

photos

The photos

{places:photos}
    {places:height}
    {places:width}
    {places:url}
{/places:photos}

types

The types

{places:types}
    {name}
{/places:types}

Map Polygon

The add polygon tag for use inside the {exp:gmaps:map} tag

The tag

{gmaps:add_polygon
   address="den-helder|zwolle|deventer|gorssel|arnhem|klarenbeek|apeldoorn"
}

Tag parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

address

The address for the marker. Because this param need 2 address to create the rectangle, use a pipline to seperate.

address=""

latlng

The latlng for the marker. Because this param need 2 latlng to create the rectangle, use a pipline to seperate.

latlng=""

json

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

stroke_color

set the stroke color.

stroke_color="#131540" [OPTIONAL]

stroke_opacity

set the stroke opacity..

stroke_opacity="0.6" [OPTIONAL]

stroke_weight

Set the stroke weight

stroke_weight="6" [OPTIONAL]

fill_opacity

set the fill opacity.

fill_opacity="0.6" [OPTIONAL]

fill_color

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"

Map polyline

The add polyline tag for use inside the {exp:gmaps:map} tag

The tag

{gmaps:add_polyline
   address="den-helder|zwolle|deventer|gorssel|arnhem|klarenbeek|apeldoorn"
}

Tag parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

address

The address

address="" [REQUIRED] if latlng is empty

latlng

Lat Lng points

latlng="" [REQUIRED] if address is empty

stroke_color

set the stroke color.

stroke_color="#131540" [OPTIONAL]

stroke_opacity

set the stroke opacity..

stroke_opacity="0.6" [OPTIONAL]

stroke_weight

Set the stroke weight

stroke_weight="6" [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

keys="key1_for_the_first_marker:key2_for_the_first_marker"

Map Rectangle

The add recatangle tag for use inside the {exp:gmaps:map} tag

The tag

{gmaps:add_rectangle}

Tag parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

address

The address for the marker. Because this param need 2 address to create the rectangle, use a pipline to seperate.

address=""

latlng

The latlng for the marker. Because this param need 2 latlng to create the rectangle, use a pipline to seperate.

latlng=""

stroke_color

set the stroke color.

stroke_color="#131540" [OPTIONAL]

stroke_opacity

set the stroke opacity.

stroke_opacity="0.6" [OPTIONAL]

stroke_weight

set the stroke weight.

stroke_weight="6" [OPTIONAL]

fill_color

set the fill color.

fill_color="#131540" [OPTIONAL]

fill_opacity

set the fill opacity

fill_opacity="0.6" [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

keys="key1_for_the_first_marker:key2_for_the_first_marker"

Map Route

The add route tag for use inside the {exp:gmaps:map} tag

The tag

{gmaps:add_route}

Tag parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

address:from

A from address name, can also a name like 'reichenbach im vogtland or amsterdam or america'.

address:from="" [REQUIRED] if latlng:from is empty

latlng:from

latitude longitude coordinates

latlng:from="" [REQUIRED] if address:from is empty

address:to

A to address name, can also a name like 'reichenbach im vogtland or amsterdam or america'.

address:to="" [REQUIRED] if latlng:to is empty

latlng:to

latitude longitude coordinates

latlng:to="" [REQUIRED] if address:to is empty

address:stops

stops between the from and to point. addresses seperated with a pipline '|'

address:stops="" [OPTIONAL] if latlng:stops is empty

latlng:stops

stops between the from and to point. latitude longitude coordinates seperated with a pipline '|'

latlng:stops="" [OPTIONAL] if address:stops is empty

travel_mode

set the travel mode.
values: bicycling driving transit walking

travel_mode="driving" [OPTIONAL]

stroke_color

set the stroke color.

stroke_color="#131540" [OPTIONAL]

stroke_opacity

set the stroke opacity.

stroke_opacity="0.6" [OPTIONAL]

stroke_weight

set the stroke weight.

stroke_weight="6" [OPTIONAL]

fill_color

set the fill color.

fill_color="#131540" [OPTIONAL]

start_callback

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>

step_callback

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>

end_callback

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>

Street View Panorama

{exp:gmaps:street_view_panorama
   address="heerde"
}

Tag Parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

address

Set the address

address="" [REQUIRED] if latlng is empty

latlng

Set the latlng

latlng="" [REQUIRED] if address is empty

address_control

Show address Control, showing on the screen

address_control="yes" [OPTIONAL]

click_to_go

click_to_go

click_to_go="yes" [OPTIONAL]

disable_double_click_zoom

Disable double click event

disable_double_click_zoom="no" [OPTIONAL]

image_date_control

Show image data control

image_date_control="yes" [OPTIONAL]

Show links control

links_control="yes" [OPTIONAL]

pov:heading

Position the Point of View: Set the heading

pov:heading="" [OPTIONAL]

pov:pitch

Position the Point of View: Set the pitch

pov:pitch="" [OPTIONAL]

pov:zoom

Position the Point of View: Set the zoom level

pov:zoom="15" [OPTIONAL]

checkaround

Set the radius (in meters) where data for that address can be found. This wil fix the issue with gray maps.

checkaround="50" [OPTIONAL]

Geocoder API

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.

API Methods

Address

domain.com/gmaps_api/address

LatLng

domain.com/gmaps_api/latlng

IP

domain.com/gmaps_api/ip

Post value

input

Example PHP

//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);

Examle Javascript (jQuery)

jQuery.post('domain.com/gmaps_api/address', {input:'amsterdam'}, function(result){
   console.log(jQuery.parseJSON(result));
});

Calculate Distance

{exp:gmaps:calculate_distance}

Tag Parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

address_from

The from address.

address_from="" [OPTIONAL]

address_to

The to address.

address_to="" [OPTIONAL]

latlng_from

The from latlng.

latlng_from="" [OPTIONAL]

latlng_to

The to latlng.

latlng_to="" [OPTIONAL]

direct

direct route calculation or via highways.

direct="yes" [OPTIONAL]

Tag Variable

Below are the Tag Variables. Those Variables can be used in the tag described above

k

The KM.

{k}

m

The meters.

{m}

Javascript API

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

Gmaps ready function

This will execute after the (all) Gmaps is fully loaded

EE_GMAPS.ready(function(){
//your logic code
});

Refresh the map

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 : ''
});

Refresh all map(s) at once

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
});

Set the zoom level of the map

mapID : the ID of the map (eg ee_gmap_1)
zoomLevel : zoom level between 0-14

EE_GMAPS.api('setZoom', {
  mapID : '' , 
  zoomLevel : ''
});

Zoom and fit the map

mapID : the ID of the map (eg ee_gmap_1)
zoomLevel : zoom level 0-14

EE_GMAPS.api('fitZoom', {
  mapID : '', 
  zoomLevel : '' 
});

Center the map based on coordinates

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: '' 
});

Add a context menu to the map

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 : ''
});

Get a map

mapID : the ID of the map (eg ee_gmap_1)

EE_GMAPS.api('getMap', {
  mapID : ''
});

Update a map

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: ''
});

Add a new marker to a map

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 : ''
  }
});

Remove Marker

mapID : the ID of the map (eg ee_gmap_1)
key : the key of the marker

EE_GMAPS.api('removeMarker', {
  mapID : '',
  key: ''
});

Remove all Marker

mapID : the ID of the map (eg ee_gmap_1)

EE_GMAPS.api('removeMarkers', {
  mapID : ''
});

Hide Marker

mapID : the ID of the map (eg ee_gmap_1)
key : the key of the marker

EE_GMAPS.api('hideMarker', {
  mapID : '',
  key: ''
});

Hide All Markers

mapID : the ID of the map (eg ee_gmap_1)

EE_GMAPS.api('hideMarker', {
  mapID : ''
});

Show Marker

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: ''
});

Show All Marker

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 : ''
});

Update a marker

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 : ''
  }
});

Get a marker

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
});

Get all the markers for a specific map

mapID : the ID of the map (eg ee_gmap_1)

EE_GMAPS.api('getMarkers', {
  mapID : ''
});

Get all map markers

EE_GMAPS.api('getAllMarkers');

Trigger an onClick event on a marker

mapID : the ID of the map (eg ee_gmap_1)
key : the key of the marker

EE_GMAPS.api('markerClick', {
  mapID : '', 
  key : '' 
});

Callback when a marker is clicked

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 
  }
});

Trigger an onClose event on an infoWindow

mapID : the ID of the map (eg ee_gmap_1)
key : the key of the marker

EE_GMAPS.api('infowindowClose', {
   mapID : ''
   key : ''
});

Add a layer

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 : ''
});

Remove a layer

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 : ''
});

Add a circle

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: ''
});

Get a circle

mapID : the ID of the map (eg ee_gmap_1)
key: the key of the circle

EE_GMAPS.api('getCircle', {
   mapID : '',
   key: ''
});

Update a circle

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: ''
});

Remove a circle

mapID : the ID of the map (eg ee_gmap_1)
key: the key of the circle

EE_GMAPS.api('removeCircle', {
   mapID : '',
   key: ''
});

Add a Rectangle

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: ''
});

Get a rectangle

mapID : the ID of the map (eg ee_gmap_1)
key: the key of the Rectangle

EE_GMAPS.api('getRectangle', {
   mapID : '',
   key: ''
});

Update a Rectangle

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: ''
});

Remove a Rectangle

mapID : the ID of the map (eg ee_gmap_1)
key: the key of the Rectangle

EE_GMAPS.api('removeRectangle', {
   mapID : '',
   key: ''
});

Add a Polygon

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: ''
});

Get a Polygon

mapID : the ID of the map (eg ee_gmap_1)
key: the key of the Polygon

EE_GMAPS.api('getPolygon', {
   mapID : '',
   key: ''
});

Update a Polygon

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: ''
});

Remove a Polygon

mapID : the ID of the map (eg ee_gmap_1)
key: the key of the Polygon

EE_GMAPS.api('removePolygon', {
   mapID : '',
   key: ''
});

Add a Polyline

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: ''
});

Get a Polyline

mapID : the ID of the map (eg ee_gmap_1)
key: the key of the Polyline

EE_GMAPS.api('getPolyline', {
   mapID : '',
   key: ''
});

Update a Polyline

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: ''
});

Remove a Polyline

mapID : the ID of the map (eg ee_gmap_1)
key: the key of the Polyline

EE_GMAPS.api('removePolyline', {
   mapID : '',
   key: ''
});

Add Google overlay popup

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: ''
});

Update Google overlay popup

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: ''
});

Remove Google overlay popup

mapID : the ID of the map (eg ee_gmap_1)

EE_GMAPS.api('removeGoogleOverlay', {
   mapID : ''
});

Geolocation

callback : a callback function

EE_GMAPS.api('removeGoogleOverlay', {
   callback : function(position){}
});

polylineLength

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'
});

Geocode (using the caching function of Gmaps)

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){} 
}});

addRoute (https://docs.reinos.nl/gmaps/#map-route)

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(){},
}});

Default callback

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

});

Errors and no_result

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}

Tag Variable

Below are the Tag Variables. Those Variables can be used in the tag described above

errors

Output the errors.

{errors} 
    {error} 
{/errors}

no_result

No result statement.

{if no_results} No result message {/if}

Tips

Gmap partially hidden on print

Gmap in hidden div not initialised on displaying the div

Route with Transit Mode

Possible to use EE code within the plugin?

Channel feed in the Gmap

Limit to Number of Addresses?

Trick to getting advanced conditionals (or any conditional) to work

Malformed map

Getting "Oops! Something went wrong" on your Gmaps? Use the key param http://docs.reinos.nl/gmaps/#key to provide a Key

Changelog

6.0.1 (00-00-2017)

Note: you need to add your license email from devot:ee in order to validate your license

6.0.0 (04-12-2017)

5.3.10 (01-11-2017)

5.3.9 (10-10-2017)

5.3.8 (23-08-2017)

5.3.7 (26-07-2017)

5.3.6 (02-06-2017)

5.3.5 (30-05-2017)

5.3.4 (05-05-2017)

5.3.3 (02-05-2017)

5.3.2 (24-04-2017)

5.3.1 (07-04-2017)

5.3.0 (27-03-2017)

5.2.6 (10-02-2017)

5.2.5 (25-01-2017)

5.2.4 (18-01-2017)

5.2.3 (15-01-2017)

5.2.2 (05-01-2017)

5.2.1 (06-12-2016)

5.2.0 (04-12-2016)

5.1.0 (23-11-2016)

5.0.3 (11-11-2016)

5.0.2 (30-10-2016)

5.0.1 (04-10-2016)

5.0.0 (02-10-2016)

4.3.3 (11-08-2016)

4.3.2 (01-08-2016)

4.3.1 (17-06-2016)

4.3.0 (15-06-2016)

4.2.8 (09-06-2016)

4.2.7 (08-06-2016)

4.2.6 (05-06-2016)

4.2.5 (06-05-2016)

4.2.4 (11-04-2016)

4.2.3

4.2.2

4.2.1

4.2.0

4.1.0

4.0.2

4.0.1

4.0.0

3.2.3

3.2.2

3.2.1

3.2.0

3.1.4

3.1.3

3.1.2

3.1.1

3.1

3.0.3

3.0.2

3.0.1

3.0

2.13.1

2.13

2.12.10

2.12.9

2.12.8

2.12.7

2.12.6

2.12.5

2.12.4

2.12.3

2.12.2

2.12.1

2.12

2.11

2.10.7

2.10.6

2.10.5

2.10.4

2.10.3

2.10.2

2.10.1

2.10

2.9.5

2.9.4

2.9.3

2.9.2

2.9.1

2.9

2.8.1

2.8.0

2.7.2

2.7.1

2.7.0

2.6.3

2.6.2

2.6.1

2.6

2.5.1

2.5

2.4

2.3.3

2.3.2

2.3.1

2.3

2.2

2.1.1

2.1

2.0.1

2.0 :

1.0.15

1.0.14

1.0.13

1.0.12

1.0.11

1.0.10

1.0.9

1.0.8

1.0.7

1.0.6

1.0.5

1.0.4

1.0.3

1.0.2

1.0.1

1.0