google map

by hoss

HTML

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map_canvas">
</div>

CSS

#map_canvas {
  height: 560px;
  width: 100%
}

JavaScript

function initialize() {
  var myLatlng = new google.maps.LatLng(37.772, -122.214);
  var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var flightPlanCoordinates = [{
    lat: 37.772,
    lng: -122.214
  }, {
    lat: 21.291,
    lng: -157.821
  }, {
    lat: -18.142,
    lng: 178.431
  }, {
    lat: -27.467,
    lng: 153.027
  }];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: 'black',
    strokeOpacity: 1.0,
    strokeWeight: 6
  });

  var flightPath2 = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: 'yellow',
    strokeOpacity: 1.0,
    strokeWeight: 4
  });

  flightPath.setMap(map);
  flightPath2.setMap(map);
}

initialize()