I am learning google maps API v3. I was able to put together this code. I tried to make it as simple as possible. It works...
The problem I am having is that the street view map is NOT pointing to the right direction/address. The right building is the yellow one on the corner (You'll need to scroll the street view to the left a few times).
When I use the very same cords in google maps, it points to the right building/address. My map's StreetView points to the opposite side/building.
My code uses LatLon stored in a mysql database, but for this exmaple, I am using a single point to make my case:
Google Map's code: street_view.js
//<![CDATA[
// ************************ Variables ************************
var infoWindow = new google.maps.InfoWindow();
//Map Options
var options = {
lat: 34.028339,
lon: -118.2881768,
zoom: 15,
type: 'roadmap',
tytle: "Address: 1256 W. 29th St. Los Angeles, CA 90007",
html: '<div class="tooltip"><span>Address</span>: 1256 W. 29th St. Los Angeles, CA 90007<\/div>',
icons: {
red: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
blue: 'http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
shadow: 'http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png'
}
};
// ************************ Functions ************************
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
//marker.openInfoWindowHtml(html);
infoWindow.getContent();marker.openInfoWindowTabsHtml(infoTabs);
});
}
function googleMaps()
{
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng( options.lat , options.lon ),
zoom: options.zoom,
mapTypeId: options.type
});
var marker = new google.maps.Marker({
map: map,
position: map.getCenter(),
title: options.title,
icon: options.icons.blue,
shadow: options.icons.shadow
});
bindInfoWindow(marker, map, infoWindow, options.html);
map.StreetView = new google.maps.StreetViewPanorama(document.getElementById("map_StreetView"), {
position: map.getCenter(),
zoom: 1
});
//map.setStreetView(map.StreetView); //This line adds a street view icon to the roadmap and binds it together with streetView
} //end of load()
// ************************ Load ************************
//Call googleMaps after document is loaded
google.maps.event.addDomListener(window, 'load', function(){
googleMaps();
//you can add more code here
});
//]]>
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $map['address']?></title>
<!-- START: Google Maps API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.mydomain.com/_api/google/maps/v3/street_view.js"></script>
<!-- __END: Google Maps API -->
</head>
<body>
<div id="map-container" >
<div id="map_StreetView" style="width: 350px; height: 250px"></div><br/>
<div id="map" style="width: 350px; height: 250px"></div>
</div>
</body>
</html>
PS. I tried to give you a jsFiddle, but for whatever reason it is not showing a map...? http://jsfiddle.net/EdsB6/
First, the camera position is set with the pov option when initializing the StreetViewPanorama.
map.StreetView = new google.maps.StreetViewPanorama
(document.getElementById("map_StreetView"), {
position: map.getCenter(),
pov: { heading: 135, pitch: 0, zoom: 1 }
});
The updated JS Fiddle: http://jsfiddle.net/EdsB6/2/
For more information, read the docs on StreetView
https://developers.google.com/maps/documentation/javascript/streetview
About the second question, geocoding is what you need. (Unfortunately, no, there's no "easy", one-line method of using an address with the API). If you're repeatedly querying the same place, it's best to do it once and save the LatLngs. Read here:
https://developers.google.com/maps/documentation/javascript/geocoding
This answer shows how to convert an address to a LatLng, in fact it's an array but each address is converted one by one.
https://stackoverflow.com/a/10743457/1325290
function codeAddress(address, callback) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
callback(results[0].geometry.location);
}
});
}
function initialize() {
codeAddress("Chicago, IL", function(default_location) {
var map = new google.maps.Map(document.getElementById("map_canvas"),
{ center: default_location,
zoom: 3, mapTypeId: google.maps.MapTypeId.ROADMAP });
locations = ["Los Angeles", "Davis", "Truth or Consequences",
"Ann Arbor", "Massachusetts"];
for (var i = 0; i < locations.length; i++) {
codeAddress(locations[i], function(latLng) {
new google.maps.Marker({map:map, position:latLng});
});
}
});
}