2017-10-11 16 views
-1

Googleマップのページ読み込みにinfowindowを表示するにはどうすればいいですか?インフォボックスのポップアップが自動的に表示されます。私はGoogleマップに複数のマーカーがあります。私はすべてのマーカー情報ウィンドウがページの読み込みで開く必要があります。ClickイベントなしでGoogleマップで情報ウィンドウを表示する方法

jsのフィドルリンク https://jsfiddle.net/vq7zfbgj/

コード:

var locations = [ 
      [ 
      "Market 1", 
      22.809999, 
      86.179999, 
      5, 
      "Market1", 
      "Market1", 
      "Market1", 
      "found" 
     ], 
    [ 
      "Market 2", 
      22.801111, 
      86.171111, 
      5, 
      "Market2", 
      "Market2", 
      "Market2", 
      "found" 
     ] 
    ] 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 14, 
     center: new google.maps.LatLng(22.803444, 86.179525), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var infowindow = new google.maps.InfoWindow(); 


    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
     }); 

     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
      return function() { 
       infowindow.setContent(locations[i][0], locations[i][6]); 
       infowindow.open(map, marker); 
      } 
     })(marker, i)); 
    } 

答えて

0

私はthisにあなたのバイオリンを変更し、情報ウィンドウは、ページの読み込みにオープンします:私は、元のVaRの情報ウィンドウを削除し、各マーカーのforループの中に次の操作を行うことをお勧めしたいです。より多くのマーカーを解決できるilustrateに別のマーカーを追加します。それが役に立てば幸い。

for (i = 0; i < locations.length; i++) { 
    var infowindow = new google.maps.InfoWindow; 

    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map 
    }); 

    google.maps.event.addListener(marker, 'click', (function (marker, i) { 
    return function() { 
     infowindow.setContent(locations[i][0], locations[i][6]); 
     infowindow.open(map, marker); 
    } 
    })(marker, i)); 

    infowindow.setContent(locations[i][0], locations[i][6]); 
    infowindow.open(map, marker); 
} 
1

あなたは、各マーカーについて個別に情報ウィンドウ開始することにより、一度に複数のマーカーを開くことができます。

marker.infowindow = new google.maps.InfoWindow(); 
}); 
marker.infowindow.setContent(locations[i][0], locations[i][6]);    
marker.infowindow.open(map, marker); 

https://jsfiddle.net/vq7zfbgj/16/

+0

あなたは今すぐ最初の機能を壊しました。マーカーは読み込み時に開くことがありますが、クリックしても機能しなくなり、テキストも消えます。これは解決策ではなく、より多くの問題をもたらしました。 – Nope

+0

@Fran - 最初の例では、InfoWindowコンテンツの人口を引き継ぎませんでしたが、ページロード時にInfoWindowを開く方法をデモンストレーションしました。クリックの振る舞いを保持するのは理にかなっているので、私はそれを元に戻した例で元に戻しました。 – athms

関連する問題