Google지도 : 마커의 자동 센터지도

Question

지도에서 도움이 필요합니다. 초보자부터지도가 특히 복잡하지는 않습니다. 마커를 클릭하거나 HTML에서 드롭 다운 메뉴의 해당 항목을 선택할 때 열 수있는 정보창이있는 표식이 많이 있습니다 (한 번 더 완료됩니다). 페이지의 측면.

내가하고 싶거나 스스로 관리 할 수없는 것은 정보창이 열리면지도에 아이콘을 자동으로 배치하는 것입니다 (HTML 메뉴에서 클릭 또는 선택). 클릭 또는 infowindow 오프닝 이벤트에 할당 할 수있는 함수가 있다고 가정하고 구현 방법을 파악할 수 없습니다.

내 코드 :

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

     } 

Answer 1

그냥 마커지도 중앙에 한 줄을 추가해야합니다, 그래서 당신은 이미 당신의 마커에 클릭 핸들러를 사용하고 있습니다 :

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

Answer 2

약간 더 좋은 방법을 (시각적으로) setCenter 대신 panTo를 사용하는 것입니다.

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

점프보다는이 메이트.

Answer 3

자동 마커 클릭에 대한지도는이 코드를 수행 할 수 있습니다 센터링 :

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