Подтвердить что ты не робот

Карты Google: автоматическая карта центра по щелчку маркера

Мне нужна помощь на карте, над которой я работаю. Карта не особенно сложна, так как я новичок, у меня есть куча маркеров (будет еще раз закончена) с инфо-окнами, которые можно открыть при нажатии маркеров или при выборе соответствующего элемента выпадающего меню на HTML стороне страницы.

То, что я хотел бы сделать и не могу найти самостоятельно, - это автоматическое центрирование маркера на карте при открытии инфо-окна (нажмите или выберите в меню HTML). Я полагаю, что есть какая-то функция для назначения события открытия клика или открытия инфополя, но не может понять, что и как его реализовать.

Мой код:

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

        }
4b9b3361

Ответ 1

Вы уже используете обработчик кликов на своих маркерах, поэтому вам просто нужно добавить строку, чтобы центрировать карту на маркере:

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

Ответ 2

Чуть более приятным способом (визуально) является использование panTo, а не setCenter, например:

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

Это повторное центрирование, но оно анимируется, а не прыгает.

Ответ 3

Автоматическое центрирование карты по щелчку маркера может быть выполнено с помощью этого кода:

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