camh96 · June 18, 2015 02:33
diff --git a/map.html b/map.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Complex icons</title>
    <style>
      html, body, #map-canvas {
        height: 80%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
 // The following example creates complex markers to indicate defibs near
 // Sydney, NSW, Australia. Note that the anchor is set to
 // (0,32) to correspond to the base of the flagpole.

 function initialize() {
  var mapOptions = {
    zoom: 10,
     center: { lat: -41.251906, lng: 174.792205}
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'),
                                mapOptions);

  setMarkers(map, defibs);
 }

 /**
 * 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 defibs = [
  ["Alzheimers Wellington", -41.294036, 174.782674],
  ["Blue Carrot Catering", -41.226750, 174.874784],
  ["Brookfield Scout Camp", -41.238984, 174.979707],
  ["Camp Wainuiomata", -41.351953, 174.923148],
  ["Churton Park Community Centre", -41.202677, 174.80864], 
  ["Four Square Plimmerton", -41.085592, 174.869129], 
  ["Hell Pizza - Webb Street",-41.297556, 174.772832], 
  ["Hutt Park Indoor Sports", -41.234880, 174.906222 ], 
  ["Judgeford Golf Club", -41.119280, 174.946432],
  ["Karori Community Centre", -41.285101, 174.737674],
  ["Karori Medical Centre", -41.284061, 174.736818], 
  ["Mana Crusing Club", -41.097813, 174.86659], 
  ["Mitre 10 Mega Upper Hutt", -41.124433, 175.070783], 
  ["Moore Wilson’s", -41.295394, 174.780213], 
  ["Moore Wilson’s Porirua", -41.133900, 174.840601], 
  ["Moore Wilson’s Masterton", -40.951112, 175.65735], 
  ["Northland Village Surgery", -41.283458, 174.757234 ], 
  ["Pak N Save Lower Hutt", -41.223759, 174.872303], 
  ["Pauatahinui Golf Course", -41.079846, 174.926361],
  ["PT Howard Association", -41.305087, 174.775252], 
  ["Pukerua Bay AED station", -41.037918, 174.885569], 
  ["Queen Elizabeth Park", -40.969892, 174.979385], 
  ["Readings Courtney", -41.292826, 174.779842], 
  ["Seatoun Surgery", -41.324614, 174.832007], 
  ["Southern Cross Bar", -41.296495, 174.774477], 
  ["Strait Shipping Offices", -41.282016, 174.777514], 
  ["Te Aro Health Centre", -41.295452, 174.777072], 
  ["Te Rauparaha Arena", -41.132302, 174.837852],
  ["Te Whaea National Dance and Drama Centre", -41.308369, 174.77467], 
  ["Titahi Bay Golf Club", -41.106156, 174.838683], 
  ["Waikanae Charter Club", -40.875514, 175.066795], 
  ["Waimea Domain Toilets", -40.863840, 175.020627], 
  ["Wainuiomata Bowls Club", -41.263362, 174.947905], 
  ["Wainuiomata High School", -41.251572, 174.936484], 
  ["Wellington Bluebridge Passenger Terminal", -41.286460, 174.776236], 
  ["Wellington Indoor Sports", 43.190411, -71.527327], 
  ["Wellington Free Ambulance Headquarters", -41.286460, 174.776236], 
  ["Wellington Free Ambulance public access defibrillator", -41.256463, 174.914043], 
  ["Wellington Railway Station", -41.279313, 174.780163], 
  ["Wellington Zoo", -41.319543, 174.784643]

  ]


 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 = {
    url: 'favicon.png',
    // This marker is 20 pixels wide by 32 pixels tall.
    size: new google.maps.Size(32, 32),
    // The origin for this image is 0,0.
    origin: new google.maps.Point(0,0),
    // The anchor for this image is the base of the flagpole at 0,32.
    anchor: new google.maps.Point(0, 32)
  };
  // Shapes define the clickable region of the icon.
  // The type defines an HTML &lt;area&gt; 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 = {
      coords: [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,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
 }

 google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Complex icons</title>
	<style>
	html, body, #map-canvas {
	height: 80%;
	margin: 0px;
	padding: 0px
	}
	</style>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
	<script>
	// The following example creates complex markers to indicate defibs near
	// Sydney, NSW, Australia. Note that the anchor is set to
	// (0,32) to correspond to the base of the flagpole.

	function initialize() {
	var mapOptions = {
	zoom: 10,
	center: { lat: -41.251906, lng: 174.792205}
	}
	var map = new google.maps.Map(document.getElementById('map-canvas'),
	mapOptions);

	setMarkers(map, defibs);
	}

	/**
	* 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 defibs = [
	["Alzheimers Wellington", -41.294036, 174.782674],
	["Blue Carrot Catering", -41.226750, 174.874784],
	["Brookfield Scout Camp", -41.238984, 174.979707],
	["Camp Wainuiomata", -41.351953, 174.923148],
	["Churton Park Community Centre", -41.202677, 174.80864],
	["Four Square Plimmerton", -41.085592, 174.869129],
	["Hell Pizza - Webb Street",-41.297556, 174.772832],
	["Hutt Park Indoor Sports", -41.234880, 174.906222 ],
	["Judgeford Golf Club", -41.119280, 174.946432],
	["Karori Community Centre", -41.285101, 174.737674],
	["Karori Medical Centre", -41.284061, 174.736818],
	["Mana Crusing Club", -41.097813, 174.86659],
	["Mitre 10 Mega Upper Hutt", -41.124433, 175.070783],
	["Moore Wilson’s", -41.295394, 174.780213],
	["Moore Wilson’s Porirua", -41.133900, 174.840601],
	["Moore Wilson’s Masterton", -40.951112, 175.65735],
	["Northland Village Surgery", -41.283458, 174.757234 ],
	["Pak N Save Lower Hutt", -41.223759, 174.872303],
	["Pauatahinui Golf Course", -41.079846, 174.926361],
	["PT Howard Association", -41.305087, 174.775252],
	["Pukerua Bay AED station", -41.037918, 174.885569],
	["Queen Elizabeth Park", -40.969892, 174.979385],
	["Readings Courtney", -41.292826, 174.779842],
	["Seatoun Surgery", -41.324614, 174.832007],
	["Southern Cross Bar", -41.296495, 174.774477],
	["Strait Shipping Offices", -41.282016, 174.777514],
	["Te Aro Health Centre", -41.295452, 174.777072],
	["Te Rauparaha Arena", -41.132302, 174.837852],
	["Te Whaea National Dance and Drama Centre", -41.308369, 174.77467],
	["Titahi Bay Golf Club", -41.106156, 174.838683],
	["Waikanae Charter Club", -40.875514, 175.066795],
	["Waimea Domain Toilets", -40.863840, 175.020627],
	["Wainuiomata Bowls Club", -41.263362, 174.947905],
	["Wainuiomata High School", -41.251572, 174.936484],
	["Wellington Bluebridge Passenger Terminal", -41.286460, 174.776236],
	["Wellington Indoor Sports", 43.190411, -71.527327],
	["Wellington Free Ambulance Headquarters", -41.286460, 174.776236],
	["Wellington Free Ambulance public access defibrillator", -41.256463, 174.914043],
	["Wellington Railway Station", -41.279313, 174.780163],
	["Wellington Zoo", -41.319543, 174.784643]

	]


	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 = {
	url: 'favicon.png',
	// This marker is 20 pixels wide by 32 pixels tall.
	size: new google.maps.Size(32, 32),
	// The origin for this image is 0,0.
	origin: new google.maps.Point(0,0),
	// The anchor for this image is the base of the flagpole at 0,32.
	anchor: 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 = {
	coords: [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,
	icon: image,
	shape: shape,
	title: beach[0],
	zIndex: beach[3]
	});
	}
	}

	google.maps.event.addDomListener(window, 'load', initialize);

	</script>
	</head>
	<body>
	<div id="map-canvas"></div>
	</body>
	</html>