Google Maps

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="assets/libs/gmaps/gmaps.min.js"></script>
Initjs (Custom js)
<!-- gmaps init -->
<script src="assets/js/pages/gmaps.init.js"></script>
Add Package
yarn add gmaps --save
Remove Package
yarn remove gmaps

Or you can remove package by removing specific package from package.json

Examples
Title Javascript
Markers
var map;
document.addEventListener("DOMContentLoaded", function(event) {
  // 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;
document.addEventListener("DOMContentLoaded", function(event) {
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' }); });
Street View Panoramas
var map;
document.addEventListener("DOMContentLoaded", function(event) {
    map = GMaps.createPanorama({
        el: '#panorama',
        lat : 42.3455,
        lng : -71.0983
      });
});
Map Types
var map;
document.addEventListener("DOMContentLoaded", function(event) {
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");
});
© Velzon.
Design & Develop by Themesbrand