google-maps-api/google_maps_api.html at master · jamgraham/google-maps-api · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Flight Fund</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
</head>
<body>

<div class="header">

  <div class="nav"></div>
</div>

	<div id="map_canvas" style="width: 770px; height: 350px">blah</div>

<body onload="initialize()">
    <script type="text/javascript">

  	function initialize() {
	  var myOptions = {
	    zoom: 3,
	    center: new google.maps.LatLng(30.1765914, -85.8054879),
	 mapTypeId: google.maps.MapTypeId.TERRAIN
	  }
	  var map = new google.maps.Map(document.getElementById("map_canvas"),
	                                myOptions);

	  setMarkers(map, beaches);

	var flightPlanCoordinates = [
	    new google.maps.LatLng(30.1765914, -85.8054879),
	    new google.maps.LatLng(37.775, -122.4183333),
	  ];
	  var flightPath = new google.maps.Polyline({
	    geodesic: true,
	    path: flightPlanCoordinates,
	    strokeColor: "#0000ff",
	    strokeOpacity: 1.0,
	    strokeWeight: 3
	  });
	  flightPath.setMap(map)


	}

	/**
	 * Data for the markers consisting of a name, a LatLng and a zIndex for
	 * the order in which these markers should display on top of each
	 * other.
	 */
	var beaches = [
	  ['Manly Beach', 37.775, -122.4183333],
	  ['Maroubra Beach', 30.1765914, -85.8054879]
	];

	function setMarkers(map, locations) {
	  // Add markers to the map

	  // Marker sizes are expressed as a Size of X,Y
	  // where the origin of the image (0,0) is located
	  // in the top left of the image.

	  // Origins, anchor positions and coordinates of the marker
	  // increase in the X direction to the right and in
	  // the Y direction down.
	  var image = new google.maps.MarkerImage('http://www.ville.quebec.qc.ca/img/partagez/ico_google_pin.png',
	      // This marker is 20 pixels wide by 32 pixels tall.
	      new google.maps.Size(20, 20),
	      // The origin for this image is 0,0.
	      new google.maps.Point(0,0),
	      // The anchor for this image is the base of the flagpole at 0,32.
	      new google.maps.Point(0, 32));
	  var shadow = new google.maps.MarkerImage('http://www.jasonfox.me/wp-content/uploads/2011/05/map-pin.png',
	      // The shadow image is larger in the horizontal dimension
	      // while the position and offset are the same as for the main image.
	      new google.maps.Size(20, 20),
	      new google.maps.Point(0,0),
	      new google.maps.Point(0, 32));
	      // Shapes define the clickable region of the icon.
	      // The type defines an HTML <area> element 'poly' which
	      // traces out a polygon as a series of X,Y points. The final
	      // coordinate closes the poly by connecting to the first
	      // coordinate.
	  var shape = {
	      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
	      type: 'poly'
	  };
	  for (var i = 0; i < locations.length; i++) {
	    var beach = locations[i];
	    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
	    var marker = new google.maps.Marker({
	        position: myLatLng,
	        map: map,
	        shadow: shadow,
	        icon: image,
	        shape: shape,
	        title: beach[0],
	        zIndex: beach[3]
	    });
	  }
	}

	</script>
	</body>

</div>
    </div>
  </div>
</div>
</body>
</html>