Google地图以div显示 [英] Google Maps display in div
本文介绍了Google地图以div显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何格式化div中显示的map-canvas？它适用于localhost。
< script src = https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false > < / script >
< span class =code-leadattribute>< script type = text / javascript >
var地理编码器;
var map;
function initialize（）{
geocoder = new google.maps.Geocoder（ ）;
var lat = document.getElementById（ <％= TextBox1.ClientID％>）。value
var lon = document.getElementById（ <％= TextBox2.ClientID％> ）。value
var latlng = new google.maps.LatLng（lat，lon）;
var mapOptions = {
zoom： 8 ，
center：latlng
}
map = new google.maps.Map（document.getElementById（ map- canvas），mapOptions）;
}
function codeAddress（）{
var address = document.getElementById（ <％= TextBox3.ClientID％>）。value;
geocoder.geocode（{' 地址'：地址}，功能（结果，状态）{
if （status == google.maps.GeocoderStatus.OK）{
map.setCenter（results [ 0 ]。geometry.location）;
var marker = new google.maps.Marker（{
map： map，
position：results [ 0 ]。geometry.location
}）;
} else {
alert（ 由于以下原因，地理编码未成功： + status）;
}
}）;
}
< / script >
< center>< div id = map -canvas style = width：480px; height：480px;> < span class =code-keyword>< / div > < / center >
解决方案
试试这个...
< HTML>
< head>
< script type = text / javascript>
src = http://maps.google.com/maps/api/js?sensor=false >
< / script>
< / head >
< body onload = initialize（）>
< div id = map_canvas style = width：100％; height：50％> < / div >
< script type = text / javascript>
function initialize（）
{
var mapOptions = {
zoom： 7 ，
center： new google.maps.LatLng（-14 。 235004 ， - 51。 92528 ），
mapTypeId：google.maps.MapTypeId.ROADMAP ，
navigationControl： true ，
navigationControlOptions：
{
style：google.maps.NavigationControlStyle.ZOOM_PAN
}，
scaleControl： true ，
DoubleClickZoom： true ，
draggable： true ，
streetViewControl： true ，
draggableCursor：' pointer'
};
map = new google.maps。地图（ document .getElementById（' map_canvas'），mapOptions）;
var polyOptions = {
strokeColor：' Red'，
strokeOpacity： 1 。 0 ，
strokeWeight： 3
}
poly = new google.maps.Polyline （polyOptions）;
poly.setMap（map）;
markersArray.push（poly）;
// 为点击事件添加一个监听器
google .maps.event.addListener（map，' 点击'，addLatLng）;
}
< / script>
< / body >
< / html >
转到Google并选择谷歌地图和右侧角落，您可以在该选择共享中找到设置并从该副本中嵌入代码并粘贴它在您的div
，你可以在他们的搜索框中找到你想要的位置
https://www.google.co.in/maps/@19.0822507,72.8811862,11z?hl = en [ ^ ]
How do you format map-canvas it display in a div? It works in localhost.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var lat = document.getElementById("<%=TextBox1.ClientID%>").value
var lon = document.getElementById("<%=TextBox2.ClientID%>").value
var latlng = new google.maps.LatLng(lat, lon);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
function codeAddress() {
var address = document.getElementById("<%=TextBox3.ClientID%>").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
<center><div id="map-canvas" style="width: 480px; height: 480px;"></div></center> 解决方案
Try This...
<html> <head> <script type="text/javascript"> src="http://maps.google.com/maps/api/js?sensor=false"> </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:50%"></div> <script type="text/javascript"> function initialize() { var mapOptions = { zoom: 7, center: new google.maps.LatLng(-14.235004, -51.92528), mapTypeId: google.maps.MapTypeId.ROADMAP, navigationControl:true, navigationControlOptions: { style:google.maps.NavigationControlStyle.ZOOM_PAN }, scaleControl:true, DoubleClickZoom:true, draggable:true, streetViewControl:true, draggableCursor:'pointer' }; map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); var polyOptions = { strokeColor: 'Red', strokeOpacity: 1.0, strokeWeight: 3 } poly = new google.maps.Polyline(polyOptions); poly.setMap(map); markersArray.push(poly); // Add a listener for the click event google.maps.event.addListener(map, 'click', addLatLng); } </script> </body> </html>
Go to Google and select Google Map and right side corner you find setting in that select share and embed from that copy the code and paste it in your div
and you can find your desired location they have search box also
https://www.google.co.in/maps/@19.0822507,72.8811862,11z?hl=en[^]
这篇关于Google地图以div显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
