var elevator, map, polyline, crowders = new google.maps.LatLng(35.2083, -81.3108), spencer = new google.maps.LatLng(35.2582, -81.1137), charlotte = new google.maps.LatLng(35.2302, -80.8528); $(window).load(function() { var myOptions = { zoom: 10, center: spencer, mapTypeId: 'terrain' }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); elevator = new google.maps.ElevationService(); drawPath(); }); function drawPath() { var path = [ crowders, spencer, charlotte ], pathRequest = { 'path': path, 'samples': 100 }; elevator.getElevationAlongPath(pathRequest, plotElevation); } function plotElevation(results, status) { if (status == google.maps.ElevationStatus.OK) { var elevations = results, eleIcons = [], elevationPath = []; // The magic beans for (var i = 0; i < results.length; i++) { elevationPath.push(elevations[i].location); var theIcon = { path: 'M 0,1 0,' + (elevations[i].elevation * 0.10), strokeColor: "red", rotation: 180, strokeWeight: 4, strokeOpacity: 0.8, scale: 1 }; var theShadow = { path: 'M 0,6 0,' + (elevations[i].elevation * 0.05), strokeColor: "#000000", rotation: 330, strokeWeight: 8, strokeOpacity: 0.2, scale: 1 }; eleIcons.push({ icon: theShadow, offset: i + "%" }); eleIcons.push({ icon: theIcon, offset: i + "%" }); } var pathOptions = { path: elevationPath, strokeColor: '#0000CC', strokeWeight: 5, icons: eleIcons, map: map }; polyline = new google.maps.Polyline(pathOptions); } }
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script> <div id="map_canvas"></div>
#map_canvas { width:640px; height:400px; border: 1px solid black; }