Maps Demo

gmaps demo

by bigalreturns

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maps.googleapis.com/maps/api/js"></script>
        <div class="list-group col-md-1">
            <a id="0" href="#" class="list-group-item" data-name='Maroubra Beach' data-lat='-33.950198' data-lng=' 151.259302'>Cras justo odio</a><br />
            <a id="1" href="#" class="list-group-item" data-name='Coogee Beach' data-lat='-33.923036' data-lng=' 151.259052'>Dapibus ac facilisis in</a><br />
            <a id="3" href="#" class="list-group-item" data-name='Cronulla Beach' data-lat='-34.028249' data-lng=' 151.157507'>Morbi leo risus</a>
           
        </div>

    <div class="col-md-9">
        <div id="map"></div>
    </div>
    
    <div id="map_canvas"></div>

CSS

#map_canvas {
    width: 500px;
    height: 400px;
    margin: 2em auto;
}

JavaScript

(function(Mapping, $, undefined) {
   		var self = this;
      
   		function Initialize() {
      		var myOptions = {
              zoom: 10,
            	center: new google.maps.LatLng(-33.92, 151.25),
            	mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          self.map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
          self.markers = [];
          self.infoWindow = new google.maps.InfoWindow();
          
          $('.list-group-item').each(function() {
          	var $this = $(this);
            var pos = new google.maps.LatLng($this.data('lat'), $this.data('lng'));
            var marker = new google.maps.Marker({
                            position: pos,
                            map: self.map
                          });
            self.markers.push(marker);
            
            $this.click(function() {
            	self.map.panTo(pos);
              self.infoWindow.setContent($this.data('name'));
              self.infoWindow.open(self.map, marker);
              $this.siblings().removeClass('active');
              $this.addClass('active');
            });
          });
      }
      
      Initialize();
   })(window.Mapping = window.Mapping || {}, jQuery);