CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
user1413729
user1413729

Reputation: 21

Google MAP API V3 - Street View

I am trying to integrate the Google maps V3 API into our website. I need to read the address and set it to the MAP API so that map will show the street view for that address.

So I need help in 3 points.

  1. How to read the address values.

    Example: var streetAddressArray = getElementsByAttribute(parent.document.forms[0], "*", "smokeid", "Address Line 1"); (I am not sure what this function will do, just pasting to give an idea on what exactly I am looking for.)

  2. After reading the value set to the API classes/methods so that map can show the street view.

  3. Show it as a street view.

This is similar to what I am looking for:

I am very thankful for your response Suvi! Here is my Program:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">      html { height: 100% }      body { height: 100%; margin: 0; padding: 0 }      #map_canvas { height: 100% }    </style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=KEY_VALUE &sensor=true">
</script>    
<script type="text/javascript">     
  function initialize() {  
    
   var fenway = new google.maps.LatLng(42.345573,-71.098326);
   var mapOptions = {
     center: fenway,
     zoom: 14,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   var map = new google.maps.Map(
   document.getElementById("map_canvas"), mapOptions);
   var panoramaOptions = {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10,
        zoom: 1
      }
    };
    var panorama = new  google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
   map.setStreetView(panorama);
                
  }    
</script> 
</head>  
<body onload="initialize()"> 
<div id="map_canvas" style="width:100%; height:100%">
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
</div>
</body>
</html>

I am facing two issues with this,

  1. Somehow I am not able to view Panorama view. Any issue with my code?
  2. Address for map should come from bunch input fields( address line 1 and City and Zip etc). How can I assign the input fields address to the map so that map will show directly that particular location?

I am using a custom product. I have another example in that they are using:

var streetAddressArray = getElementsByAttribute(parent.document.forms[0], "*", "smokeid", "LossLocation_Address1");

I guess I am little closer to the target, But my this example is not working, it not rendering anything.

<!DOCTYPE html><html>  <head>    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />    <style type="text/css">      html { height: 100% }      body { height: 100%; margin: 0; padding: 0 }      #map_canvas { height: 100% }    </style>    <script type="text/javascript"    
  src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBweQln0Jf5uBWvkTGSkv8AfkBdt-zZ3dE&sensor=true">    </script>    
<script type="text/javascript">     
  
  <!-- -->
  
  var geocoder;  
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {      zoom: 8,      center: latlng,      mapTypeId: google.maps.MapTypeId.ROADMAP    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    } 
  function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location});
       } 
        else 
       {
        alert("Geocode was not successful for the following reason: " + status);
       }   
      });
     }
 <body onload="initialize()">
 <div id="map_canvas" style="width: 320px; height: 480px;">
 </div>  
<div> 
   <input id="address" type="textbox" value="Sydney, NSW">
   <input type="button" value="Encode" onclick="codeAddress()">
</div>
</body>
  <!-- -->
</html>

Can you help me what went wrong?

Upvotes: 2

Views: 9322

Answers (2)

Suvi Vignarajah
Suvi Vignarajah

Reputation: 5788

Answers to your 2 issues:

  1. Somehow I am not able to view Panorama view. Any issue with my code?

This is happening because the closing </div> to your map_canvas is enclosing the pano as well. It should come directly after the div for the map_canvas, like so:

<body onload="initialize()"> 
<div id="map_canvas" style="width:100%; height:100%"></div>
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div> 
</body>

Also, make sure you include your API key in the header where you include the google maps api script tag.

Regarding your second question, you can do this in variety of ways. The easiest would be to use input text fields and use jquery's .val() function to get the values in the text fields. Then pass the values to the geocoder to perform your searches.

Useful resources:

https://developers.google.com/maps/documentation/javascript/geocoding

http://api.jquery.com/val/

Upvotes: 1

Suvi Vignarajah
Suvi Vignarajah

Reputation: 5788

You'll need to first initialize StreetView (either in place of or bound to your map), see the StreetView documentation for setting it up (https://developers.google.com/maps/documentation/javascript/streetview). You well then need to use the Geocode service from google to find addresses. This document (https://developers.google.com/maps/documentation/javascript/geocoding) will help you set up a simple Search for addresses, but you'll have to tweak it a little so that it renders the search on your streetview map. Essentially you'll have to change:

geocoder.geocode( { 'address': address}, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
  map.setCenter(results[0].geometry.location);
 }

Instead of map.setCenter, you'll need to set the location to panorama.setPosition(results[0].geometry.location);

Keep in mind that the point of view of streetview might not always be positioned to point at the building you want, I don't think Google has a way of telling exactly which side of the street the building/location you're searching for will be.

Hope that helps.

Upvotes: 1

Related Questions