//tile
<section class="tile">

  //tile header
  <div class="tile-header nopadding">
    <div class="controls">
      <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
      <a href="#" class="remove"><i class="fa fa-times"></i></a>
    </div>
  </div>
  // /tile header

  //tile body
  <div class="tile-body tab-content nopadding" style="padding-bottom: 1px">

    <div class="tab-pane fade in active" id="basicContainer">
      <div id="basic" class="gmap" style="height: 570px;"></div>
    </div>

    <div class="tab-pane fade" id="streetContainer">
        
      <div id="street" class="gmap" style="height: 570px;"></div>

      <div class="margin-15">
        <h4 class="filled">Spinal Tap</h4>
        <div class="content">
          <p class="filled vevent">
            <span class="description">After their highly-publicized search for a new drummer, Spinal Tap kicks off their latest comeback tour with a San Francisco show.</span><br/>
            <strong>When:</strong>
            <span class="dtstart">
              Oct 15, 7:00PM<span class="value-title" title="2015-10-15T19:00-08:00"></span>
            </span>-
            <span class="dtend">
              9:00PM<span class="value-title" title="2015-10-15T21:00-08:00"></span>
            </span><br/>
            <span class="location vcard">
              <strong>Where:</strong>
              <span class="fn org">Warfield Theatre</span>,
              <span class="adr">
                <span class="street-address">982 Market St</span>,
                <span class="locality">San Francisco</span>,
                <span class="region">CA</span>
            </span>
              <span class="geo">
                <span class="latitude">
                  <span class="value-title" title="37.774929" ></span>
                </span>
                <span class="longitude">
                  <span class="value-title" title="-122.419416"></span>
                </span>
              </span>
            </span>
          </p>
        </div>
      </div>

      

      <!-- Modal -->
      <div class="modal fade" id="streetModal" tabindex="-1" role="dialog" aria-labelledby="gmapStreet" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
              <h4 class="modal-title" id="gmapStreet">Spinal Tap</h4>
            </div>
            <div class="modal-body">



            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->



    </div>


    <div class="tab-pane fade" id="clusterContainer">
      <div id="cluster" class="gmap" style="height: 570px;"></div>
    </div>

    <div class="tab-pane fade" id="paginationContainer">
      <div id="pagination" class="gmap" style="height: 570px;"></div>
    </div>

    <div class="tab-pane fade" id="filterContainer">
      <div id="filter" class="gmap" style="height: 570px;"></div>
      <div id="checkboxes" class="map-filter"></div>
    </div>

    <div class="tab-pane fade" id="geolocationContainer">
      <div id="geolocation" class="gmap" style="height: 570px;"></div>
      <h4 class="filled cyan">You can click anywhere on map to add new Marker</h4>
      <div id="geoModals"></div> 
    </div>

    <div class="tab-pane fade" id="jsonContainer">
      <div id="json" class="gmap" style="height: 570px;"></div>
    </div>


  </div>
  // /tile body

  //tile footer
  <div class="tile-footer nopadding">

    <ul class="nav nav-pills">
      <li class="active"><a href="#basicContainer" data-toggle="pill">Basic Map Example</a></li>
      <li><a href="#streetContainer" data-toggle="pill">StreetView Example</a></li>
      <li><a href="#clusterContainer" data-toggle="pill">Clustering Example</a></li>
      <li><a href="#paginationContainer" data-toggle="pill">Map with Pagination Example</a></li> 
      <li><a href="#filterContainer" data-toggle="pill">Map with Filtering Example</a></li> 
      <li><a href="#geolocationContainer" data-toggle="pill">Geolocation Example</a></li> 
      <li><a href="#jsonContainer" data-toggle="pill">JSON Data Example</a></li>           
    </ul>

  </div>
  // /tile footer

</section>
// /tile

//****************************//
//*********** jquery *********//
//****************************//

//Initialize Basic Map Example
var initBasicMap = function() {
  $('#basic').gmap({'center': '57.7973333,12.0502107', 'zoom': 10, 'disableDefaultUI':true, 'callback': function() {
    var self = this;
    self.addMarker({'position': this.get('map').getCenter() }).click(function() {
      self.openInfoWindow({ 'content': 'Hello World!' }, this);
    }); 
  }}); 
};

