我正在尝试创建公司位置的Google地图。我使用了Google地图页面上的链接按钮。一切都很好,但是当我将地图缩小到200 x 200时,所有地图控件都会占据地图并阻挡地图中的视图。有没有办法让他们骑?我想要的只是引脚和放大和缩小按钮。谢谢。
<iframe width="200" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=244+5th+Avenue,+New+York,+NY&aq=t&sll=37.0625,-95.677068&sspn=48.956293,107.138672&ie=UTF8&hq=&hnear=244+5th+Ave,+New+York,+10016&ll=40.744556,-73.987378&spn=0.005763,0.013078&t=m&z=14&output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=244+5th+Avenue,+New+York,+NY&aq=t&sll=37.0625,-95.677068&sspn=48.956293,107.138672&ie=UTF8&hq=&hnear=244+5th+Ave,+New+York,+10016&ll=40.744556,-73.987378&spn=0.005763,0.013078&t=m&z=14" style="color:#0000FF;text-align:left">View Larger Map</a></small>
答案 0 :(得分:35)
要自定义界面,我相信您必须深入研究Google Maps API。
使用Google Maps API,您可以将disableDefaultUI
设置为true。
HTML文件:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="map.js"></script>
</head>
<body>
<div id="map" style="width:200px; height:200px;" />
</body>
</html>
JavaScript文件:
window.onload = function() {
var myOptions = {
center: new google.maps.LatLng(40.744556,-73.987378),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
}
答案 1 :(得分:9)
我不相信在嵌入地图时可以隐藏控件。您需要使用Google Maps API在javascript中创建地图 - 在以下行中:
var mapContainer = document.getElementById('mapContainer');
var mapOptions = {
panControl: false,
zoomControl: false,
scaleControl: false,
};
var map = new google.maps.Map(mapContainer, mapOptions);
答案 2 :(得分:5)
没有使用IFRAME隐藏控件的参数,请查看以下链接以查看可能的参数:
http://moz.com/ugc/everything-you-never-wanted-to-know-about-google-maps-parameters
如果您不想使用API,可以使用CSS隐藏地图的边缘:
CSS:
.mapaThumb { position:relative; }
.mapaThumb iframe{ width:200px; height:240px; margin-top:-40px; margin-left:-10px; }
.mapaThumb .mapaItem{ overflow:hidden; height:150px; }
HTML:
<div class="mapaThumb">
<div class="mapaItem">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com.br/maps?f=q&source=s_q&hl=pt-BR&geocode=&q=brazil&aq=&sll=-21.086832,-42.409844&sspn=0.895645,1.674042&ie=UTF8&hq=&hnear=Rep%C3%BAblica+Federativa+do+Brasil&t=m&z=4&ll=-14.235004,-51.92528&output=embed"></iframe>
</div>
</div>
这不是最正确的,但它有效! 中国圣人讲授的老把戏。
答案 3 :(得分:-3)
只需设置您的Google地图here的样式,点击&#34;生成代码&#34;并将其嵌入您网站的<body>
。