ウィンドウのサイズが変更されたときにGoogleマップマーカーを維持する

Question

複数のマーカーを含むマップが含まれているWebページがある場合、ウィンドウのサイズ変更時または表示時にこれらのマーカーをすべて画面に保持する方法を見つけることができます異なるビューポート。

私はこれで見つけたさまざまなソリューションを試しましたが、さまざまな方法でコードを破っています。

は、ここに私のコードです：

function draw_map($id, $mark, $lat, $long, $zoom, $width, $height, $control, $map_type, $geo_codes) { 
    #intialize output 
    $output = ''; 
    #put together array 
    // print_r($geo_codes);exit; 

    $output .= "  
    <div id='truckmap' ></div> 
    <script> 
     function initMap() { 
     var myLatLng = {lat: ".$lat.", lng: ".$long."}; 

     // Create a map object and specify the DOM element for display. 
     var map = new google.maps.Map(document.getElementById('truckmap'), { 
      center: myLatLng, 
      scrollwheel: false, 
      zoom: ".$zoom." 
     }); "; 

    foreach ($geo_codes as $key => $stop) { 
    $output .= " 
     var infowindow = new google.maps.InfoWindow({ 
      content: '".$stop['text']."' 
     }); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: {lat: ".$stop['latitude'].", lng: ".$stop['longitude']."}, 
      title: '".$stop['opts']['title']."' 
     }); 
     marker.addListener('click', function() { 
      infowindow.open(map, marker); 
     });"; 

    } 

    $output .= "}</script><script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCmXYC5YlrqIQXuJwfYe2xiyZjswOKxsZE&callback=initMap' async defer></script> "; 

    #return output 
    return $output; 
} #end function 

JavaScriptとPHPは、私は私が得ることができるすべての助けを使用できる限定されているの私の知識！

Answer 1

ウィンドウがリサイズされるときにイベントリスナーを追加する必要があります。ソリューションhereを試しましたか？

マップを正しく動作させるために必要なものを整理するのに役立つよう、フィディドを少し削除しました。 You can find it here.

コードスニペット：

var geocoder; 
var map; 
var bounds = new google.maps.LatLngBounds(); 

function initialize() { 
    firstB = new google.maps.LatLng(38.9395799,-104.7168500999999); 
    secondB = new google.maps.LatLng(38.9382571,-104.71727069999997); 
    thirdB = new google.maps.LatLng(38.9382571,-99.71727069999997); 
    bounds.extend(firstB); 
    bounds.extend(secondB); 
    bounds.extend(thirdB); 

    geocoder = new google.maps.Geocoder(); 
    var mapOptions = { 
    disableDefaultUI:true 
    } 

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    map.fitBounds(bounds); 


    var marker = new google.maps.Marker({ 
     position: firstB, 
     map: map, 
     title: 'AVS',  
    }); 

    var smarker = new google.maps.Marker({ 
     position: secondB, 
     map: map, 
     title: 'AVS', 
     icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png' 
    }); 

    var tmarker = new google.maps.Marker({ 
     position: thirdB, 
     map: map, 
     title: 'AVS', 
     icon:'http://maps.google.com/mapfiles/ms/icons/red-dot.png' 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

google.maps.event.addDomListener(window, "resize", function() { 
google.maps.event.trigger(map, "resize"); 
map.fitBounds(bounds); 
}); 

それは代わりに、関数内でズームや中心を通るのあなたのマーカーの境界で初期化されるので、私は少し直す作業マップを示唆しています。複数のマップがある場合やマーカを追加する必要がある場合は、ズームが通過するよりも優れた解決策になると思います。オプションのlatinを省略することもできます。

メーカーごとにfirstB、secondBなどの変数をさらに作成し、それぞれを含むように境界オブジェクトを拡張する必要があります。 initMap関数の冒頭に同様のforeach関数を使用して、すべてを追加することができます。

更新

： はこれを試してみてください、それはあなたのために働く必要があります。

 function draw_map($id, $mark, $lat, $long, $zoom, $width, $height, $control, $map_type, $geo_codes) { 
$i = 1; 
$output = ''; 
$output .= "  
<div id='truckmap' ></div> 
<script> 
function initMap() { 
     var bounds = new google.maps.LatLngBounds(); 
     var myLatLng = {lat: ".$lat.", lng: ".$long."}; 
     // Create a map object and specify the DOM element for display. 
     var map = new google.maps.Map(document.getElementById('truckmap'), { 
     center: myLatLng, 
     scrollwheel: false, 
     zoom: ".$zoom." 
    }); "; 

    foreach ($geo_codes as $key => $stop) { 
    $output .= " 
    var marker".$i." = new google.maps.LatLng(".$stop['latitude'].",".$stop['longitude']."); 
    bounds.extend(marker".$i."); 
    var infowindow".$i." = new google.maps.InfoWindow({ 
    content: '".$stop['text']."' 
    }); 
    var marker".$i." = new google.maps.Marker({ 
    map: map, 
    position: {lat: ".$stop['latitude'].", lng: ".$stop['longitude']."}, 
    title: '".$stop['opts']['title']."' 
    }); 
    marker".$i.".addListener('click', function() { 
    infowindow".$i.".open(map, marker".$i."); 
    });"; 
    $i++; 
    } 

    $output .= "map.fitBounds(bounds); google.maps.event.addDomListener(window, 'resize', function() { 
google.maps.event.trigger(map, 'resize'); 
map.fitBounds(bounds); 
});}</script><script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCmXYC5YlrqIQXuJwfYe2xiyZjswOKxsZE&callback=initMap' async defer></script> "; 

    #return output 
return $output; 
} #end function