Google Maps: mapa de centro automático en marcador haga clic en

Necesitaré ayuda en un mapa en el que estoy trabajando. El mapa no es particularmente complejo ya que soy un principiante, tengo un montón de marcadores (habrá más una vez terminado) con infowindows que se pueden abrir al hacer clic en los marcadores o al seleccionar el elemento correspondiente de un menú desplegable en el HTML lado de la página.Google Maps: mapa de centro automático en marcador haga clic en

Lo que me gustaría hacer y no puedo encontrar es centralizar automáticamente el marcador en el mapa cuando se abre la ventana de información (haga clic o seleccione en el menú HTML). Supongo que hay algún tipo de función para asignar al evento de apertura de clic o ventana de información, pero no se puede determinar qué y cómo implementarla.

Mi código:

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

     }

Fuente

2012-09-07 Tsokoa

Ya está utilizando controlador de clic en sus marcadores, por lo que sólo tiene que añadir una línea a centrar el mapa en marcador:

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

Fuente

2012-09-07 09:02:10

Muchas gracias funciona perfectamente! – Tsokoa

Sé que esta es una solución bastante antigua, pero la respuesta de Dan para usar map.panTo() es un efecto más estéticamente agradable, ya que no solo salta instantáneamente al nuevo centro. Por supuesto, depende de lo que estás buscando. –

Una forma un poco más agradable (visualmente) es utilizar panTo en lugar de setCenter, así:

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

esto vuelve a los centros pero una Imates en lugar de saltar.

Fuente

2013-09-25 16:28:12 Dan

Yo era como ... hombre que es janky, entonces me desplacé a su respuesta. Me salvó un poco de tiempo gracias :) – codeaddict

Centrado automático en el mapa marcador de clic se puede hacer con este código:

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

Fuente

2015-09-10 12:25:37 Anup

¿Podría dar una explicación para esta respuesta? ¡Gracias! – meetar

Google Maps: mapa de centro automático en marcador haga clic en

Respuesta

Cuestiones relacionadas