initBasicMap();


//Initialize Streetview Map Example
var initStreetMap = function() {
  $('#street').gmap().bind('init', function(evt, map) {
    $('#street').gmap('microformat', '.vevent', function(result, item, index) {
      
      $('#streetModal .modal-body').append('<div id="streetview{0}" class="streetview"></div>'.replace('{0}', index));

      var lat = result.location[0].geo[0].latitude['value-title']; 
      var lng = result.location[0].geo[0].longitude['value-title'];

      $('#street').gmap('addMarker', { 
          'bounds':true, 
          'position': new google.maps.LatLng(lat, lng), 
          'title': result.summary, 
          'icon': 'http://google-maps-icons.googlecode.com/files/music-rock.png'  
        }, 
      function(map, marker) {
        $(item).find('.summary').click( function() {
          $(marker).triggerEvent('click');
          return false;
        }); 

      }).click(function() {

        $('#streetModal').modal('show');

        $('#streetModal').on('shown.bs.modal', function (e) {

          var center = new google.maps.LatLng(lat,lng);
    
          var svOptions = {
            position: center
          };
          
          var sv = new google.maps.StreetViewPanorama(document.getElementById('streetview{0}'.replace('{0}', index)),svOptions);

        });
      });
    });
  });

};

initStreetMap();


//Initialize Cluster Map Example
var initClusterMap = function() {
  // We need to bind the map with the "init" event otherwise bounds will be null
  $('#cluster').gmap({'zoom': 2, 'disableDefaultUI':true}).bind('init', function(evt, map) { 
    var bounds = map.getBounds();
    var southWest = -70.25945200030638;
    var northEast = 70.25945200030638;
    var lngSpan = 360;
    var latSpan = 140.51890400061276;
    for ( var i = 0; i < 1000; i++ ) {
      var lat = southWest + latSpan * Math.random();
      var lng = southWest + lngSpan * Math.random();
      $('#cluster').gmap('addMarker', { 
          'position': new google.maps.LatLng(lat, lng) 
      }).click(function() {
          $('#cluster').gmap('openInfoWindow', { content : 'Hello world!' }, this);
      });
    }
    $('#cluster').gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers')));
    // To call methods in MarkerClusterer simply call 
    // $('#cluster').gmap('get', 'MarkerClusterer').callingSomeMethod();
  });
};

initClusterMap();

//Initialize Map with Pagination Example
var initPaginationMap = function() {
  var markers = [
    {'position': '59.32893000000001,18.064910000000054', 'title': 'Stockholm, Sweden' },
    {'position': '35.6894875,139.69170639999993', 'title': 'Tokyo, Japan' },
    {'position': '13.7234186, 100.47623190000002', 'title': 'Bangkok, Thailand' },
    {'position': '51.508129,-0.12800500000003012', 'title': 'London, Great Britain' },
    {'position': '40.7143528,-74.0059731', 'title': 'New York, USA' },
    {'position': '48.856614,2.3522219000000177', 'title': 'Paris, France' },
    {'position': '34.0522342,-118.2436849', 'title': 'Los Angeles, USA' },
    {'position': '55.75,37.616666699999996', 'title': 'Moskva, Ryssia' }
  ];
  $('#pagination').gmap({'zoom': 5, 'disableDefaultUI':true, 'callback': function() {
    var self = this;
    $.each(markers, function(i, marker) {
      self.addMarker(marker).click(function() {
        self.openInfoWindow({'content': this.title}, this);
      });
    });
  }}).gmap('pagination', 'title');
};

initPaginationMap();

