?
Solved

Google Street View help

Posted on 2013-10-29
6
Medium Priority
?
357 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 2000 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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

770 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