googlemaps-v3-utility-library
Version:
Google Maps API V3 Utility Library
63 lines (54 loc) • 2.23 kB
HTML
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>StyledMarker Example: Elevation Marker</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="../src/StyledMarker.js"></script>
<script type="text/javascript">
var styleIcon;
function initialize() {
var myLatLng = new google.maps.LatLng(37.313477473067, -121.880502070713);
var myOptions = {
zoom: 11,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
styleIcon = new StyledIcon(StyledIconTypes.BUBBLE,{color:"#cccccc",text:"Drag Me!"});
var styleMaker1 = new StyledMarker({styleIcon:styleIcon,position:new google.maps.LatLng(37.383477473067, -121.880502070713),map:map,draggable:true});
google.maps.event.addDomListener(styleMaker1,"dragend",getElevation);
}
function getElevation(event) {
var elevator = new google.maps.ElevationService();
var locations = [];
// Retrieve the clicked location and push it on the array
var clickedLocation = event.latLng;
locations.push(clickedLocation);
// Create a LocationElevationRequest object using the array's one value
var positionalRequest = {
'locations': locations
}
// Initiate the location request
if (elevator) {
elevator.getElevationForLocations(positionalRequest, function(results, status) {
if (status == google.maps.ElevationStatus.OK) {
// Retrieve the first result
if (results[0]) {
styleIcon.set("text","Elevation: " + results[0].elevation + "m");
} else {
alert("No results found");
}
} else {
alert("Elevation service failed due to: " + status);
}
});
}
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>