CODEWITHSUNDEEP
google-maps-api-3
Roshan Gautam
Roshan Gautam

Reputation: 5450

Google Custom Streetview Panorama with custom imagemap type Map without georeferencing

I am developing a custom imagemap type map without geo referencing i.e. latlng of my map do not relate to acutal latlng of that place. Now i have also created custom streetview panoramas of certain buildings and places in that map.

The issue is am not able to integrate those custom streetview panoramas with my custom imagemap.

Following is the link to see whats going on:

http://cdi.astateweb.org/virtual_tour/

First Approach: There are two markers on the map right now. When you click on them a small infobubble pops up. Now when you click on the virtual tour link a dialog comes up. I want to load the custom streetview panorama in that dialog. I tried several things but to no avail. I am trying to reuse the same dialog for both markers. I tried initializing the panorama in jquery ui dialog open function. It worked for the first one but when you close the dialog and open it again it fails with some cbk error from google apis.

SECOND APPROACH: I tried to use the default streetview pegman such that when the pegman is dropped on a certain building or place which has a panorama the streetview comes up just like in normal google maps. This didn't work either.

Can somebody point me to the right direction. Any help will be highly appreciated.

Thanks

Upvotes: 0

Views: 777

Answers (1)

wf9a5m75
wf9a5m75

Reputation: 6158

Ok, try like this:

Change at line 41

from
'<a href="#" id="virtual-tour" data="delta">Virtual Tour</a>'
to
'<a href="#" id="virtual-tour" data="arch">Virtual Tour</a>'

Change at line 96

    $("#dialog").dialog({
        autoOpen: false,
        width: 650,
        open: function() {
          console.log($("#" + virtualTour.currentPano));
          $("#" + virtualTour.currentPano).appendTo("#dialog").css("display", "block");
        },
        close: function() {
          $("#" + virtualTour.currentPano).appendTo("body").css("display", "none");
        }

    });

And the below code to add into "createMarker" function.

    //After this line.
    virtualTour.hotspotArray.push(marker);      

    //Add this code.
    setTimeout(function(){
      document.getElementById(pano).style.display = "none";
    }, 100);

enter image description here

Upvotes: 1

Related Questions