Adding a streetview Map
We used the code to create a streetview map on our first project, and wanted to share the code on how easy it is to get a streetview map, courtesy of Google Maps, into your wordpress site. Create a new .html file. Just juse Notepad, it is easy.
Paste the code below:
Streetview Mashup
div id=”map_canvas” style=”width: 330px; height: 240px; float: left;”
<script src=”http://maps.google.com/maps/api/js?sensor=false” type=”text/javascript”></script>
<script type=”text/javascript”>// <![CDATA[
var myLatlng = new google.maps.LatLng(53.139946,-3.795770);
var panoramaOptions = {
position:myLatlng,
pov: {
heading: 165,
pitch:0,
zoom:1
}
};
var myPano = new google.maps.StreetViewPanorama(document.getElementById("map_canvas"), panoramaOptions);
myPano.setVisible(true);
var marker = new google.maps.Marker({
position: myLatlng,
map: myPano,
title:"Taken the call out"
});
// ]]></script>
/div
Change the Bold
- Streetview Mashup : Change title and add styling H2, 3, 4 etc, just add css.
- Div ID : Change the CSS, not the name of file
- Long Lat: Change to your desired location
- Heading, Pitch, Zoom: Your own choice
- Taken the call out – Your title, or add php echo to database
Save this file now as yourchoice.html
FTP the html file to your root folder.
Use an iframe to ”call” the html page into your wordpress website.
That is as complicated as it gets really. As we have used this same map in conjunction with the multiple marker map, we already have the geocoded data for the map to work without an api key. If you are going to use the geocoding aspect and call the long and lat from your database, you will need an api key.
You can also use a php echo function to call the different long lat data from your database.
