Below are a couple of examples to quick start with the Gmaps module
In some cases, it is hard to parse the value out of a param, especially complex values.
For those situations you can use the tagpair, it will render and parse the inside values correctly.
{exp:gmaps:init}
{exp:gmaps:map}
{width}100%{/width}
{/exp:gmaps:map}{exp:gmaps:init catch_output_js="yes"}
{exp:gmaps:map
{gmaps:add_marker
address="new york"
}
}
{exp:gmaps:map
{gmaps:add_circle
address="new york"
radius="5000"
width="100%"
}
}
{!-- Output all the JS --}
{exp:gmaps:output_js}{exp:gmaps:init}
{exp:gmaps:map
center:address="amsterdam"
}
{gmaps:add_circle
address="amsterdam"
radius="5000"
width="100%"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
map_types="roadmap|terrain"
map_type="terrain"
width="100%"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
center:address="holland"
zoom="2"
width="100%"
}
{gmaps:add_fusion_table
id="1y5MoNasX8X313VK3kTwm-6Uj4z3KqeTyDZNHFE4"
fields:REGION:where="=Europe|=Africa|=Asia|=Americas|=Pacific|=Middle East"
fields:REGION:fill_color="#00FF00|#000000|#d8ff00|#a50400|#ff0000|#795fff"
fields:REGION:fill_opacity="0.5|0.7|0.5|0.7|0.8|0.9"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
center:address="Europa"
zoom="1"
width="100%"
}
{gmaps:add_fusion_table id="1zjr_1RGtHHwaOkN8K4k5o6NwRyJDiTPOCC8Z6Q"}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
center:address="brasil"
zoom="1"
width="100%"
}
{gmaps:add_fusion_table
id="1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ"
heatmap="yes"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
center:address="Australia"
zoom="3"
width="100%"
}
{gmaps:add_fusion_table
id="1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ"
fields:default:fill_color="#00FF00"
fields:default:fill_opacity="0.2"
fields:birds:where=">300"
fields:birds:fill_opacity="0.5"
fields:population:where="> 5"
fields:population:fill_opacity="0.9"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
center:address="Australia"
zoom="3"
width="100%"
}
{gmaps:add_fusion_table id="1zjr_1RGtHHwaOkN8K4k5o6NwRyJDiTPOCC8Z6Q"}
{/exp:gmaps:map}{exp:gmaps:geocoder
ip="CURRENT_IP"
}
{result}
<ul>
<li><b>latitude :</b> {latitude}</li>
<li><b>longitude :</b> {longitude}</li>
<li><b>bounds :</b>
<ul>
{bounds}
<li><b>south :</b> {south}</li>
<li><b>west :</b> {west}</li>
<li><b>north :</b> {north}</li>
<li><b>east :</b> {east}</li>
{/bounds}
</ul>
</li>
<li><b>street_name :</b> {street_name}</li>
<li><b>street_number :</b> {street_number}</li>
<li><b>city :</b> {city}</li>
<li><b>zipcode :</b> {zipcode}</li>
<li><b>city_district :</b> {city_district}</li>
<li><b>country :</b> {country}</li>
<li><b>country_code :</b> {country_code}</li>
<li><b>timezone :</b> {timezone}</li>
</ul>
{/result}
{/exp:gmaps:geocoder}{exp:gmaps:geocoder
address="14525 SW Millikan Way, Beaverton, Washington, Oregon 97005, Verenigde Staten"
}
{result}
<ul>
<li><b>latitude :</b> {latitude}</li>
<li><b>longitude :</b> {longitude}</li>
<li><b>bounds :</b>
<ul>
{bounds}
<li><b>south :</b> {south}</li>
<li><b>west :</b> {west}</li>
<li><b>north :</b> {north}</li>
<li><b>east :</b> {east}</li>
{/bounds}
</ul>
</li>
<li><b>street_name :</b> {street_name}</li>
<li><b>street_number :</b> {street_number}</li>
<li><b>city :</b> {city}</li>
<li><b>zipcode :</b> {zipcode}</li>
<li><b>city_district :</b> {city_district}</li>
<li><b>country :</b> {country}</li>
<li><b>country_code :</b> {country_code}</li>
<li><b>timezone :</b> {timezone}</li>
</ul>
{/result}
{/exp:gmaps:geocoder}{exp:gmaps:init}
{exp:gmaps:map
focus_current_location="yes"
}{exp:stash:set name="address"}
{exp:channel:entries channel="gmaps" dynamic="off"}
{address}|
{/exp:channel:entries}
{/exp:stash:set}
{exp:gmaps:init}
{exp:gmaps:map
width="100%"
}
{gmaps:add_marker
address='{exp:stash:get name="address"}'
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
width="100%"
overlay:html="<p><b>Gmaps Overlay</b></p>This is a Google Like overlay<p><p>Just like the Iframe</p>"
street_view_control_position="right_center"
zoom_control_style="small"
zoom_control_position="right_center"
pan_control_position="right_center"
map_type_control_position="top_right"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
center:address="europa"
width="100%"
}
<script>
$(function(){
EE_GMAPS.api('geocode', {
address : 'heerde|apeldoorn|amsterdam',
callback : function(result, type){
result = $.parseJSON(result);
$.each(result, function(k,v){
EE_GMAPS.triggerEvent('addMarker', {
mapID : 'ee_gmap_1',
lat: v.latitude,
lng: v.longitude,
title: v.city
});
EE_GMAPS.api('addCircle', {
mapID : 'ee_gmap_1',
lat: v.latitude,
lng: v.longitude,
fillColor : '#BBD8E9',
fillOpacity : 0.3,
radius : 7000,
strokeColor : '#BBD8E9',
strokeOpacity : 0.9,
strokeWeight : 2,
zIndex : 1
});
});
EE_GMAPS.api('geocode', {
address : 'utrecht|hardewijk gelderland',
callback : function(result, type){
result = $.parseJSON(result);
EE_GMAPS.triggerEvent('addRectangle', {
mapID : 'ee_gmap_1',
bounds : [[result[0].latitude,result[0].longitude],[result[1].latitude,result[1].longitude]],
fillColor : '#BBD8E9',
fillOpacity : 0.3,
strokeColor : '#BBD8E9',
strokeOpacity : 0.8,
strokeWeight : 2,
zIndex : 1
});
}
});
EE_GMAPS.api('fitZoom', {
mapID : 'ee_gmap_1',
zoomLevel : 9
});
}
});
});
</script><form>
<input name="address"/>
<input type="submit">
</form>
{exp:gmaps:init}
{exp:gmaps:api
center:address="heerde"
width="100%"
}
<script>
$(function(){
$('form').submit(function(){
//geocode address
EE_GMAPS.api('geocode', {
address : $('input[name="address"]').val(),
callback : function(result, type){
//remove old markers
EE_GMAPS.api('removeMarkers', {
mapID : 'ee_gmap_1'
});
//parse result
result = $.parseJSON(result);
//add marker
EE_GMAPS.api('addMarker', {
mapID : 'ee_gmap_1',
lat: result[0].latitude,
lng: result[0].longitude,
title: result[0].city
});
//Fit the map
EE_GMAPS.api('fitZoom', {
mapID : 'ee_gmap_1',
zoomLevel : 11
});
}
});
return false;
});
});
</script><p>
<input checked class="checkbox" type="checkbox" value="amsterdam"/> <strong>Amsterdam</strong>
<input checked class="checkbox" type="checkbox" value="rotterdam"/> <strong>Rotterdam</strong>
<input checked class="checkbox" type="checkbox" value="den-haag"/> <strong>Den-Haag</strong>
</p>
{exp:gmaps:init}
{exp:gmaps:map
width="100%"
}
{gmaps:add_marker
address="amsterdam"
keys="amsterdam"
}
{gmaps:add_marker
address="rotterdam"
keys="rotterdam"
}
{gmaps:add_marker
address="den-haag"
keys="den-haag"
}
{/exp:gmaps:map}
<script>
$(function(){
$('.checkbox').click(function(){
//show marker
if($(this).is(':checked')) {
EE_GMAPS.api('showMarker', {
mapID : 'ee_gmap_1',
key : $(this).val()
});
//hide
} else {
EE_GMAPS.api('hideMarker', {
mapID : 'ee_gmap_1',
key : $(this).val()
});
}
});
});
</script>{exp:gmaps:init}
{exp:gmaps:map
width="100%"
zoom="5"
center:address="new-york"
}
{gmaps:add_kml
url="http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
width="100%"
}
{gmaps:add_kml
url="http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
center:address="new-york"
width="100%"
show_bicycling="yes"
}{exp:gmaps:init}
{exp:gmaps:map
center:address="new-york"
width="100%"
show_traffic="yes"
zoom="10"
}{exp:gmaps:init}
{exp:gmaps:map
center:address="new-york"
width="100%"
show_transit="yes"
}{exp:gmaps:init}
{exp:gmaps:map
center:address="new-york"
width="100%"
street_view_control_position="left_bottom"
zoom_control_style="small"
zoom_control_position="center_right"
pan_control_position="bottom_center"
map_type_control_position="top_right"
}{exp:gmaps:init}
{exp:gmaps:map
map_types="roadmap|terrain|osm"
map_type="osm"
center:address="yew-york"
width="100%"
}{exp:gmaps:init}
{exp:gmaps:map
map_types="roadmap|terrain|stamentoner"
map_type="stamentoner"
width="100%"
}{exp:gmaps:init}
{exp:gmaps:map
map_types="roadmap|terrain|stamenwatercolor"
map_type="stamenwatercolor"
center:address="amsterdam"
width="100%"
}{exp:gmaps:init}
{exp:gmaps:map
width="100%"
center:address="amsterdam"
}
{gmaps:add_marker
address="amsterdam"
animation="yes"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
show_marker_cluster="yes"
width="100%"
center:address="netherlands"
zoom="12"
}
{gmaps:add_marker address="heerde"}
{gmaps:add_marker address="amsterdam"}
{gmaps:add_marker address="rotterdam"}
{gmaps:add_marker address="apeldoorn"}
{gmaps:add_marker address="zwolle"}
{gmaps:add_marker address="klarenbeek"}
{gmaps:add_marker address="voorst"}
{gmaps:add_marker address="den-helder"}
{gmaps:add_marker address="deventer"}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
width="100%"
center:address="new-york"
}
{gmaps:add_marker
address="new-york"
icon:url="http://reinos.nl/assets/uploads/images/gmaps_icon.png"
icon:size="61,60"
icon:origin="0,0"
icon:anchor="31,60"
shape:coord="35,18,37,19,38,20,39,21,39,22,40,23,46,24,48,25,49,26,50,27,50,28,50,29,51,30,51,31,51,32,51,33,50,34,50,35,50,36,49,37,48,38,46,39,39,40,37,41,30,42,30,43,30,44,30,45,30,46,30,47,30,48,30,49,30,50,30,51,30,52,30,53,30,54,30,55,30,56,30,57,29,57,29,56,29,55,29,54,29,53,29,52,29,51,29,50,29,49,29,48,29,47,29,46,29,45,29,44,29,43,29,42,20,41,12,40,11,39,10,38,10,37,9,36,9,35,9,34,9,33,10,32,10,31,11,30,12,29,13,28,14,27,14,26,14,25,14,24,15,23,15,22,16,21,17,20,19,19,30,18,35,18"
shape:type="poly"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
width="100%"
zoom="3"
}
{gmaps:add_marker
address="rotterdam"
icon:url="/themes/user/gmaps/images/icons/blue.png"
}
{gmaps:add_marker
address="amsterdam"
icon:url="/themes/user/gmaps/images/icons/yellow.png"
}
{gmaps:add_marker
address="New york"
icon:url="/themes/user/gmaps/images/icons/green.png"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
width="100%"
center:address="new york"
}
{gmaps:add_marker
address="new york"
infobox:content='<div style="border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;" class="test_class">Just a test</div>'
infobox:box_style:opacity="0.75"
infobox:box_style:width="280px"
infobox:box_class="another_class"
infobox:close_box_margin="10px 2px 2px 2px"
infobox:close_box_url="http://www.google.com/intl/en_us/mapfiles/close.gif"
infobox:max_width="0"
infobox:z_index="99999"
infobox:pixel_offset_left="0"
infobox:pixel_offset_top="0"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
width="100%"
center:address="new york"
}
{gmaps:add_marker
address="new york"
infowindow="Your text goes here, perhaps with url <a href='[map_url]'>that open in the same window</a> or <a target='_blank' href='[map_url]'>in a new window.</a>"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
width="100%"
center:address="new york"
}
{gmaps:add_marker
address="new york"
get_elevation="yes"
infowindow="[location] is on [elevation] meters"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
width="100%"
center:address="amsterdam"
}
{gmaps:add_marker
address="amsterdam"
infowindow="This is [location]"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
width="100%"
center:latlng="52.3702157,4.8951679"
}
{gmaps:add_marker
latlng="52.3702157,4.8951679"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
width="100%"
zoom="3"
}
{gmaps:add_marker
address="heerde"
infowindow="This is [location]"
}
{gmaps:add_marker
address="Amsterdam"
infowindow="This is [location]"
}
{gmaps:add_marker
address="New york"
infowindow="This is [location]"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
width="100%"
center:address="new york"
}
{gmaps:add_marker address="new-york"}
{/exp:gmaps:map}
{exp:gmaps:map
width="100%"
center:address="parijs"
}
{gmaps:add_marker address="Parijs"}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:street_view_panorama
latlng="42.3455,-71.0983"
width="100%"
}{exp:gmaps:init}
{exp:gmaps:map
width="100%"
fit_map="markers"
}
{gmaps:get_places address="apeldoorn"}
{gmaps:add_marker latlng="{places:lat},{places:lng}"}
{/gmaps:get_places}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
width="100%"
zoom="8"
center:address="holland"
}
{gmaps:add_polygon
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]
]
]
]"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
width="100%"
}
{gmaps:add_polygon
latlng="52.476513,6.059421|52.476232,6.059473|52.476462,6.059678|52.476026,6.057336|52.477334,6.056235|52.476208,6.053733|52.475268,6.053172|52.475309,6.052058|52.477298,6.041924|52.477081,6.037002|52.474966,6.030045|52.475575,6.027663|52.473766,6.0247|52.471841,6.017697|52.470786,6.015338|52.471639,6.0135|52.463689,5.99391|52.463725,5.992923|52.467098,5.988716|52.473053,5.980031|52.473147,5.977832|52.471958,5.968243|52.454329,5.925036|52.452308,5.910393|52.440109,5.879864|52.439187,5.875218|52.439573,5.869075|52.441626,5.860956|52.442539,5.855898|52.442786,5.847172|52.443532,5.843247|52.443215,5.842697|52.441633,5.834136|52.440749,5.832119|52.439176,5.830319|52.439306,5.829369|52.439745,5.828544|52.441768,5.827146|52.445726,5.825273|52.447676,5.825734|52.450786,5.827523|52.451199,5.828226|52.452516,5.827521|52.455906,5.822085|52.457743,5.816082|52.458182,5.815419|52.458194,5.815888|52.457823,5.816289|52.457464,5.815668|52.457894,5.815072|52.458089,5.813705|52.455317,5.808459|52.453879,5.808031|52.440739,5.796637|52.439874,5.796222|52.438438,5.794246|52.433652,5.785667|52.425075,5.768483|52.424634,5.768322|52.416215,5.749888|52.415493,5.74691|52.417194,5.728782|52.41707,5.724921|52.416364,5.720739|52.410971,5.704238|52.397476,5.659967|52.384701,5.631545|52.381416,5.625038|52.379274,5.622613|52.373323,5.618179|52.368953,5.611488|52.366484,5.608778|52.365883,5.607662|52.366613,5.606824|52.366481,5.604304|52.363608,5.589187|52.363257,5.584265|52.36376,5.5803|52.367781,5.563555|52.367511,5.563601|52.351417,5.539579|52.348774,5.537424|52.347059,5.53709|52.345045,5.537658|52.324534,5.548139|52.323226,5.549061|52.32322,5.549656|52.319975,5.551347|52.321325,5.550633|52.321347,5.550243|52.321273,5.54938|52.320447,5.548845|52.320197,5.547255|52.320587,5.549164|52.321348,5.549474|52.317961,5.549058|52.303082,5.541173|52.302257,5.540345|52.30319,5.535553|52.301453,5.534458|52.300539,5.532625|52.299007,5.532187|52.297036,5.530561|52.295332,5.524196|52.295344,5.522657|52.295715,5.521938|52.295367,5.521398|52.290458,5.51888|52.289985,5.520718|52.289702,5.52076|52.282868,5.517396|52.281581,5.517541|52.276126,5.519922|52.274763,5.512668|52.274182,5.511304|52.272801,5.509688|52.272299,5.508271|52.271441,5.502798|52.271682,5.496114|52.270177,5.48762|52.269179,5.484915|52.266253,5.480676|52.265077,5.4778|52.264088,5.472415|52.265313,5.471595|52.265269,5.470045|52.25704,5.473317|52.256846,5.47522|52.257861,5.480031|52.262708,5.489495|52.263161,5.493401|52.263637,5.494688|52.263779,5.498005|52.264431,5.500478|52.26471,5.506149|52.263892,5.512343|52.263433,5.530513|52.263692,5.531672|52.26512,5.532925|52.265494,5.532709|52.267241,5.53389|52.271941,5.538547|52.276739,5.541703|52.285134,5.546236|52.2858,5.54582|52.288151,5.547004|52.290611,5.548979|52.302561,5.555177|52.314014,5.563089|52.317684,5.567805|52.324809,5.5753|52.328086,5.580316|52.331796,5.589551|52.332938,5.595048|52.333803,5.594685|52.334568,5.595332|52.335702,5.597574|52.337268,5.599587|52.338232,5.601943|52.339371,5.603688|52.346315,5.612313|52.347034,5.612537|52.347848,5.613795|52.348881,5.613404|52.349892,5.614648|52.350859,5.615062|52.351631,5.617977|52.351925,5.618009|52.353315,5.620205|52.351814,5.623531|52.351185,5.623348|52.350763,5.624141|52.352413,5.626422|52.35404,5.629855|52.353675,5.630363|52.353202,5.63015|52.351705,5.63088|52.351933,5.632483|52.351521,5.635484|52.350107,5.638304|52.350515,5.639663|52.350331,5.639857|52.351313,5.6462|52.353337,5.652024|52.353694,5.653819|52.355485,5.666146|52.355691,5.676044|52.355872,5.676465|52.356273,5.676116|52.357236,5.677528|52.357384,5.678439|52.35818,5.691503|52.35781,5.694002|52.356325,5.697582|52.354632,5.703157|52.35452,5.706267|52.355943,5.711056|52.360241,5.719673|52.364289,5.733772|52.367533,5.741257|52.368582,5.746049|52.371965,5.756922|52.372232,5.758889|52.373272,5.762515|52.374588,5.770056|52.385512,5.790413|52.388967,5.795016|52.390843,5.795749|52.410335,5.80927|52.417721,5.817747|52.422904,5.824958|52.42464,5.826577|52.439466,5.831104|52.440637,5.832233|52.441331,5.833577|52.442919,5.841282|52.443045,5.843632|52.442255,5.857282|52.441458,5.861095|52.440118,5.865253|52.439184,5.870885|52.439028,5.874815|52.439413,5.878046|52.440177,5.880677|52.443661,5.889544|52.452293,5.910336|52.454403,5.925215|52.471905,5.968001|52.473214,5.978512|52.47309,5.979887|52.47248,5.981172|52.464047,5.992583|52.4637,5.993472|52.463826,5.994527|52.471494,6.013568|52.470809,6.015242|52.471383,6.016284|52.472802,6.020983|52.47172,6.021822|52.473713,6.025222|52.474609,6.029756|52.474908,6.029738|52.476986,6.036506|52.477319,6.041832|52.475382,6.051428|52.475253,6.053166|52.476276,6.05385|52.477334,6.056235|52.476049,6.057313|52.47624,6.059711|52.47655,6.059665"
stroke_color="red"
fill_opacity="0.3"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
width="100%"
center:address="holland"
zoom="7"
}
{gmaps:add_polygon
address="den-helder|zwolle|deventer|gorssel|arnhem|klarenbeek|apeldoorn"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
fit_map="polyline"
}
{gmaps:add_polyline
address="den-helder|zwolle|deventer|gorssel|arnhem|klarenbeek|apeldoorn"
keys="testKey"
}
{/exp:gmaps:map}
<script>
setTimeout(function(){
var pathLength = EE_GMAPS.api('polylineLength', {
key: 'testKey',
mapID: 'ee_gmap_1'
});
console.log(pathLength + ' meters';
}, 500);
</script>{exp:gmaps:init}
{exp:gmaps:map
width="100%"
center:address="holland"
zoom="8"
}
{gmaps:add_polyline
address="den-helder|zwolle|deventer|gorssel|arnhem|klarenbeek|apeldoorn"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
width="100%"
fit_map="rectangle"
}
{gmaps:add_rectangle
address="apeldoorn|heerde"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
width="100%"
fit_map="markers"
}
{gmaps:add_marker
reverse_geocoding_latlng="no"
latlng="52.6109572221503, 9.707013666629791"
}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
width="100%"
fit_map="route"
}
{gmaps:add_route
address:from="heerde"
address:to="apeldoorn"
address:stops="epe nederland|klarenbeek"
step_callback="steps"
}
{/exp:gmaps:map}
<ul id="steps"></ul>
<script>
function steps(e){
$('#steps').prepend('<li>'+e.instructions+'</li>');
}
</script>{exp:gmaps:init}
{exp:gmaps:map
width="100%"
fit_map="route"
}
{gmaps:add_route
address:from="heerde"
address:to="apeldoorn"
address:stops="epe nederland|klarenbeek"
}
{/exp:gmaps:map}With Snazzy you can add your own custom map to the Gmaps.
Snazzy works not great in the param, therefor we add it in a tagpair tag
{exp:gmaps:init}
{exp:gmaps:map
width="100%"
zoom="6"
}
{map_style:snazzymaps}
[
{
"elementType": "geometry",
"stylers": [
{
"hue": "#ff4400"
},
{
"saturation": -68
},
{
"lightness": -4
},
{
"gamma": 0.72
}
]
},
{
"featureType": "road",
"elementType": "labels.icon"
},
{
"featureType": "landscape.man_made",
"elementType": "geometry",
"stylers": [
{
"hue": "#0077ff"
},
{
"gamma": 3.1
}
]
},
{
"featureType": "water",
"stylers": [
{
"hue": "#00ccff"
},
{
"gamma": 0.44
},
{
"saturation": -33
}
]
},
{
"featureType": "poi.park",
"stylers": [
{
"hue": "#44ff00"
},
{
"saturation": -23
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"hue": "#007fff"
},
{
"gamma": 0.77
},
{
"saturation": 65
},
{
"lightness": 99
}
]
},
{
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [
{
"gamma": 0.11
},
{
"weight": 5.6
},
{
"saturation": 99
},
{
"hue": "#0091ff"
},
{
"lightness": -86
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"lightness": -48
},
{
"hue": "#ff5e00"
},
{
"gamma": 1.2
},
{
"saturation": -23
}
]
},
{
"featureType": "transit",
"elementType": "labels.text.stroke",
"stylers": [
{
"saturation": -64
},
{
"hue": "#ff9100"
},
{
"lightness": 16
},
{
"gamma": 0.47
},
{
"weight": 2.7
}
]
}
]
{/map_style:snazzymaps}
{/exp:gmaps:map}{exp:gmaps:init}
{exp:gmaps:map
width="100%"
zoom="6"
map_style:default:saturation="-80"
map_style:road.arterial:element_type="geometry"
map_style:road.arterial:hue="#00ffee"
map_style:road.arterial:saturation="50"
map_style:poi.business:element_type="labels"
map_style:poi.business:visibility="off"
}
{/exp:gmaps:map}