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
Vous devez vous connecter pour publier un commentaire.
Vous êtes déjà à l'aide de gestionnaire de clic sur vos repères, vous avez juste besoin d'ajouter une ligne au centre de la carte sur le marqueur:
Je sais que c'est une assez vieille solution, mais Dan, en réponse à l'utilisation de la carte.panTo() est un plus esthétique effet, comme il ne s'agit pas instantanément à la nouveau centre. Bien sûr, dépend de ce que vous cherchez.
OriginalL'auteur Michal Klouda
Un peu plus agréable (visuellement) est d'utiliser le panTo plutôt que setCenter, comme ceci:
De cette re-centres, mais il s'anime plutôt que de sauter.
OriginalL'auteur Dan
Auto centrage de la carte sur le marqueur de clic peut être fait avec ce code:
OriginalL'auteur Anup