Custom streetview panrama on multiple marker InfoWindow

350 views

Skip to first unread message

Hossain Arif

unread,

Feb 23, 2011, 5:34:10 AM2/23/11

to google-map...@googlegroups.com

I want to display custom streetview panorama image on the popup InfoWindow of multiple markers. The panorama image displays properly for the first marker that I click. But the custom panorama does not display in the InfoWindow of the other markers. I'd appreciate help on this issue. The code I am using is as follows:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<title>Google Maps Custom Test: Markers, Info Window and StreetView</title>


<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

var map;
var count = 0;

function initialize() {

    // Create the map
    // No need to specify zoom and center as we fit the map further down.

    var centerLatlng = new google.maps.LatLng(23.704895, 90.406494);

    map = new google.maps.Map(document.getElementById("map_canvas"), {
    center: centerLatlng,
    zoom: 6,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: false
    });

    // Define the list of markers.
    // This could be generated server-side with a script creating the array.

    createMarker(18.57961, 89.384766);
    createMarker(23.925344, 90.398254);
    //createMarker(21.925344, 90.398254);

    // Zoom and center the map to fit the markers
    // This logic could be conbined with the marker creation.
    // Just keeping it separate for code clarity.
    //var bounds = new google.maps.LatLngBounds();

    //bounds.extend(myMarker.getPosition());

    //map.fitBounds(bounds);
}

function createMarker(lat, lon) {

    var myLatlng = new google.maps.LatLng(lat, lon);

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: "Custom StreetView"
    });

    // Create the infowindow with two DIV placeholders
      // One for a text string, the other for the StreetView panorama.
      var content = document.createElement("DIV");

      var title = document.createElement("DIV");
      title.innerHTML = 'Streetview Custom';
      content.appendChild(title);

      var streetview = document.createElement("DIV");
      streetview.style.width = "500px"; //"200px";
      streetview.style.height = "300px"; //"200px";
      content.appendChild(streetview);

      var infowindow = new google.maps.InfoWindow({
        content: content
      });

      // Open the infowindow on marker click
      google.maps.event.addListener(marker, "click", function() {
        infowindow.open(map, marker);
      });

    // --------------------------------------------------------------------
    // Set up Street View and initially set it visible. Register the
    // custom panorama provider function. Set the StreetView to display
    // the custom panorama 'reception' which we check for below.
    var panoOptions = {
    pano: 'reception',
    navigationControl: false,
      enableCloseButton: false,
      addressControl: false,
      linksControl: false,
    visible: true,
    panoProvider: getCustomPanorama
    }

      // Handle the DOM ready event to create the StreetView panorama
      // as it can only be created once the DIV inside the infowindow is loaded in the DOM.
      google.maps.event.addListenerOnce(infowindow, "domready", function() {
        var panorama = new google.maps.StreetViewPanorama(streetview, panoOptions);
      });
    //google.maps.event.addListener(infowindow, "domready", function() {
        //var panorama = new google.maps.StreetViewPanorama(streetview, panoOptions);
      //});


    return marker;
    }

// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama(pano,zoom,tileX,tileY) {

     switch(pano) {

      case 'reception':
        return {
          location: {
            pano: 'reception',
            description: "BRAC ICT Test"
          },
          links: [
            ],
          // The text for the copyright control.
          copyright: 'BRAC ICT',
          // The definition of the tiles for this panorama.
          tiles: {
            tileSize: new google.maps.Size(1024, 512),
            worldSize: new google.maps.Size(1024, 512),
            // The heading in degrees at the origin of the panorama
            // tile set.
            centerHeading: 105,
            getTileUrl: getCustomPanoramaTileUrl
          }
        };
        break;
    }
}

// Return a pano image given the panoID.
function getCustomPanoramaTileUrl(pano,zoom,tileX,tileY) {

    // Note: robust custom panorama methods would require tiled pano data.
    // Here we're just using a single tile, set to the tile size and equal
    // to the pano "world" size.
    var imagName = "";
    if(count>0){
        imagName = 'atelier1.jpg';
    } else {
        imagName = 'sydney.jpg';
    }
    count ++;
    return imagName;
}

</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

geoco...@gmail.com

unread,

Feb 23, 2011, 6:27:21 AM2/23/11

to Google Maps JavaScript API v3

On Feb 23, 5:34 am, Hossain Arif <hossain.a...@gmail.com> wrote:
> I want to display custom streetview panorama image on the popup InfoWindow
> of multiple markers. The panorama image displays properly for the first
> marker that I click. But the custom panorama does not display in the
> InfoWindow of the other markers. I'd appreciate help on this issue. The code
> I am using is as follows:
>

Can't debug a code listing.

Did you by any chance read this?
READ THIS FIRST: Posting Guidelines
http://groups.google.com/group/google-maps-js-api-v3/t/2b3f101fd509919e

-- Larry

Reply all

Reply to author

Forward

0 new messages