줌 제어 및 스트리트 뷰가 내 Google지도에 표시되지 않습니까?
매우 기본적인 Google지도를 내 페이지에 삽입하고 확대 / 축소 컨트롤과 스트리트 맵 아이콘이 표시되지 않습니다.하지만 마우스를 위치에 놓으면지도를 확대하고 스트리트 뷰로 들어갈 수 있습니다. 따라서 컨트롤은 보이지 않습니다.
<script type="text/javascript"
src="//maps.googleapis.com/maps/api/js?key=<apikey>&sensor=false®ion=IT">
</script>
var myOptions = {
zoom: 17,
center: latlng,
panControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
문제가 무엇인지 아이디어가 있습니까?
그것은 확실히 당신의 코드에있는 CSS 문제입니다. 다음과 같은 모든 이미지에 적용되는 CSS를 찾습니다.
img {
max-width: 100%;
}
나는이 문제가 있었고 수정은이 CSS를 포함하는 것이 었습니다 ...
.gmnoprint img { max-width: none; }
CSS 선택기 .gmnoprint img는 인쇄되지 않는 [noprint] Google Map [gm] 컨트롤의 모든 이미지 [img]를 가져옵니다. 제 경우 max-width에는 전 세계적으로 100 %로 설정되었습니다. 이 설정을 해제하면 문제가 해결되었습니다.
Google지도 에만 도달하는 최상의 솔루션
.gmnoprint img {
max-width: none;
}
현재로서는 터치 장치 (ipad 등)에서 전체 크기 확대 / 축소 슬라이더를 표시하는 것도 불가능합니다. 다음은 문서입니다.
http://code.google.com/apis/maps/documentation/javascript/controls.html
google.maps.ZoomControlStyle.SMALL 은 + 및-버튼으로 만 구성된 미니 확대 / 축소 컨트롤을 표시합니다. 이 스타일은 작은지도에 적합합니다. 터치 장치에서이 컨트롤은 터치 이벤트에 반응하는 + 및-버튼으로 표시됩니다.
google.maps.ZoomControlStyle.LARGE 는 표준 확대 / 축소 슬라이더 컨트롤을 표시합니다. 터치 장치에서이 컨트롤은 터치 이벤트에 반응하는 + 및-버튼으로 표시됩니다.
나는 다음과 같은 문제를 일으키는 CSS와 함께 변종을 만났습니다.
img {
max-width: 100%;
max-height: 100%;
}따라서 추가 줄이 필요합니다.
#map_div img {
max-width: none !important;
max-height: none !important;
}
I had a very similar issue and it turned out in my case NOT to be a CSS issue. In my case, the Content-Security-Policy header on our site was blocking certain images from being rendered. In this case it was blocking the street view images (loaded from a *.ggpht.com uri) and the button icons which use inline svg data specified using the data: scheme. To fix this, I added the following to the Content-Security-Policy header:
img-src data: 'self' https://*.googleapis.com https://*.google.com https://*.gstatic.com https://*.ggpht.com
I'm thinking this might be a problem with the browser or the code within the page that you're embedding this map.
If I look at this simple hello world code, the maps controls show up fine. I geocoded this map to the same location as your sample, so its not anything to do with the location.
What happens when you use this sample?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true®ion=it">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(45.38686, 8.91927);
var myOptions = {
zoom: 17,
center: latlng,
panControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
참고 URL : https://stackoverflow.com/questions/8511436/zoom-control-and-streetview-not-showing-on-my-google-map
'Programing' 카테고리의 다른 글
| readonly =“true”와 readonly =“readonly”의 차이점은 무엇입니까? (0) | 2020.11.23 |
|---|---|
| Ruby JSON 구문 분석으로 해시 키 변경 (0) | 2020.11.23 |
| MongoDb에 대한 현재 연결 수 확인 (0) | 2020.11.23 |
| nginx가 포트 80을 수신하지 않음 (0) | 2020.11.23 |
| WordPress 데이터베이스에서 게시물 추천 이미지 링크는 어디에 저장됩니까? (0) | 2020.11.23 |