//Initialize Map with Filtering Options Example
var initFilterMap = function() {
  String.prototype.format = function() { a = this; for ( k in arguments ) { a = a.replace("{" + k + "}", arguments[k]); } return a; };
  $('#filter').gmap({'disableDefaultUI':true,'zoom':2}).bind('init', function(evt, map) { 
    $('#filter').gmap('clear', 'markers');
    //$('#filter').gmap('addControl', 'tags-control', google.maps.ControlPosition.TOP_LEFT);
    $('#filter').gmap('addControl', 'checkboxes', google.maps.ControlPosition.TOP_LEFT);
    var southWest = -70.25945200030638;
    var northEast = 70.25945200030638;
    var lngSpan = 360;
    var latSpan = 140.51890400061276;
    var images = ['http://google-maps-icons.googlecode.com/files/friends.png', 'http://google-maps-icons.googlecode.com/files/home.png', 'http://google-maps-icons.googlecode.com/files/girlfriend.png', 'http://google-maps-icons.googlecode.com/files/dates.png', 'http://google-maps-icons.googlecode.com/files/realestate.png', 'http://google-maps-icons.googlecode.com/files/apartment.png', 'http://google-maps-icons.googlecode.com/files/family.png'];
    var tags = ['jQuery', 'Google maps', 'Plugin', 'SEO', 'Java', 'PHP', 'C#', 'Ruby', 'JavaScript', 'HTML'];
    //$('#tags').append('<option value="all">All</option>');
    $.each(tags, function(i, tag) {
      //$('#tags').append(('<option value="{0}">{1}</option>').format(tag, tag));
      $('#checkboxes').append(('<div class="checkbox"><input type="checkbox" value="{0}" id="{1}" checked><label for="{2}">{3}</label></div>').format(tag, tag, tag, tag));
    });
    for ( i = 0; i < 100; i++ ) {
      var temp = [];
      for ( j = 0; j < Math.random()*5; j++ ) {
          temp.push(tags[Math.floor(Math.random()*10)]);
      }
      $('#filter').gmap('addMarker', { 'icon': images[(Math.floor(Math.random()*7))], 'tags':temp, 'bound':true, 'position': new google.maps.LatLng(southWest + latSpan * Math.random(), southWest + lngSpan * Math.random()) } ).click(function() {
          var visibleInViewport = ( $('#filter').gmap('inViewport', $(this)[0]) ) ? 'I\'m visible in the viewport.' : 'I\'m sad and hidden.';
          $('#filter').gmap('openInfoWindow', { 'content': $(this)[0].tags + '<br/>' +visibleInViewport }, this);
      });
    }
    $('input:checkbox').click(function() {
      $('#filter').gmap('closeInfoWindow');
      $('#filter').gmap('set', 'bounds', null);
      var filters = [];
      $('input:checkbox:checked').each(function(i, checkbox) {
        filters.push($(checkbox).val());
      });
      if ( filters.length > 0 ) {
        $('#filter').gmap('find', 'markers', { 'property': 'tags', 'value': filters, 'operator': 'OR' }, function(marker, found) {
          if (found) {
            $('#filter').gmap('addBounds', marker.position);
          }
          marker.setVisible(found); 
        });
      } else {
        $.each($('#filter').gmap('get', 'markers'), function(i, marker) {
          $('#filter').gmap('addBounds', marker.position);
          marker.setVisible(true); 
        });
      }
    });
    
    /*$("#tags").change(function() {
      $('#filter').gmap('closeInfoWindow');
      $('#filter').gmap('set', 'bounds', null);
      if ( $(this).val() == 'all' ) {
        $.each($('#filter').gmap('get', 'markers'), function(i, marker) {
            marker.setVisible(true); 
        });
      } else {
        $('#filter').gmap('find', 'markers', { 'property': 'tags', 'value': $(this).val() }, function(marker, found) {
          if (found) {
            $('#filter').gmap('addBounds', marker.position);
          }
          marker.setVisible(found); 
        });
      }
    });*/
  });
};

initFilterMap();

//Initialize Geolocation Map Example
var initGeolocationMap = function() {
  $('#geolocation').gmap({'zoom': 2 }).bind('init', function(event, map) { 
    $('#geolocation').gmap('clear', 'markers');
    $(map).click( function(event) {
      $('#geolocation').gmap('addMarker', {
        'position': event.latLng, 
        'draggable': true, 
        'bounds': false
      }, function(map, marker) {
        $('#geoModals').append(
          '<div id="geolocationModal'+marker.__gm_id+'" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="geolocationMark'+marker.__gm_id+'" aria-hidden="true">' + 
            '<div class="modal-dialog">' +
              '<div class="modal-content">' +
                '<div class="modal-header">' +
                  '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
                  '<h4 class="modal-title" id="geolocationMark'+marker.__gm_id+'">Add Marker</h4>' +
                '</div>' +
                '<div class="modal-body">' + 
                  '<div class="form-group"><label for="country">Country</label><input type="text" class="form-control" id="country" name="country"></div>' +
                  '<div class="form-group"><label for="state">State</label><input type="text" class="form-control" id="state" name="state"></div>' +
                  '<div class="form-group"><label for="address">Address</label><input type="text" class="form-control" id="address" name="address"></div>' +
                  '<div class="form-group"><label for="comment">Comment</label><textarea id="comment" name="comment" class="form-control" rows="5"></textarea></div>' +
                '</div>' +  
                '<div class="modal-footer">' +
                  '<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true" id="removeMarker'+marker.__gm_id+'">Remove</button>' +
                  '<button class="btn btn-success" id="addMarker'+marker.__gm_id+'">Save</button>  ' +
                '</div>' +
              '</div>' +
            '</div>' +
          '</div>'
        );
        findLocation(marker.getPosition(), marker);
      }).dragend( function(event) {
        findLocation(event.latLng, this);
      }).click( function() {
        openDialog(this);
      })
    });
  });

  function findLocation(location, marker) {
    $('#geolocation').gmap('search', {'location': location}, function(results, status) {
      if ( status === 'OK' ) {
        $.each(results[0].address_components, function(i,v) {
          if ( v.types[0] == "administrative_area_level_1" || 
            v.types[0] == "administrative_area_level_2" ) {
            $('#geolocationModal'+marker.__gm_id + ' [name="state"]').attr('value', v.long_name);
          } else if ( v.types[0] == "country") {
            $('#geolocationModal'+marker.__gm_id + ' [name="country"]').attr('value', v.long_name);
          }
        });
        marker.setTitle(results[0].formatted_address);
        $('#geolocationModal'+marker.__gm_id + ' [name="address"]').attr('value', results[0].formatted_address);
        openDialog(marker);
      }
    });
  }

  function openDialog(marker) {
    $('#geolocationModal'+marker.__gm_id).modal('show');
    $('#removeMarker'+marker.__gm_id).click(function() {
      marker.setMap(null);
    });
    $('#addMarker'+marker.__gm_id).click(function() {
      $('#geolocationModal'+marker.__gm_id).modal('hide');
    });
    /*bootbox.dialog($('#dialog'+marker.__gm_id).html(), [{
      'label': 'Save',
      'class': 'btn-success',
      'callback': function(){}
    }, {
      'label': 'Remove',
      'class': 'btn-danger',
      'callback': function(){
        marker.setMap(null);
      }
    }]);*/
  }
};

initGeolocationMap();

//Initialize Map with JSON Source Example

var initJsonMap = function() {
  $('#json').gmap().bind('init', function() { 
    $('#json').gmap('clear', 'markers');
    // This URL won't work on your localhost, so you need to change it
    // see http://en.wikipedia.org/wiki/Same_origin_policy
    $.getJSON( 'js/plugins/gmaps/json/demo.json', function(data) { 
      $.each( data.markers, function(i, marker) {
        $('#json').gmap('addMarker', { 
          'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
          'bounds': true 
        }).click(function() {
          $('#json').gmap('openInfoWindow', { 'content': marker.content }, this);
        });
      });
    });
  });
};

// Resize maps after tab show
$('a[data-toggle="pill"]').on('shown.bs.tab', function (e) {   
  $('.gmap').gmap('refresh');
  $("html").getNiceScroll().resize();
});

//  Initialize tabDrop
$('.tabdrop').tabdrop({text: '<i class="fa fa-th-list"></i>'});