多谷歌地圖on Rails的

我有企業建成的列表，並需要在各自的模態顯示地圖，爲了這個，我有這樣的：多谷歌地圖on Rails的

<div class="row" id="googleMap<%=enterprice.id%>" style="width 100%; height: 300px;" data1='<%=enterprice.latitud%>' data2='<%=enterprice.longitud%>'> 
</div>

這個代碼是在html.erb文件。

我對加載地圖功能：

<script> 
    function myMap(lat, long) { 
    var uluru = { lat: lat, lng: long}; 
    var map = new google.maps.Map(document.getElementById('googleMap'), { 
     zoom: 4, 
     center: uluru 
    }); 
    var marker = new google.maps.Marker({ 
     position: uluru, 
     map: map 
    }); 
    } 
</script>

而且一個jQuery幫手傳遞數據

$(document).on("ready", function() { 
       $('#googleMap<%=enterprice.id%>').each(function (index, element) { 
        var $this = $(element); 
        myMap($this.attr("data1"), $this.attr("data2")); 
       }); 
       });

問題是地圖上只裝上模態的第一個單元格，但沒有實際顯示任何地圖。

而其他單元格不會加載地圖。

來源

2017-10-12 arc_pwr

首先，你不需要每個地圖和模態。你可以有一個使用JS來改變它們。這樣你就不會超載你的頁面中的元素，你將只使用一系列的元素，但不能並行使用。

無論何時頁面準備就緒，您都可以在模態中定義地圖。

<script> 
     var map; 
     var old_marker; 

     function initMap() { 
     var point = {lat: 0, lng: 0}; 

     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 12, 
      center: point, 
      mapTypeId: 'terrain' 
     }); 

     // This event listener will call addMarker() when the map is clicked. 
     map.addListener('click', function(event) { 
      addMarker(event.latLng); 
     }); 

     // Adds a marker at the center of the map. 
     addMarker(point); 
     } 

     // Adds a marker to the map and push to the array. 
     function addMarker(location) { 
     var marker = new google.maps.Marker({ 
      position: location, 
      map: map 
     }); 
     if(old_marker){ 
      old_marker.setMap(null) 
     } 
     old_marker = marker 
     markers.push(marker); 
     map.setCenter(location); 
     } 
</script>

現在我們只需點擊它們就可以爲每個企業添加一個標記。我建議增加一定的階級對他們

$(document).on("ready", function() { 
    initMap(); 
    $(.enterprise).click(function(){ 
    addMarker($this.attr("data1"), $this.attr("data2")); 
    }); 
});

通過這種方式，標記將有關各企業增加點擊和地圖將圍繞該位置。現在你需要做的就是展示Modal。

參考文獻：https://developers.google.com/maps/documentation/javascript/examples/marker-remove

來源

2017-10-12 23:20:15

多谷歌地圖on Rails的

回答

相關問題