Solved

Google Street View help

Posted on 2013-10-29
6
355 Views
Last Modified: 2013-11-10
Hi all,

We are trying to give a streetview option for our real estate/property site.

Now I have tried using the google code and its working for geolocating the map position, but unfortunately its not working with the street view (link below)

[link]
http://www.bear-lettings.co.uk/mapit.aspx?id=$$126$$&tp=st
[/link]

the code I am using is as follows;

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script type="text/javascript">
        var geocoder;
        var map;

        function getURLParameter(name) {
            return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null
        }

        function initialize() {

            var fenway = new google.maps.LatLng(42.345573, -71.098326);
            var mapOptions = {
                zoom: 16,
                center: fenway,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            var address = '<%= GetPropertyForAddress() %>';
            geocoder = new google.maps.Geocoder();

            if (getURLParameter("tp")==="st") {

                //var panoramaOptions = {
                //    position: fenway,
                //    pov: {
                //        heading: 34,
                //        pitch: 10
                //    }
                //};

                //map = new google.maps.StreetViewPanorama(document.getElementById('streetview-canvas'), panoramaOptions);

                geocoder.geocode({ 'address': address }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        map = new google.maps.StreetViewPanorama(document.getElementById("streetview_canvas"));
                        map.setPosition(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                            position: results[0].geometry.location,
                            map: map,
                            title: address
                        });
                    } else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                });

                document.getElementById('map-canvas').style.display = 'none';
            }
            else {

                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                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);
                    }
                });

                document.getElementById('streetview-canvas').style.display = 'none';
           }

                   

         
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

Open in new window


any ideas where I am going wrong please?
0
Comment
Question by:flynny
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
6 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39609073
I don't see anywhere that you are assigning the street view div to Google maps, just the map-canvas
0
 

Author Comment

by:flynny
ID: 39611213
Gary,

Thanks for the reply.

I'm not 100% sure what you mean?  

I planned to have a page that would handle both maps and street view. The code 'should' display dependent upon the query object (if mp then it will show the maps and if st it will show the street view).

It should then load the relevent map and then hide the maps div

 if (getURLParameter("tp")==="st") {

                //var panoramaOptions = {
                //    position: fenway,
                //    pov: {
                //        heading: 34,
                //        pitch: 10
                //    }
                //};

                //map = new google.maps.StreetViewPanorama(document.getElementById('streetview-canvas'), panoramaOptions);

                geocoder.geocode({ 'address': address }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        map = new google.maps.StreetViewPanorama(document.getElementById("streetview_canvas"));
                        map.setPosition(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                            position: results[0].geometry.location,
                            map: map,
                            title: address
                        });
                    } else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                });

                document.getElementById('map-canvas').style.display = 'none';
            }
            else {

Open in new window


am i Missing something obvious here?

thanks again for the reply.
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39622519
Use this as your code

var address = '42 Acre Street, Denton, Manchester, M34 2AL';

geocoder.geocode({ 'address': address }, function (results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
		address=results[0].geometry.location
		var panoramaOptions = {
			position: address,
			pov: {
				heading: 34,
				pitch: 10
			}
		};
		var panorama = new  google.maps.StreetViewPanorama(document.getElementById("streetview-canvas"),panoramaOptions);

	} else {
		alert("Geocode was not successful for the following reason: " + status);
	}
})

Open in new window

0
 

Author Closing Comment

by:flynny
ID: 39624227
Many thanks for the correct code I have altered this and its working now thank you.

What was it I was doing wrong here?
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question