Solved

Google Street View help

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
PHP and Soap 3 28
Install MySQL 5.6 and PHP on Centos Linux 6 51
Phone Dialer 5 36
XML Data Missing in PHP SimpleXML 8 22
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
The viewer will learn how to dynamically set the form action using jQuery.

705 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now