Google Maps API v3: Control the direction of a street view and use address instead of lat/lon

Question

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.

Is there a way to control the direction a streetView map will point to, within the given cords? -North/South/West...etc.
Also, is it possible to just use an address, and have google api figure the latLong? -It's not efficient to figure out and find the right coords for over 300 addresses and increasing >_<

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/

I fixed your jsfiddle, the , and tags were deleted. Now let me see if I can really help you with the question http://jsfiddle.net/EdsB6/1/ — Tina CG Hoehr, May 24 '12 at 22:02
@lilina Great! This address belongs to the yellow building; the one on the corner (You'll need to scroll the street view to the left a few times) — Omar, May 24 '12 at 22:11

score 2 · Accepted Answer · edited May 23 '17 at 11:49

2

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});
        });
      }
    });
  }

edited May 23 '17 at 11:49

Community

1
1

answered May 24 '12 at 22:20

Tina CG Hoehr

6,721
6
44
57

Before I read the documentation about camera position...will I have to a camera position setting for each address? – Omar May 24 '12 at 22:25
Good question, I think the answer is yes, different settings for different locations :( How else will the script know you want to point at the yellow building and not at the garage door? The LatLngs don't have this information. – Tina CG Hoehr May 24 '12 at 22:26
@liliana I figure that will be the answer. I guess I'll have to add a few more fields to the map table in mysql. – Omar May 24 '12 at 22:38
I'm curious if it's just a coincidence the maps.google.com pointed at the right building. Does it do that for your other buildings? Is it smarter than I think? – Tina CG Hoehr May 24 '12 at 22:44
@liliana Now, about geocoding. This website has real state information with multiple addresses, hence a LIVE database with over 300 addresses (Which it's count of addresses keeps increasing). The way I see it, it would be more effective to program the api to geocode the address and then use that latlong to draw the map, rather than saving the lat & lng info. As to how often the same address is queried, I do not know; that would depend on the users habits. On what criteria should I make an assessment as to what method to use; to save the LatLngs or to simply geocode the addresses? – Omar May 24 '12 at 22:50
Q: ("I'm curious if it's just a coincidence...") A: I spent hours trying to came up with latlng's for about 50 addresses. All of these latlng's point to the right building IN the google maps website. HOWEVER, the very same set of latlng's, in MY map, sometimes pointed to the right building and sometimes did not >_< This fact just added to my frustration. – Omar May 24 '12 at 22:58
So maps.google.com really is smarter than the API. I think I understand now, you're giving maps.google.com a street number, which it knows what side of the street it's on. The API only returns a LatLng coordinate, and defaults pointing the camera north. But you really need the heading also (for the pov variable). Maybe there's a trick I don't know about. For saving LatLng or running the geocode, the official docs recommend saving the LatLng. It's faster, doesn't use up the quota, and the building isn't going anywhere. – Tina CG Hoehr May 24 '12 at 23:05
@Omar I think I found the trick :) http://stackoverflow.com/questions/7068365/getting-the-pov-for-google-streetview-api I haven't tried it yet, but take a look. – Tina CG Hoehr May 24 '12 at 23:08
When you type an address in google maps, google uses the number portion of the address to tell on what direction to face the camera (That is my hypothesis). The golden question is, what about when you only use latlng for a search instead of an address? The links to documentations you shared with me lead me to this site http://gmaps-samples-v3.googlecode.com/svn/trunk/geocoder/v3-geocoder-tool.html. Could it be that the viewport info this website provides is what is needed? -FYI: I have no idea what viewport is for; remember that I am still learning how to use google maps api – Omar May 24 '12 at 23:23
I just finished implementing the answer for moving the camera :) Try using a different address/latlng http://jsfiddle.net/EdsB6/6/ The trick as was explained is finding the nearest car/camera to the given LatLng and computing the angle. About the geocoder link, the viewport appears to be that large rectangle, I don't know for sure either. – Tina CG Hoehr May 24 '12 at 23:24
Here is another example, the for 1152 West 36th Place, geocoder gave me (34.021868, -118.29322300000001). Google maps points to the right direction, but not my map. So, for what I understand, I'll need to find the nearest car/camera for this new latlng right? – Omar May 24 '12 at 23:54
I wonder what is google map's website using to always point to the right direction without any extra info...it does it with latlng alone – Omar May 24 '12 at 23:55
My hypothesis is, there must be something some function(s) google maps is using to get it right with just latlng. After all, the address's latlng was geocoded with google tools. – Omar May 24 '12 at 23:59
1

Yes, what I copied from the other answer is more of a hack. I changed one of the variables, `streetViewMaxDistance`, and it works in both LatLngs you gave me. http://jsfiddle.net/EdsB6/7/ But I don't really trust this solution anymore. – Tina CG Hoehr May 25 '12 at 00:04
Why do you not trust this solution? -Please, give me a day to test this new code against the addresses I geocoded. Do you want to open up a chat? – Omar May 25 '12 at 00:36
Sorry, if I am unclear, I don't mean I don't trust your solution, I mean I don't really trust the answer in this other link because the maxDistance variable appears to be random. http://stackoverflow.com/questions/7068365/getting-the-pov-for-google-streetview-api – Tina CG Hoehr May 25 '12 at 00:40
please join this chat: http://chat.stackoverflow.com/rooms/11723/chatroom-for-question-google-maps-api-v3-control-the-direction-of-a-street-view – Omar May 25 '12 at 04:47
1

I found documentation for the function. It said values under 50 will return the closest one, so leaving the max distance at 30 should be ideal – Tina CG Hoehr May 25 '12 at 22:14

Google Maps API v3: Control the direction of a street view and use address instead of lat/lon

1 Answers1