2016-11-09 126 views
1

我有一個問題。我正在使用Javascript在我的網頁上實現谷歌地圖。在這裏,我的問題是地圖是,但它的背景圖像根本沒有顯示。屏幕截圖如下。谷歌地圖背景圖片在瀏覽器中顯示不正確

enter image description here

我下面解釋我的代碼。

<div id="dvMap" style="width:1000px; height:1000px;"></div> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 



<script> 
    var markers = [{"lat":"20.295728","lng":"85.844990"},{"title":"shilparamam","lat":"20.295728","lng":"85.844990","description":"Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra."}]; 
    window.onload = function() { 
    var mapOptions = { 
    center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
    zoom: 10, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 
    var infoWindow = new google.maps.InfoWindow(); 
    var lat_lng = new Array(); 
    var latlngbounds = new google.maps.LatLngBounds(); 
    for (i = 0; i < markers.length; i++) { 
    var data = markers[i] 
    var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
    lat_lng.push(myLatlng); 
    var marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    title: data.title 
    }); 
    latlngbounds.extend(marker.position); 
    (function (marker, data) { 
    google.maps.event.addListener(marker, "click", function (e) { 
    infoWindow.setContent(data.description); 
    infoWindow.open(map, marker); 
    }); 
    })(marker, data); 
    } 
    map.setCenter(latlngbounds.getCenter()); 
    map.fitBounds(latlngbounds); 
    } 
    </script> 

這裏我需要谷歌地圖清晰的背景圖片。請幫幫我。

+0

發佈的代碼適合我。 ([小提琴](https://jsfiddle.net/geocodezip/w8nbhuos/))。請提供證明問題的[mcve]。 – geocodezip

+0

@geocodezip:是的,我發佈了我整個代碼的必需部分。單獨的工作很好,我不知道爲什麼它不在我的項目中工作。 – satya

+0

沒有證明問題的[mcve]很難提供幫助。 – geocodezip

回答

1

爲什麼不使用簡單的iframe而不是這麼長的腳本?下面的鏈接提供了簡單的步驟來獲取您需要使用html div嵌入到您的項目或網站中的iframe代碼。 http://www.dummies.com/web-design-development/site-development/how-to-embed-a-google-map-with-iframe/

+0

示例代碼在哪裏。 – satya

+1

點擊此鏈接[鏈接](https://www.google.co.in/maps/@12.9539974,77.6309395,11z?hl=en)並在搜索框中輸入您的地址。按回車。你現在得到一個谷歌地圖爲您的地址。點擊左側的共享選項,然後選擇第二個選項卡** Embed Map **,然後複製它們提供的iframe鏈接並將其嵌入到項目的html div中。例如,你會得到這樣的東西: