Télécharger le code : Insérer un Streetview dans une infobulle
Dans cet exemple, un streetview est inséré dans une infobulle et mis à jour lorsque le marqueur est déplacé.
Carte
Code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8"/>
<title>Votre titre de page</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#maCarte{ height: 500px; width: 100%; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.votredomaine.fr/js/gmap3.js"></script>
<script type="text/javascript">
$(function(){
var panorama = {
p: null,
marker: null,
infowindow: null,
map: null,
unset: function(){
if (this.p){
this.p.unbind("position");
this.p.setVisible(false);
}
this.p = null;
this.marker = null;
},
setMap: function(map){
this.map = map;
},
setMarker: function(marker){
this.marker = marker;
},
setInfowindow: function(infowindow){
this.infowindow = infowindow;
},
open: function(){
this.infowindow.open(this.map, this.marker);
},
run: function(id){
if (!this.marker) return;
this.p = new google.maps.StreetViewPanorama(document.getElementById(id), {
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
enableCloseButton: false,
addressControl: false,
linksControl: false
});
this.p.bindTo("position", this.marker);
this.p.setVisible(true);
}
};
var center = [-33.866943,151.195512];
$('#maCarte').gmap3(
{
action:'init',
options:{
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
center: center
},
callback: function(map){
panorama.setMap(map);
}
},
{
action: 'addMarker',
latLng: center,
marker:{
options:{
title: 'Click me !',
draggable: true
},
callback: function(marker){
panorama.setMarker(marker);
},
events:{
click: function(){
panorama.open();
}
}
},
infowindow:{
options:{
content: '<div id="content" style="width:300px;height:250px;"></div>'
},
callback: function(infowindow){
panorama.setInfowindow(infowindow);
},
events:{
domready: function(){
panorama.run('content');
},
closeclick: function(){
panorama.unset();
}
}
}
}
);
});
</script>
</head>
<body>
<div id="maCarte"></div>
</body>
</html>