Learn how to add Google Maps to your site and how to customize the map and pins.
Google offers three great ways to embed their maps. The simple iframe solution, which you can find directly on Google Maps, their mighty Google Maps JavaScript API and their Google Static Maps API. All three are good, but the most elegant way is the JavaScript API.
Unfortunately this won't be available when visitors have JavaScript disabled of course. So the snippet we'll use here uses the JavaScript API to build nice and easy maps, but also falls back to the Google Static Maps whenever JavaScript is disabled.
You can find the code and docs for the snippet over at Github: https://github.com/bastianallgeier/kirbycms-extensions/tree/master/snippets/map.
All you need to do is to put the map.php
file into your snippets directory:
site/snippets/map.php
The new version of the Google Maps JavaScript API does not need an API key anymore so this is all you need to get going.
Using the snippet in your templates is mostly just one line of code:
<?php snippet('map', array('address' => 'Mannheim, Germany')) ?>
This will render a map for your address with a default size of 300x300 pixels. You can use anything as address, which you would use to search on Google Maps. Strings like "Timesquare, New York" entire street addresses or stuff like that.
You can easily customize the size and appearance of the map by using the following options:
<?php
// set your own width and height
snippet('map', array(
'address' => 'Mannheim, Germany',
'width' => 600,
'height' => 400
));
// set the zoom level (default is 15)
snippet('map', array(
'address' => 'Mannheim, Germany',
'zoom' => 17,
));
// set the map type (default is roadmap)
// you can set it to roadmap, satellite, hybrid or terrain
snippet('map', array(
'address' => 'Mannheim, Germany',
'type' => 'satellite',
));
?>
There are some more options to define your own map id and a custom class name. You can find more about it in the snippet docs: https://github.com/bastianallgeier/kirbycms-extensions/blob/master/snippets/map/map.mdown
If you want to be able to set the address in your content files, so it will be easily changeable in the future without messing with the template, all you need to do is to specify an address field in your content file:
Title: Contact Us
----
Text: Sometext
----
Address: Kirby HQ, 68165 Mannheim, Germany
----
Afterwards you can use the address variable to embed your map snippet like this:
snippet('map', array('address' => $page->address()));
The JavaScript implemention for the snippet makes it possible to embed multiple maps with different setups per page.
As mentioned before, the map will automatically fall back to the Google Static Maps API if JavaScript is disabled in your browser. The image result is pretty identical to the JavaScript implementation except the interactive elements.