Как сделать и infowindow, и setzoom работать для API карт Google v3

Question

Я должен начать с того, что я не очень разбираюсь в javascript или API Google V3. Во всяком случае, я пытаюсь включить карту google с маркерами, чтобы указать места, где я побывал с infowindow. Я нашел пример в Интернете, который я скопировал на свою страницу. Затем я попытался добавить функцию, чтобы приблизить ее к месту, щелкнув маркер. После изменения кода мне удалось улучшить работу масштабирования. Тем не менее, infowindow не откроется. Прежде чем он был открыт, когда я использовал это;

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

Но масштабирование не работает должным образом. Перейдя на это;

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

масштабирование работало хорошо. Но я потерял инфоиндустрию. Может ли кто-нибудь увидеть, как я могу изменить код, чтобы сделать как масштабирование, так и инфоиндуст. Я был бы очень рад, если бы кто-нибудь мог мне помочь в этом. Могу ли я использовать код ниже с настройками или требуется полная переписывание? СПАСИБО ЗАРАНЕЕ

<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

• Добавить .html в 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

По умолчанию API будет прокручивать карту так, что InfoWindow будет полностью видимым (если это возможно).

Это будет сделано с использованием анимации, эта анимация все еще работает, когда вы устанавливаете zoom + center и переопределяете свои настройки.

установить disableAutoPan -Option из infowindow в true отключить автоматическое панорамирование и он должен работать, как ожидалось