YerlinMatu/index.html

## index.html
<div class="dot-wrapper">
  <div class="dot"></div>
  <div class="dot-bubble"></div>
</div>

<div id="map"></div>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

<script type="text/javascript">
    // When the window has finished loading create our google map below
    google.maps.event.addDomListener(window, 'load', init);

    function init() {
        // Basic options for a simple Google Map
        // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
        var mapOptions = {
            // How zoomed in you want the map to start at (always required)
            zoom: 11,

            // The latitude and longitude to center the map (always required)
            center: new google.maps.LatLng(40.6700, -73.9400), // New York

            // How you would like to style the map.
            // This is where you would paste any style found on Snazzy Maps.
            styles: [{"featureType":"all","elementType":"all","stylers":[{"hue":"#e7ecf0"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#636c81"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"color":"#636c81"}]},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":[{"color":"#ff0000"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"color":"#f1f4f6"}]},{"featureType":"landscape","elementType":"labels.text.fill","stylers":[{"color":"#496271"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-70}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#c6d3dc"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#898e9b"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"simplified"},{"saturation":-60}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#d3eaf8"}]}]
        };

        // Get the HTML DOM element that will contain your map
        // We are using a div with id="map" seen below in the <body>
        var mapElement = document.getElementById('map');

        // Create the Google Map using our element and options defined above
        var map = new google.maps.Map(mapElement, mapOptions);

    }
</script>

## style.scss
.dot-wrapper {
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 5px);
  z-index: 2;
}

.dot {
  display: block;
  width: 10px;
  height: 10px;
  background-color: #6BA7C5;
  border-radius: 100%;
}

.dot-bubble:after {
  position: absolute;
  content: "";
  top: calc(50% - 40px);
  left: calc(50% - 40px);
  width: 80px;
  height: 80px;
  background-color: #6BA7C5;
  border-radius: 100%;
  opacity: .1;
}

.dot-bubble:before {
  position: absolute;
  top: calc(50% - 101px);
  left: calc(50% - 101px);
  content: '';
  width: 200px;
  height: 200px;
  border: 1px solid rgba(55, 131, 169, 1);
  box-shadow: 0 5px 5px rgba(63,173, 229,0.1);
  border-radius: 100%;
  animation: bubble 3s ease-out infinite;
  z-index: 10;
}

@keyframes bubble{
  0%{
    transform: scale(0);
  }
  30%{
    box-shadow: 0 8px 20px rgba(63,173, 229,0.2);
  }
  80%{
    border-color: rgba(55, 131, 169, 0.7);
    box-shadow: 0 10px 30px rgba(63,173, 229, 0.2);
  }
  100%{
    border-color: rgba(55, 131, 169, 0);
  }
}

#map {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

## uber-point.markdown

      
    Raw
  

              uber-point.markdown
            
          
    Uber point

A Pen by Yerlin Matu on CodePen.
License.
	<div class="dot-wrapper">
	<div class="dot"></div>
	<div class="dot-bubble"></div>
	</div>

	<div id="map"></div>

	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

	<script type="text/javascript">
	// When the window has finished loading create our google map below
	google.maps.event.addDomListener(window, 'load', init);

	function init() {
	// Basic options for a simple Google Map
	// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
	var mapOptions = {
	// How zoomed in you want the map to start at (always required)
	zoom: 11,

	// The latitude and longitude to center the map (always required)
	center: new google.maps.LatLng(40.6700, -73.9400), // New York

	// How you would like to style the map.
	// This is where you would paste any style found on Snazzy Maps.
	styles: [{"featureType":"all","elementType":"all","stylers":[{"hue":"#e7ecf0"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#636c81"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"color":"#636c81"}]},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":[{"color":"#ff0000"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"color":"#f1f4f6"}]},{"featureType":"landscape","elementType":"labels.text.fill","stylers":[{"color":"#496271"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-70}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#c6d3dc"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#898e9b"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"simplified"},{"saturation":-60}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#d3eaf8"}]}]
	};

	// Get the HTML DOM element that will contain your map
	// We are using a div with id="map" seen below in the <body>
	var mapElement = document.getElementById('map');

	// Create the Google Map using our element and options defined above
	var map = new google.maps.Map(mapElement, mapOptions);

	}
	</script>
	.dot-wrapper {
	position: absolute;
	top: calc(50% - 5px);
	left: calc(50% - 5px);
	z-index: 2;
	}

	.dot {
	display: block;
	width: 10px;
	height: 10px;
	background-color: #6BA7C5;
	border-radius: 100%;
	}

	.dot-bubble:after {
	position: absolute;
	content: "";
	top: calc(50% - 40px);
	left: calc(50% - 40px);
	width: 80px;
	height: 80px;
	background-color: #6BA7C5;
	border-radius: 100%;
	opacity: .1;
	}

	.dot-bubble:before {
	position: absolute;
	top: calc(50% - 101px);
	left: calc(50% - 101px);
	content: '';
	width: 200px;
	height: 200px;
	border: 1px solid rgba(55, 131, 169, 1);
	box-shadow: 0 5px 5px rgba(63,173, 229,0.1);
	border-radius: 100%;
	animation: bubble 3s ease-out infinite;
	z-index: 10;
	}

	@keyframes bubble{
	0%{
	transform: scale(0);
	}
	30%{
	box-shadow: 0 8px 20px rgba(63,173, 229,0.2);
	}
	80%{
	border-color: rgba(55, 131, 169, 0.7);
	box-shadow: 0 10px 30px rgba(63,173, 229, 0.2);
	}
	100%{
	border-color: rgba(55, 131, 169, 0);
	}
	}

	#map {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	}