谷歌地圖不與引導顯示

-1

var map; 
 
     function initMap() { 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 16, 
 
      center: new google.maps.LatLng(18.511325, 73.820176), 
 
      mapTypeId: 'roadmap' 
 
     }); 
 

 
     var iconBase = 'img/contactus/'; 
 
     var icons = { 
 
      info: { 
 
      icon: iconBase + 'map.png' 
 
      } 
 
     }; 
 

 
     var features = [ 
 
      { 
 
      position: new google.maps.LatLng(18.511325, 73.820176), 
 
      type: 'info' 
 
      } 
 
     ]; 
 

 
     // Create markers. 
 
     features.forEach(function(feature) { 
 
      var marker = new google.maps.Marker({ 
 
      position: feature.position, 
 
      icon: icons[feature.type].icon, 
 
      map: map 
 
      }); 
 
     }); 
 
     }

#map{ 
 
    margin-left: 20%; 
 
    height:100; 
 
    }

<script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9rik1af5EY8G-fO6KNukN0-ROACLhAPg&callback=initMap"> 
 
    </script> 
 

 
<div id="map" class="map" style="width: 65%; height:40%"></div>

招呼上面的代碼是爲谷歌地圖，我整合谷歌地圖裏面是我的項目&顯示自定義徽標。但它不顯示地圖給我，我使用bootstrap.but當點擊檢查元素&取消選中位置：相對，然後我的地圖顯示，但沒有正確的方式應該看起來像。

來源

2017-07-07 Lakhan Khandelwal

的[谷歌地圖沒有顯示出來（https://stackoverflow.com/questions/7419280/google-maps-not-showing-up） – alalp

鏈接可能的複製小提琴：http://jsfiddle.net/4a87k/846/，你可以看到我的答案如下，我已經改變，使其工作 – Sujith

'高度：100;'這就是問題，沒有回落爲單位少在html5中。 – kolunar

我創建了一個小提琴，修改了你的CSS，它似乎工作。唯一的問題是CSS。加載後地圖隱藏起來。這裏是CSS：

#map{ 
    position:fixed !important; 
    display:block !important; 
    width: 100%; 
    height: 100%; 
}

來源

2017-07-07 07:08:22 Sujith

i hope it will works , just do in the below way, remove all inline css and 
add a height: 500px; 
<style> 
    #map{ 
     margin-left: 20%; 
     height:500px; 
     } 
</style> 
<script> 
    var map; 
    function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 16, 
     center: new google.maps.LatLng(18.511325, 73.820176), 
     mapTypeId: 'roadmap' 
    }); 

    var iconBase = 'img/contactus/'; 
    var icons = { 
     info: { 
     icon: iconBase + 'map.png' 
     } 
    }; 

    var features = [ 
     { 
     position: new google.maps.LatLng(18.511325, 73.820176), 
     type: 'info' 
     } 
    ]; 

    // Create markers. 
    features.forEach(function(feature) { 
     var marker = new google.maps.Marker({ 
     position: feature.position, 
     icon: icons[feature.type].icon, 
     map: map 
     }); 
    }); 
    } 
</script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9rik1af5EY8G- 
    fO6KNukN0-ROACLhAPg&callback=initMap"> 
    </script> 

    <div id="map" class="map"></div>

來源

2017-07-07 07:09:40

谷歌地圖不與引導顯示

回答

相關問題