Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Google Street View help

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

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.
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…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

610 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