@@include('./parts/title.html', { "title": "Google Maps", "crumbs": "

" })

Con uses gmaps.js to show google maps. See full documentation and examples here - http://hpneo.github.io/gmaps/.
Begin to use the plugin with this step:

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="assets/gmaps/gmaps.min.js"></script>

With Search

Enter Address

<!-- Search Field -->
<div class="input-field">
  <input id="map1-search" type="text">
  <label for="map1-search">Enter Address</label>
</div>
<!-- /Search Field -->

<!-- Map -->
<div class="map" id="map1"></div>
<!-- /Map -->

<script>
  /*
   * MAP 1
   */
  jQuery(function() {
    "use strict";

    // init map
    var map = new GMaps({
        div: '#map1',
        lat: 40.706086,
        lng: -73.996864,
        zoom: 11
    });

    // redraw map on search
    function redrawMap(address) {
      GMaps.geocode({
        address: address,
        callback: function(results, status) {
          if (status == 'OK') {
            var pos = results[0].geometry.location;
            map.setCenter(pos.lat(), pos.lng());
            map.addMarker({
              lat: pos.lat(),
              lng: pos.lng()
            });
          }
        }
      });
    }

    // search event
    var searchTimeout;
    $('#map1-search').on('keyup', function(e) {
      e.preventDefault();
      clearTimeout(searchTimeout);

      (function( address ){
        searchTimeout = setTimeout(function() {
          redrawMap( address );
        }, 400);
      }( $(this).val().trim() ));
    });

  });
</script>

With Markers

<!-- Map -->
<div class="map" id="map2"></div>
<!-- /Map -->

<script>
  /*
   * MAP 2
   */
  jQuery(function() {
    "use strict";

    // init map
    var map = new GMaps({
        div: '#map2',
        lat: 34.9365255,
        lng: -85.4373943,
        zoom: 4
    });

    // add New York marker
    map.addMarker({
      lat: 40.706086,
      lng: -73.996864,
      title: 'New York',
      infoWindow: {
        content: '<b>New York</b> is a state in the Northeastern and Mid-Atlantic regions of the <i>United States</i>.'
      }
    });

    // add Chicago marker
    map.addMarker({
      lat: 41.8337329,
      lng: -87.7321554,
      title: 'Chicago',
      infoWindow: {
        content: '<b>Chicago</b> is the third most populous city in the <i>United States</i>, after <i>New York City</i> and <i>Los Angeles</i>.'
      }
    });

    // add Miami marker
    map.addMarker({
      lat: 25.782324,
      lng: -80.2310801,
      title: 'Miami',
      infoWindow: {
        content: '<b>Miami</b> is a city located on the Atlantic coast in southeastern <i>Florida</i> and the county seat of Miami-Dade County.'
      }
    });

    // add Dallas marker
    map.addMarker({
      lat: 32.8206645,
      lng: -96.7313396,
      title: 'Dallas',
      infoWindow: {
        content: '<b>Dallas</b> is a major city in Texas and is the largest urban center of the fourth most populous metropolitan area in the <i>United States</i>.'
      }
    });

  });
</script>

Panorama

<!-- Map -->
<div class="map" id="map3"></div>
<!-- /Map -->

<script>
  /*
   * MAP 3
   */
  jQuery(function() {
    "use strict";

    // init panorama
    var panorama = GMaps.createPanorama({
      el: '#map3',
      lat: -23.442896,
      lng: 151.906584,
      pov: {
        heading: 340,
        pitch: -3
      }
    });
  });
</script>

Map Types

<!-- Map -->
<div class="map" id="map4"></div>
<!-- /Map -->

<script>
  /*
   * MAP 4
   */
  jQuery(function() {
    "use strict";

    // init map
    var map = new GMaps({
      div: '#map4',
      lat: 40.706086,
      lng: -73.996864,
      zoom: 11,
      mapTypeControlOptions: {
        mapTypeIds : ["hybrid", "roadmap", "satellite", "terrain", "osm"]
      }
    });

    // add osm type
    map.addMapType("osm", {
      getTileUrl: function(coord, zoom) {
        return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
      },
      tileSize: new google.maps.Size(256, 256),
      name: "OpenStreetMap",
      maxZoom: 18
    });

    // set default type
    map.setMapTypeId("osm");

  });
</script>