Skip to content

Instantly share code, notes, and snippets.

@full-stack-king

full-stack-king/Streetview_with_road_map_binded.html

Last active August 29, 2015 14:07
Show Gist options
  • Save full-stack-king/f20567bb65dbf8c7af28 to your computer and use it in GitHub Desktop.
Save full-stack-king/f20567bb65dbf8c7af28 to your computer and use it in GitHub Desktop.
Download ZIP
Displaying a road map on top of the street view and binding them
Raw
Streetview_with_road_map_binded.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Street View with Map</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), {
position: new google.maps.LatLng(42.345573,-71.098326),
visible: true
});
var map = new google.maps.Map(document.getElementById("map_canvas"), {
center: new google.maps.LatLng(42.345573,-71.098326),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true,
streetView: panorama
});
google.maps.event.addListener(panorama, "position_changed", function() {
map.setCenter(panorama.getPosition());
});
}
</script>
</head>
<body onload="initialize()">
<div style="position:absolute;">
<div id="pano" style="z-index:0; width: 800px; height: 600px;"></div>
<div id="map_canvas" style="z-index:1; position:absolute; right:0px; bottom:0px; width: 200px; height: 150px"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment