Google Maps

Google Maps allow you to create beautiful maps with a lot of possibilities, but it can't be complicate to use it sometime.

For that reason, we have added Gmaps plugin that allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.

Gmaps Documentation Google Map Documentation

How to Create a Map?

1. Add specific javascript

Add inside body at the end of your page, before main template scripts:

<script src="//maps.google.com/maps/api/js?sensor=true"></script> <!-- Google Maps -->
<script src="assets/plugins/google-maps/markerclusterer.min.js"></script> <!-- Google Maps Marker Clusterer -OPTIONAL -->
<script src="assets/plugins/google-maps/gmaps.min.js"></script> <!-- Google Maps Easy -->

2. Create your map markup

It's very simple here, you just have to create an element with an ID that you will target after:

<div class="map" id="my-map"></div>

After, you have to initiate plugin. You have to tell where the map will be (latitude / longitude), initial zoom (optional), markers (optional) and controls that you want. Here is an example:

$(function () {
    var map_map;
    my_map = new GMaps({
        el: '#my-map',
        lat: -12.043333,
        lng: -77.028333,
        zoomControl: true,
        panControl: false,
        streetViewControl: false,
        mapTypeControl: false,
        overviewMapControl: false
    });
    // If you want to add a marker
    my_map.addMarker({
        lat: -12.042,
        lng: -77.028333,
        title: 'Marker with InfoWindow',
        infoWindow: {
            content: '<p>Here we are!</p>'
        }
    });
});

Style Map

You can customize map appearance with many options. You can use style created by users directly with many different styles available, great for a quick use:

Explore Google Maps Styles

Once you have found a theme that you like, you can integrate it to your map script like this:

styled_map = new GMaps({
    el: '#style-map',
    lat: -12.043333,
    lng: -77.028333,
    // HERE BEGIN YOUR THEME THAT YOU HAVE TO INTEGRATA
    styles: [{
            "featureType": "water",
            "elementType": "geometry",
            "stylers": [{
                "color": "#193341"
            }]
        }, {
            "featureType": "landscape",
            "elementType": "geometry",
            "stylers": [{
                "color": "#2c5a71"
            }]
        }, {
            "featureType": "road",
            "elementType": "geometry",
            "stylers": [{
                "color": "#29768a"
            }, {
                "lightness": -37
            }]
        }, {
            "featureType": "poi",
            "elementType": "geometry",
            "stylers": [{
                "color": "#406d80"
            }]
        }, {
            "featureType": "transit",
            "elementType": "geometry",
            "stylers": [{
                "color": "#406d80"
            }]
        }, {
            "elementType": "labels.text.stroke",
            "stylers": [{
                "visibility": "on"
            }, {
                "color": "#3e606f"
            }, {
                "weight": 2
            }, {
                "gamma": 0.84
            }]
        }, {
            "elementType": "labels.text.fill",
            "stylers": [{
                "color": "#ffffff"
            }]
        }, {
            "featureType": "administrative",
            "elementType": "geometry",
            "stylers": [{
                "weight": 0.6
            }, {
                "color": "#1a3541"
            }]
        }, {
            "elementType": "labels.icon",
            "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "poi.park",
            "elementType": "geometry",
            "stylers": [{
                "color": "#2c5a71"
            }]
        }
    ]
    // END OF STYLE
});