Google Maps
A custom Google Map
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&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 lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
strokeOpacity: 1,
scale: 3,
strokeColor: 'green'
};
var lineSymbolTwo = {
path: 'M 0,-0.5 0,0.5',
strokeOpacity: 1,
strokeWeight:3,
scale: 4
}
var lineSymbolThree = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#00f',
strokeOpacity: 1,
strokeWeight:3,
scale: 1
}
var flightPlan = {
one: [
new google.maps.LatLng(7.119206, -73.132978),
new google.maps.LatLng(17.1907805, -88.320144),
new google.maps.LatLng(33.7677129, -84.4206039)
],
two: [
new google.maps.LatLng(7.119206, -73.132978),
new google.maps.LatLng(25.782324, -80.2310801)
],
three: [
new google.maps.LatLng(10.4001576, -75.5079229),
new google.maps.LatLng(21.552925, -85.720258),
new google.maps.LatLng(29.1055596, -90.19444)
]
};
flightPath_1 = new google.maps.Polyline({
path: flightPlan.one,
geodesic: true,
strokeOpacity: 0,
icons: [
{
icon: lineSymbol,
...