Google지도 API v3에서 infowindow 및 setzoom을 작동시키는 방법

Question

자바 스크립트 또는 Google API V3에 대해 많이 이해하지 못한다는 말부터 시작해야합니다. 어쨌든, 나는 infowindow로 방문한 장소를 나타내는 마커가있는 Google지도를 포함하려고 노력해 왔습니다. 나는 나의 페이지에 베낀 인터넷에보기를 발견했다. 그런 다음 마커를 클릭 할 때 장소를 확대하는 기능을 추가하려고했습니다. 코드를 변경 한 후에 확대/축소가 정말 멋지게 처리되었습니다. 그러나 정보 창은 열리지 않습니다. 내가 이것을 사용할 때 열려 있기 전에;

infowindow.setContent(contentString); 
infowindow.open(map,marker);. 

그러나 줌이 제대로 작동하지 않았습니다. 이것으로 변경 한 후;

infowindow.setContent(this.html); 
infowindow.open(map, this); 

줌이 잘 작동했습니다. 하지만 정보 창을 잃어 버렸습니다. 누구나 코드를 변경하여 확대/축소 및 정보 창 작업을 모두 수행 할 수있는 사람을 볼 수 있습니까? 아무도 나를 도와 줄 수 없다면 나는 아주 행복 할 것이다. 아래 코드를 조정과 함께 사용할 수 있습니까, 아니면 전체 재 작성이 필요합니까? (가능하면) 정보창이 완전히 볼 수 있도록 API가지도를 이동합니다 기본적으로 ADVANCE

<script> 
//<![CDATA[ 
// this variable will collect the html which will eventually be placed in the side_bar 
var side_bar_html = ""; 

// arrays to hold copies of the markers and html used by the side_bar 
// because the function closure trick doesnt work there 
var gmarkers = []; 
var map = null; 

function initialize() { 
    // create the map 
    var myOptions = { 
     zoom: 7, 
     center: new google.maps.LatLng(47.516231, 13.550072), 
     mapTypeControl: true, 
     mapTypeControlOptions: { 
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
     }, 
     navigationControl: true, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
    myOptions); 

    google.maps.event.addListener(map, 'click', function() { 
     infowindow.close(); 
    }); 

    // Add markers to the map 
    // add the points 

    var point = new google.maps.LatLng(48.208174, 16.373819); 
    var marker = createMarker(point, "Vienna", '<div style="font-size:12px;font-weight: bold;font-family:segoe ui, Trebuchet MS;">Vienna</div>') 

    // put the assembled side_bar_html contents into the side_bar div 
    document.getElementById("side_bar").innerHTML = side_bar_html; 
} 

var infowindow = new google.maps.InfoWindow({ 
    size: new google.maps.Size(150, 100) 
}); 

// This function picks up the click and opens the corresponding info window 
function myclick(i) { 
    google.maps.event.trigger(gmarkers[i], "click"); 
} 

// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) { 
    var contentString = html; 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     zIndex: Math.round(latlng.lat() * -100000) << 5 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(this.html); 
     infowindow.open(map, this); 
     map.setZoom(10); 
     map.setCenter(marker.getPosition()); 
    }); 

    // save the info we need to use later for the side_bar 
    gmarkers.push(marker); 
    // add a line to the side_bar html 
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '<\/a><br>'; 
} 
</script> 

Answer 1

예상되는 가장 큰 문제는 마커의 .html 중에서 속성을 사용하는 코드를 변경한다는 것입니다으로 작동합니다 (google.maps.Marker 객체에는 .html 속성이 없지만 추가 할 수 있습니다.) 그것을 고정

2 옵션 :

// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) { 
    var contentString = html; 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     zIndex: Math.round(latlng.lat() * -100000) << 5 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(contentString); 
     infowindow.open(map,marker); 
     map.setZoom(10); 
     map.setCenter(marker.getPosition()); 
    }); 

    // save the info we need to use later for the side_bar 
    gmarkers.push(marker); 
    // add a line to the side_bar html 
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '<\/a><br>'; 
} 

working example

• 가 google.maps.Marker에 들이게 추가

  • 은 원래의 코드를 사용하여 this을 사용하십시오. :

    // A function to create the marker and set up the event window function 
    function createMarker(latlng, name, html) { 
        var marker = new google.maps.Marker({ 
         position: latlng, 
         map: map, 
         html: html, // <---------------------------------------------- add this to the Marker 
         zIndex: Math.round(latlng.lat() * -100000) << 5 
        }); 
    
        google.maps.event.addListener(marker, 'click', function() { 
         infowindow.setContent(this.html); 
         infowindow.open(map,this); 
         map.setZoom(10); 
         map.setCenter(this.getPosition()); 
        }); 
    
        // save the info we need to use later for the side_bar 
        gmarkers.push(marker); 
        // add a line to the side_bar html 
        side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '<\/a><br>'; 
    } 
    

Answer 2

감사드립니다.

이것은 애니메이션을 사용하여 수행되며이 애니메이션은 확대/축소 센터를 설정할 때 계속 실행 중이며 설정을 무시합니다.

는 자동 팬을 사용하지 true에 infowindow의 disableAutoPan - 옵션을 설정하고이