Google Map: Streetview i infoboks

[Dan-Levi]

Hei,

 

Jeg sliter litt med å putte streetview inn i infoboksen.

 

Her er koden jeg har skrevet så langt (det er en del php her).

	<script src="js/jquery-1.11.0.js"></script>
	<script src="js/bootstrap.js"></script>
    <?php
    // Sjekk om databasetilkoblingen er til stede
    if ($check) {
    ?>
	<script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAx0ojAMigTWWS11JhAmxC_ZdLa-Ckt0lE&sensor=false">
    </script>
	<script>
		function initialise() {

			// Sett latlong i midten av Norge ca.
			var myLatlng = new google.maps.LatLng(65.242620,13.315430); // Add the coordinates
			var mapOptions = {
				zoom: 5, // The initial zoom level when your map loads (0-20)
				minZoom: 2, // Minimum zoom level allowed (0-20)
				maxZoom: 17, // Maximum soom level allowed (0-20)
				zoomControl:false, // Set to true if using zoomControlOptions below, or false to remove all zoom controls.
				zoomControlOptions: {
	  				style:google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons.
				},
				center: myLatlng, // Centre the Map to our coordinates variable
				mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
				scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)
				// All of the below are set to true by default, so simply remove if set to true:
				panControl:false, // Set to false to disable
				mapTypeControl:false, // Disable Map/Satellite switch
				scaleControl:false, // Set to false to hide scale
				streetViewControl:false, // Set to disable to hide street view
				overviewMapControl:false, // Set to false to remove overview control
				rotateControl:false // Set to false to disable rotate control
		  	}
			var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // Render our map within the empty div
			var infowindow = new google.maps.InfoWindow();

			<?php
			// Hent alle bomstasjoner
			$r = Database::getInstance()->get('bomstasjoner',array('1','=','1'));
			if ($r->results()) {
				// For å begrense antall rader (debugging)
				$x = 0;
				foreach ($r->results() as $data) {
					// Sett infoboksen, trim og regex for at alle linjeskift og overflødige mellomrom skal renskes vekk, JavaScript liker ikke
					$infoWindow = trim(preg_replace('/\s\s+/', ' ', '
					<h3>'.$data->navn.'</h3>
					<strong>Autopass: </strong>'.$data->autopass_beskrivelse.'
					<br>
					<strong>Vegnr: </strong>'.$data->vegnr.'
					<br>
					<strong>Takst liten bil: </strong>kr. '.$data->takst_liten_bil.',-
					<br>
					<strong>Takst stor bil: </strong>kr. '.$data->takst_stor_bil.',-
					<br>
					<div id="view-streetview"></div>
					'));
					?>
					//Tilegne id fra database til hver eneste marker
					var marker<?php echo $data->id; ?> = new google.maps.Marker({ // Set the marker
						// Posisjoner med latlong fra database
						position: new google.maps.LatLng(<?php echo $data->latitude.','.$data->longitude; ?>), // Position marker to coordinates
						map: map, // assign the market to our map variable
						// Vegnummer og navn på bomstasjon
						title: '<?php echo $data->vegnr." - ".$data->navn; ?>' // Marker ALT Text
					});

					// Klikk på marker
					google.maps.event.addListener(marker<?php echo $data->id; ?>, 'click', function() { // Add a Click Listener to our marker
						// Steng infoboksen hvis den er åpnet
						infowindow.close();
						// Sett infoen
						infowindow.setContent('<?php echo $infoWindow; ?>');
			  			infowindow.open(map,marker<?php echo $data->id; ?>); // Open our InfoWindow
			  			// sett streetview latlong til gjeldene marker
						var panoramaOptions = {
							position: new google.maps.LatLng(<?php echo $data->latitude.','.$data->longitude; ?>),
						};
						// Putt streetview inn i infoboksen (FUNGERER IKKE)
						var panorama = new google.maps.StreetViewPanorama(document.getElementById('view-streetview'),panoramaOptions);
						map.setStreetView(panorama);
			  		});
					<?php
					$x++;
					/*if ($x == 50) {
						break;
					}*/
				}
			}
			?>
			google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(myLatlng); }); // Keeps the Pin Central when resizing the browser on responsive sites
		}
		google.maps.event.addDomListener(window, 'load', initialise); // Execute our 'initialise' function once the page has loaded. 
	</script>
    <?php
    }
    ?>
	</body>
</html>

Her er CSS:

html { height: 100%; }
body { height: 100%; margin: 0px; padding: 0px }
#map-canvas { width: 1000px; height: 800px; }
#view-streetview { width: 100px; height:100px;}

Under panseret kjører Bootstrap og jQuery.

 

Noen som klarer å se hvorfor dette ikke fungerer?

Om jeg skriver noe inn i div'en i infoboksen så kommer det frem, setter jeg streetview til å bruke div med id map-canvas fungerer det.

 

Skjønner ikke hvorfor den ikke vil..

 

All hjelp taes i mot med stor takk!