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="https://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="assets/gmaps/gmaps.min.js"></script>

With Search

<!-- 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>
Online
Felecia Castro
Felecia Castro
Lorem status
Max Brooks
Max Brooks
Lorem status
Patsy Griffin
Patsy Griffin
Lorem status
Chloe Morgan
Chloe Morgan
Lorem status
Vernon Garrett
Vernon Garrett
Lorem status
Greg Mcdonalid
Greg Mcdonalid
Lorem status
Christian Jackson
Christian Jackson
Lorem status
Offline
Willie Kelly
Willie Kelly
Lorem status
Jenny Phillips
Jenny Phillips
Lorem status
Darren Cunningham
Darren Cunningham
Lorem status
Sandra Cole
Sandra Cole
Lorem status
Monday, Feb 23, 8:23 pm
Hi, Felicia.
How are you?
John Doe Hi! I am good!
Glad to see you :)
This long text is intended to show how the chat will display it.
John Doe Also, we will send the longest word to show how it will fit in the chat window: Pneumonoultramicroscopicsilicovolcanoconiosis
Friday, Mar 10, 5:07 pm
Hi again!
John Doe Hi! Glad to see you.
I want to add you in my Facebook.
Can you give me your page?
John Doe I do not use Facebook. But you can follow me in Twitter.
It's good idea!
John Doe You can find me here - https://twitter.com/nkdevv