Maps

Integrate Google Maps in your website with custom filters and integrated lightbox or a simple iframe code. For the lightbox example see the lightbox dedicated page in the "Embedding" section.

Simple iframe map

Example


<iframe src="GOOGLE_MAPS_URL" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Custom maps

In order to use Google Maps API you need to get a key that will be included in your website. Open this link to create your key.

After that, all you need to do is to add these scripts at the bottom of the page:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="/assets/js/google-maps/google-maps-custom.js"></script>>

Example


<div id="google-map">
    <!-- #map_canvas will contain the map  -->
    <div id="map_canvas" class="map-canvas" ></div>

    <!-- #map-zoom-in and #map-zoom-out will be used to create our custom buttons for zooming-in/out -->
    <div id="map-zoom-in"></div>
    <div id="map-zoom-out"></div>
</div>

Map filters

For preview purpose please check out the following links to see the working map and use the code examples to use them.

Blue map Gray map

Example



<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="/assets/js/google-maps/google-maps-blue.js"></script>>


<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="/assets/js/google-maps/google-maps-gray.js"></script>>


<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="/assets/js/google-maps/google-maps-light.js"></script>>


<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="/assets/js/google-maps/google-maps-default.js"></script>>