2016-11-09 7 views
1

문제가 있습니다. 자바 스크립트를 사용하여 내 웹 페이지에 Google지도를 구현하고 있습니다. 여기 내 문제는 와 함께지도가 있지만 배경 이미지가 전혀 표시되지 않습니다. 스크린 샷은 아래에 나와 있습니다.Google지도 배경 이미지가 브라우저에서 제대로 표시되지 않습니다.

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> 

여기 Google지도에는 명확한 배경 이미지가 필요합니다. 도와주세요.

+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

이 링크 [link] (https://www.google.co.in/maps/@12.9539974,77.6309395,11z?hl=ko)를 클릭하고 검색 상자에 주소를 입력하십시오. Enter를 누르십시오. 이제 귀하의 주소에 대한 Google지도가 제공됩니다. 왼쪽의 공유 옵션을 클릭하고 두 번째 탭 ** Embed Map **을 선택한 다음 제공 한 iframe 링크를 복사하여 프로젝트의 HTML div에 삽입합니다. 예를 들어 다음과 같은 정보가 표시됩니다.

+0

특정 위치. 동적으로 할당 할 수있는 '위도 및 경도'값에 따라지도상의 위치가 필요합니다. – satya

관련 문제