OverviewOfficial Website

Google maps library allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.

Javascript
<!-- google maps api -->
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCtSAR45TFgZjOs4nBFFZnII-6mMHLfSYI"></script>
<!-- gmaps plugins -->
<script src="{% static 'libs/gmaps/gmaps.min.js' %}"></script>
Initjs (Custom js)
<!-- gmaps init -->
<script src="{% static 'js/pages/gmaps.init.js' %}"></script>
Examples:
Title Javascript
Markers 
var map;
$(document).ready(function(){
    // Markers
    map = new GMaps({
    div: '#gmaps-markers',
    lat: -12.043333,
    lng: -77.028333
    });
    map.addMarker({
    lat: -12.043333,
    lng: -77.03,
    title: 'Lima',
    details: {
        database_id: 42,
        author: 'HPNeo'
    },
    click: function(e){
        if(console.log)
        console.log(e);
        alert('You clicked in this marker');
    }
    });
Overlays 
var map;
map = new GMaps({
    div: '#gmaps-overlay',
    lat: -12.043333,
    lng: -77.028333
  });
  map.drawOverlay({
    lat: map.getCenter().lat(),
    lng: map.getCenter().lng(),
    content: '
Lima
',
    verticalAlign: 'top',
    horizontalAlign: 'center'
  });

  //panorama
  map = GMaps.createPanorama({
    el: '#panorama',
    lat : 42.3455,
    lng : -71.0983
  });
Street View Panoramas 
var map;
map = GMaps.createPanorama({
    el: '#panorama',
    lat : 42.3455,
    lng : -71.0983
    });
Map Types 
var map;
map = new GMaps({
    div: '#gmaps-types',
    lat: -12.043333,
    lng: -77.028333,
    mapTypeControlOptions: {
        mapTypeIds : ["hybrid", "roadmap", "satellite", "terrain", "osm"]
    }
    });
    map.addMapType("osm", {
    getTileUrl: function(coord, zoom) {
        return "https://a.tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
    },
    tileSize: new google.maps.Size(256, 256),
    name: "OpenStreetMap",
    maxZoom: 18
    });
    map.setMapTypeId("osm");
© Skote.