Google Maps

A custom Google Map

by Emily Humphrey

HTML

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

CSS

html, body, #map-canvas {
    height: 100%;
    margin: 0;
    padding: 0;
}

JavaScript

var map;
      function initialize() {
        /* MAP STYLES */
      var mapStyles = [{"featureType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"lightness":-100}]}] // END MAP STYLES

        var mapOptions = {
          zoom: 5,
          center: new google.maps.LatLng(18.7083396, -74.3851948),
          disableDefaultUI: true,
          scrollwheel: false,
          navigationControl: false,
          mapTypeControl: false,
          scaleControl: false,
          draggable: false,
          mapTypeId: 'Styled'
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var image = 'Map_Plus_Icon.png';

        // Diamond Shape
        var lineSymbol = {
          path: 'M -2,0 0,-2 2,0 0,2 z',
          // fillColor: '#f00',
          fillOpacity: 1,
          strokeOpacity: 1,
          scale: 3
        };

        // Dashed Line
        var lineSymbolTwo = {
          path: 'M 0,-0.5 0,0.5',
          strokeOpacity: 1,
          strokeWeight:3,
          scale: 4
        }

        // Circle Shape
        var lineSymbolThree = {
          path: google.maps.SymbolPath.CIRCLE,
          strokeOpacity: 1,
          strokeWeight:3,
          fillOpacity: 1,
          scale: 1
        }

        var pArray = new Array(),
            pArrayAnimate = new Array();

        // Begin Polyline Creation
        flightPath_1 = new google.maps.Polyline({
          path: flightPlanOverlay.one,
          timeout: 00,
          geodesic: true,
          strokeOpacity: 0,
          icons: [
            {
              icon: lineSymbol,
              offset: '100%'
            },
          ],
          strokeOpacity: 0,
          strokeColor: '#f00',
          map: map
        });

        flightPath_1_1 = new google.maps.Polyline({
          path: flightPlanPaths.one_one,
          timeout: 00,
          geodesic: true,
          strokeOpacity: 0,
          icons: [
        ...