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");
});
© Minia.