Solved

Google Street View help

Posted on 2013-10-29
6
353 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
  • 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

What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Jquery 10 20
Hide cell in a table 2 14
Logic behind "best rated" calculation 11 22
how can i get the sole odd and th sole even 2 14
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
This guide will walk you through the essential considerations and tech stack for building scalable websites. Know how to grow your business the smart way!
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

777 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