GENIUX

gmaps.js

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

Using GMaps.js is as easy as:

new GMaps({
  div: '#map',
  lat: -12.043333,
  lng: -77.028333
});

You must define container ID, latitude and longitude of the map's center.

NOTE: You also can define zoom, width and height. By default, zoom is 15. Width an height in a CSS class will replace these values.

NOTE: Map types are defined in the mapType property. Allowed values are: roadmap (default), satellite, hybrid and terrain.

Gmaps - Setup

To make our map work we need two basic elements:

A div with the map ID

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 no-padding">
      <!-- Gmaps - Basic -->
      <div id="map"></div>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

Gmaps js script relevant to the type of map we’re going to use

<!-- Gmaps js
============================================ -->
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

<!-- Gmaps.js - Basic -->
<script type="text/javascript">
  var map;
  $(document).ready(function(){
    map = new GMaps({
      el: '#map',
      lat: 37.0817014,
      lng: 26.306114,
      zoom: 2,
      zoomControl : true,
      zoomControlOpt: {
          style : 'SMALL',
          position: 'TOP_LEFT'
      },
      panControl : false,
      streetViewControl : false,
      mapTypeControl: false,
      overviewMapControl: false
    });
  });
</script>

Important:The js script must be added at the bottom of the page before the <body> end tag.

Gmaps Documentation: https://hpneo.github.io/gmaps/documentation.html
See all the avaiable Maps examples at: https://hpneo.github.io/gmaps/examples.html