I would need some help on a map I'm working on. The map isn't particularly complex since I'm a beginner, I have a bunch of markers (will have more once finished) with infowindows that can be opened when clicking the markers or when selecting the corresponding item of a dropdown menu on the HTML side of the page.
What I would like to do and can't manage to find by myself is to auto center the marker on the map when the infowindow opens (click or select in the HTML menu). I suppose there is some kind of function to assign to the click or infowindow opening event but can't figure which and how to implement it.
My 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");
});
}
Best Answer
A slightly nicer way (visually) is to use panTo rather than setCenter, like this:
This re-centers but it animates rather than jumping.