Google Maps

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>