27 Apr, 2009
Code to embed Google Map and Street View
Web Development » Google, Snippets, Tutorials » Code to embed Google Map and Street View
You will need to sign up for the Google Maps API key and replace “INSERT_API_KEY_HERE” with your API key.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Google Map and Street View</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=INSERT_API_KEY_HERE" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var lat = -33.867141;
var lng = 151.207114;
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(lat,lng), 15);
var infoTabs = [
new GInfoWindowTab("Address", "Sydney<br /> NSW, Australia"),
];
// Place a marker in the center of the map and open the info window
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs);
});
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);
var point = new GLatLng(lat,lng);
panoramaOptions = { latlng:point };
pano = new GStreetviewPanorama(document.getElementById("streetview"), panoramaOptions);
GEvent.addListener(pano);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<h3>Google Map</h3>
<div id="map" style="width: 500px; height: 400px"></div>
<h3>Street View</h3>
<div id="streetview" style="width: 500px; height: 400px"></div>
</body>
</html>
