jQuery addClass example

Change class name on click in jQuery

by metalshark7

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;libraries=drawing,geometry,places,visualization"></script>
<div id="info"></div>
<div id="map-canvas"></div>

CSS

html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

function init() {
          var mapDiv = document.getElementById('map-canvas');
          var map = new google.maps.Map(mapDiv, {
              center: new google.maps.LatLng(32.53,-117.04),
              zoom: 15,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          });
          var distanceWidget = new DistanceWidget(map);
          google.maps.event.addListener(distanceWidget, 'distance_changed', function () {
              displayInfo(distanceWidget);
          });

          google.maps.event.addListener(distanceWidget, 'position_changed', function () {
              displayInfo(distanceWidget);
          });
      }

      google.maps.event.addDomListener(window, 'load', init);

      /** 
       * A distance widget that will display a circle that can be resized and will 
       * provide the radius in km. 
       * 
       * @param {google.maps.Map} map The map on which to attach the distance widget. 
       * 
       * @constructor 
       */
      function DistanceWidget(map) {
          this.set('map', map);
          this.set('position', map.getCenter());

          var marker = new google.maps.Marker({
              draggable: true,
              title: 'Move me!'
          });

          // Bind the marker map property to the DistanceWidget map property 
          marker.bindTo('map', this);

          // Bind the marker position property to the DistanceWidget position 
          // property 
          marker.bindTo('position', this);

          // Create a new radius widget 
          var radiusWidget = new RadiusWidget();

          // Bind the radiusWidget map to the DistanceWidget map 
          radiusWidget.bindTo('map', this);

          // Bind the radiusWidget center to the DistanceWidget position 
          radiusWidget.bindTo('center', this, 'position');

          // Bind to the radiusWidgets' distance property 
          this.bindTo('distance', radiusWidget);

          // Bind to the radiusWidgets' bounds property 
         ...