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