View this example full screen.
function initialize() { var myLatlng = new google.maps.LatLng(42.3726399, -71.1096528); var mapOptions = { zoom: 14, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map( document.getElementById('map-canvas'), mapOptions); var bikeLayer = new google.maps.BicyclingLayer(); bikeLayer.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize);
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Bicycling layer</title> <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> function initialize() { var myLatlng = new google.maps.LatLng(42.3726399, -71.1096528); var mapOptions = { zoom: 14, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map( document.getElementById('map-canvas'), mapOptions); var bikeLayer = new google.maps.BicyclingLayer(); bikeLayer.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>