Google Maps : auto-centrer la carte sur un marqueur, cliquez

J'aurais besoin d'un peu d'aide sur une carte, je suis en train de travailler sur. La carte n'est pas particulièrement complexe, car je suis un débutant, j'ai un tas de marqueurs (ce qui aura plus d'une fois fini) avec infowindows qui peut être ouvert en cliquant sur les marqueurs ou lors de la sélection d'un élément d'un menu déroulant sur le HTML de la page.

Ce que je voudrais faire et n'arrive pas à trouver par moi-même est de centrer automatiquement le marqueur sur la carte lors de l'infowindow s'ouvre (cliquez sur ou sélectionnez dans le menu HTML). Je suppose qu'il ya une sorte de fonction à affecter à la ou cliquez sur l'infowindow l'ouverture de l'événement, mais ne peuvent pas comprendre qui et comment la mettre en œuvre.

Mon code :

function initialize() {
var CarteStyles = [
{
featureType: "all",
stylers: [
{ saturation: -50 }
]
},
{
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "road",
stylers: [
{ visibility: "simplified" },
{ saturation: -90 }
]
},
{
featureType: "road.local",
"stylers": [
{ "color": "#dbdbd4" }
]
},
{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off"}
]
},
{
featureType: "poi",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "poi.park",
stylers: [
{ visibility: "on" }
]
},
{
featureType: "poi.park",
elementType: "labels",
stylers: [
{ visibility: "off"}
]
}
];
var CarteType = new google.maps.StyledMapType(CarteStyles,
{name: "Carte"});
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(48.872769, 2.30488),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP,google.maps.MapTypeId.SATELLITE,'Carte'],
position: google.maps.ControlPosition.TOP_LEFT,
style: google.maps.MapTypeControlStyle.DEFAULT
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
map.mapTypes.set('Carte', CarteType);
map.setMapTypeId('Carte');
<!--START Hpr-->        
var contentStringHpr = '<div id="content">'+
'<h2 id="firstHeading" class="firstHeading">HPR</h2>'+
'<div id="bodyContent">'+
'<p>Descr</p>'+
'<p><a href="#">Plus d\'informations</a></p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentStringHpr
});
var HprMarker = new google.maps.Marker({
position: new google.maps.LatLng(48.856682, 2.3274526),
map: map,
icon: new google.maps.MarkerImage('icon_hpr.png'),
title:"HPR",
zIndex: 3});
<!--STOP Hpr-->
<!--START Cal-->        
var contentStringCal = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">CAL</h2>'+
'<div id="bodyContent">'+
'<p>descr</p>'+
'<p><a href="#">Plus d\'informations</a></p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentStringCal
});
var CalImage = new google.maps.MarkerImage('icon_cal.png'
);
var CalPos = new google.maps.LatLng(48.872769, 2.30488);
var CalMarker = new google.maps.Marker({
position: CalPos,
map: map,
icon: CalImage,
title:"Cal",
zIndex: 3});
<!--STOP Cal-->
<!--START Rsh-->        
var contentStringRsh = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">RSH</h2>'+
'<div id="bodyContent">'+
'<p>descr</p>'+
'<p><a href="#">Plus d\'informations</a></p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentStringRsh
});
var RshImage = new google.maps.MarkerImage('icon_rsh.png'
);
var RshPos = new google.maps.LatLng(48.865862, 2.329943);
var RshMarker = new google.maps.Marker({
position: RshPos,
map: map,
icon: RshImage,
title:"RSH",
zIndex: 3});
<!--STOP Rsh-->
<!--START Rh-->     
var contentStringRh = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">RH</h2>'+
'<div id="bodyContent">'+
'<p>descr</p>'+
'<p><a href="#">Plus d\'informations</a></p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentStringRh
});
var RhImage = new google.maps.MarkerImage('icon_rh.png'
);
var RhPos = new google.maps.LatLng(48.874140, 2.300144);
var RhMarker = new google.maps.Marker({
position: RhPos,
map: map,
icon: RhImage,
title:"RH",
zIndex: 3});
<!--STOP Rh-->
<!--START Rdr-->        
var contentStringRdr = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">RDR</h2>'+
'<div id="bodyContent">'+
'<p>descr</p>'+
'<p><a href="#">Plus d\'informations</a></p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentStringRdr
});
var RdrImage = new google.maps.MarkerImage('icon_rdr.png'
);
var RdrPos = new google.maps.LatLng(48.865717, 2.308944);
var RdrMarker = new google.maps.Marker({
position: RdrPos,
map: map,
icon: RdrImage,
title:"RDR",
zIndex: 3});
<!--STOP Rh-->
<!--START Boutique1-->      
var contentStringBoutique1 = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Boutique1</h2>'+
'<div id="bodyContent">'+
'<p>descr</p>'+
'<p><a href="#">Plus d\'informations</a></p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentStringBoutique1
});
var Boutique1Image = new google.maps.MarkerImage('icon_bags_2.png'
);
var Boutique1Pos = new google.maps.LatLng(48.87, 2.31);
var Boutique1Marker = new google.maps.Marker({
position: Boutique1Pos,
map: map,
icon: Boutique1Image,
title:"Boutique1",
zIndex: 3});
<!--STOP Boutique1-->
<!--START Place1-->     
var contentStringPlace1 = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Place1</h2>'+
'<div id="bodyContent">'+
'<p>descr</p>'+
'<p><a href="#">Plus d\'informations</a></p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentStringPlace1
});
var Place1Image = new google.maps.MarkerImage('icon_place_arc.png'
);
var Place1Pos = new google.maps.LatLng(48.873836,2.295037);
var Place1Marker = new google.maps.Marker({
position: Place1Pos,
map: map,
icon: Place1Image,
title:"Place1",
zIndex: 3});
<!--STOP Place1-->
google.maps.event.addListener(HprMarker, 'click', function() {
infowindow.setContent(contentStringHpr);
infowindow.open(map,HprMarker);
});
google.maps.event.addListener(CalMarker, 'click', function() {
infowindow.setContent(contentStringCal);
infowindow.open(map,CalMarker);
});
google.maps.event.addListener(RshMarker, 'click', function() {
infowindow.setContent(contentStringRsh);
infowindow.open(map,RshMarker);
});
google.maps.event.addListener(RhMarker, 'click', function() {
infowindow.setContent(contentStringRh);
infowindow.open(map,RhMarker);
});
google.maps.event.addListener(RdrMarker, 'click', function() {
infowindow.setContent(contentStringRdr);
infowindow.open(map,RdrMarker);
});
google.maps.event.addListener(Boutique1Marker, 'click', function() {
infowindow.setContent(contentStringBoutique1);
infowindow.open(map,Boutique1Marker);
});
google.maps.event.addListener(Place1Marker, 'click', function() {
infowindow.setContent(contentStringPlace1);
infowindow.open(map,Place1Marker);
});
var selectChoices = {
Boutique1Choice: Boutique1Marker,
Place1Choice: Place1Marker,
CalChoice: CalMarker,
RshChoice: RshMarker,
RhChoice: RhMarker,
RdrChoice: RdrMarker,
HprChoice: HprMarker
};
google.maps.event.addDomListener(
document.getElementById("selectLocation"), 'change',
function() {
google.maps.event.trigger(selectChoices[this.value], "click");
});
google.maps.event.addDomListener(
document.getElementById("selectLocation2"), 'change',
function() {
google.maps.event.trigger(selectChoices[this.value], "click");
});
google.maps.event.addDomListener(
document.getElementById("selectLocation3"), 'change',
function() {
google.maps.event.trigger(selectChoices[this.value], "click");
});
google.maps.event.addDomListener(
document.getElementById("selectLocation4"), 'change',
function() {
google.maps.event.trigger(selectChoices[this.value], "click");
});
}

OriginalL'auteur Tsokoa | 2012-09-07