Google Maps

<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 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>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <!-- Gmaps - Container -->
      <div id="map-2"></div>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

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

<!-- Gmaps.js - Container -->
<script type="text/javascript">
  var map;
  $(document).ready(function(){
    map = new GMaps({
      el: '#map-2',
      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>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <!-- Gmaps - Marker -->
      <div id="map-3"></div>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

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

<!-- Gmaps.js - Marker -->
<script type="text/javascript">
  var map;
  $(document).ready(function(){
    map = new GMaps({
      el: '#map-3',
      lat: 51.49904072281125,
      lng: -0.0390625,
      zoom: 5
    });
    map.addMarker({
      lat: 51.49904072281125,
      lng: -0.0390625,
      title: 'London',
      details: {
        database_id: 42,
        author: 'HPNeo'
      },
      click: function(e){
        if(console.log)
          console.log(e);
        alert('You clicked in this marker');
      },
      mouseover: function(e){
        if(console.log)
          console.log(e);
      }
    });
    map.addMarker({
      lat: 48.825537352565554,
      lng: 2.3779296875,
      title: 'Marker with InfoWindow',
      infoWindow: {
        content: '<p>HTML Content</p>'
      }
    });
  });
</script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <!-- Gmaps - Custom Controls -->
      <div id="map-4"></div>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

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

<!-- Gmaps.js - Custom Controls -->
<script type="text/javascript">
  var map;
  $(document).ready(function(){
    map = new GMaps({
      el: '#map-4',
      zoom: 16,
      lat: 51.49904072281125,
      lng: -0.0390625,
      zoom: 5
    });
    map.addControl({
      position: 'top_right',
      content: 'Geolocate',
      style: {
        margin: '5px',
        padding: '1px 6px',
        border: 'solid 1px #717B87',
        background: '#fff'
      },
      events: {
        click: function(){
          GMaps.geolocate({
            success: function(position){
              map.setCenter(position.coords.latitude, position.coords.longitude);
            },
            error: function(error){
              alert('Geolocation failed: ' + error.message);
            },
            not_supported: function(){
              alert("Your browser does not support geolocation");
            }
          });
        }
      }
    });
  });
</script>