單擊按鈕時需要顯示Google地圖

-2

我有一個Google地圖，需要通過單擊「地圖」按鈕來顯示。一旦我點擊它，選定div的內容將消失，地圖不會出現。單擊按鈕時需要顯示Google地圖

我看了下面的問題，但還不能解決。 1

DEMO（如果複製下面的.HTML文件中，可以通過點擊地圖走字「這裏」，但它仍然矗立在演示中看到的代碼。）

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
<link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
<link rel="stylesheet" 
    href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
<link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css"> 
<style> 

</style> 



<div class="container"> 
    <div id="row" class="row"> 




       <div class="col-md-7 top-section"> 

        <div id="filterBtns" class="row"> 
         <div id="map" class="filterbtn col-md-2 col-sm-2 hidden-xs" 
          onClick="populateMap()">Map</div> 

        </div> 

       </div> 

        <div id="rightPanel" class="col-md-5 hidden-xs"> 

         <div id="myList" class="details-myList"> 
          Here 
         </div> 
         <div id="multiple-map" class="details-rightPanel-map"></div> 
        </div> 






    </div> 
</div> 

    <script 
     src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script> 
    <script type="text/javascript" 
     src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script> 
    <script> 

     function hideMap() { 
      $("#multiple-map").hide(); 
      $("#myList").show(); 
     } 


     function populateMap() { 
      $("#myList").hide(); 
      $("#multiple-map").show(); 
      google.maps.event.trigger(map, 'resize'); 
      map.fitBounds(bounds); 
     } 
     var map; 
     var markers = []; 
     var pinColor = "FE7569"; 
     var bounds; 
     function pinImage(imagenum) { 
      return image = new google.maps.MarkerImage(
        "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" 
          + imagenum + "|" + pinColor); 
     } 

     function initialize() { 

      var results = [ 
        [ 
          "A", 
          "47.3774496", 
          "8.50161", "0", 
          "id1"], [ 
          "B", 
          "47.3880587", 
          "8.6004076", "1", 
          "id2"],]; 

      var results = results 
        .concat([ 
         [ 
            "T", 
            "52.0552086", 
            "20.4228263", 
            "0", 
            "id6"], 
        ]); 



      var results = results 
        .concat([ 
          ]); 

      var mapOptions = { 
       mapTypeId : google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById('multiple-map'), 
        mapOptions); 
      processResults(results); 
      hideMap(); 
     } 

     function processResults(results) { 
      bounds = new google.maps.LatLngBounds(); 
      var infowindow = new google.maps.InfoWindow(); 
      markers = []; 
      for (i = 0; i < results.length; i++) { 

       var place = results[i][0]; 
       var elementId = "#marker-" + results[i][4]; 
       var placeLoc = new google.maps.LatLng(results[i][1], 
         results[i][2]); 
       // Create a marker for each place. 
       var marker = new google.maps.Marker({ 
        title : place, 
        position : placeLoc, 
        icon : pinImage(i + 1) 

       }); 

       markers.push(marker); 
       bounds.extend(marker.position); 

       var description = $("<image style='float:right;' class='marker' src='" + marker.icon.url + "'></image>"); 

       $(elementId).append(description); 
       google.maps.event.addListener(marker, 'click', (function(
         marker, i) { 
        return function() { 
         infowindow.setContent(locations[i][0]); 
         infowindow.open(map, marker); 
        } 
       })(marker, i)); 
      } 
      map.fitBounds(bounds); 
      var markerCluster = new MarkerClusterer(map, markers); 
      var listener = google.maps.event.addListener(map, "idle", 
        function() { 
         map.setZoom(13); 
         google.maps.event.removeListener(listener); 
        }); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 



    </script> 


    <script 
     src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script 
     src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

</body> 


</html>

來源

2015-11-02 Jack

將鼠標懸停在投票箭頭上，這就是您需要的所有倒票的解釋。 –

你加載使用此窗口的加載事件的地圖。

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

如果你想成爲按鈕點擊加載地圖，只需用您的按鈕選擇更換window，你的情況#map和改變load事件click

var mapButton = document.getElementById('map'); 
google.maps.event.addDomListener(mapButton, 'click', initialize);

請到通過official docs here。

來源

2015-11-02 05:45:04 AdityaParab

我做到了，但沒有幫助 – Jack

單擊按鈕時需要顯示Google地圖

回答

相關問題