Google Maps : auto center map on marker click

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");
            });

        }

Answers


You are already using click handler on your markers, so you just need to add a line to center the map on marker:

google.maps.event.addListener(RdrMarker, 'click', function() {
   map.setCenter(RdrMarker.getPosition());
   infowindow.setContent(contentStringRdr);
   infowindow.open(map,RdrMarker);
});

A slightly nicer way (visually) is to use panTo rather than setCenter, like this:

google.maps.event.addListener(RdrMarker, 'click', function() {
   map.panTo(RdrMarker.getPosition());
   infowindow.setContent(contentStringRdr);
   infowindow.open(map,RdrMarker);
});

This re-centers but it animates rather than jumping.


Auto centering the map on marker click can be done with this code:

google.maps.event.addListener(marker, 'click', function() {
     map.setCenter(marker.getPosition());   
});

Need Your Help

Where is Xcode located on the hard drive?

iphone xcode macos

I have looked everywhere but couldn't find it anywhere. I installed it successfully but I don't know where it is installed. Shouldn't it show up at the "start menu"?

How can I ssh directly to a particular directory?

bash shell scripting ssh

I often have to login to one of several servers and go to one of several directories on those machines. Currently I do something of this sort: