Created
May 26, 2016 08:00
-
-
Save kaochenlong/defdcad84df6f9d481735cc33afe84f2 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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 { | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
} | |
#map { | |
height: 100%; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map"></div> | |
<script> | |
function initMap() { | |
var map = new google.maps.Map(document.getElementById('map'), { | |
zoom: 14, | |
center: {lat: 25.074629, lng: 121.478162} | |
}); | |
setMarkers(map); | |
} | |
var beaches = {{locations}}; | |
function setMarkers(map) { | |
var image = { | |
url: 'images/beachflag.png', | |
// This marker is 20 pixels wide by 32 pixels high. | |
size: new google.maps.Size(20, 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) | |
}; | |
var shape = { | |
coords: [1, 1, 1, 20, 18, 20, 18, 1], | |
type: 'poly' | |
}; | |
for (var i = 0; i < beaches.length; i++) { | |
var beach = beaches[i]; | |
var marker = new google.maps.Marker({ | |
position: {lat: beach[1], lng: beach[2]}, | |
map: map, | |
shape: shape, | |
title: beach[0], | |
zIndex: beach[3] | |
}); | |
} | |
} | |
</script> | |
<script async defer | |
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&signed_in=true&callback=initMap"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment