Custom CSS styles and animations in Google Maps markers

Custom CSS styles and animations in Google Maps markers.markdown

Custom CSS styles and animations in Google Maps markers

A Pen by Diana on CodePen.

License.

index.html

<div id="myMap"></div>

script.js

//External resources:
//http://maps.google.com/maps/api/js?sensor=false
//https://google-maps-utility-library-v3.googlecode.com/svn-history/r391/trunk/markerwithlabel/src/markerwithlabel.js

function init() {
  
  var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(40.417181, -3.700823),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      disableDefaultUI: true
  };
  
  var myMap = new google.maps.Map(document.getElementById('myMap'), mapOptions);
  
  var marker = new MarkerWithLabel({
    position: myMap.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 0, //tamaño 0
    },
    map: myMap,
    draggable: true,
    labelAnchor: new google.maps.Point(10, 10),
    labelClass: "label", // the CSS class for the label
  });
}
google.maps.event.addDomListener(window, 'load', init);

scripts

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn-history/r391/trunk/markerwithlabel/src/markerwithlabel.js"></script>

style.css

html, body, #myMap{
  width: 100%;
  height: 100%;
}

.label {
  box-sizing:border-box;
  background: #05F24C;
  box-shadow: 2px 2px 4px #333;
  border:5px solid #346FF7;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  -webkit-animation: pulse 1s ease 1s 3;
  -moz-animation: pulse 1s ease 1s 3;
  animation: pulse 1s ease 1s 3;
}

/* ANIMATIONS */
@-webkit-keyframes pulse {
 40% {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    transform: scale(2);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes pulse {
 40% {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    transform: scale(2);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes pulse {
  40% {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    transform: scale(2);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
  }
}