Html 如何按经度和纬度在我的网站上显示谷歌地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16983017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display google map on my website by longitude and latitude
提问by Sergey
I tried to use this code:
我尝试使用此代码：
<img id="small-map" height="198" width="254" alt="Google Map" src="https://maps.google.com/maps?q=24.197611,120.780512" />
But it doesn't work on the html page.
但它在 html 页面上不起作用。
Though when I use this one:
虽然当我使用这个时：
https://maps.google.com/maps?q=24.197611,120.780512
it works but just as a google page
它可以工作，但就像谷歌页面一样
回答by Randhi Rupesh
hi here is the sample code
嗨，这是示例代码
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script language="javascript" type="text/javascript">
var map;
var geocoder;
function InitializeMap() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions =
{
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function FindLocaiton() {
geocoder = new google.maps.Geocoder();
InitializeMap();
var address = document.getElementById("addressinput").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);
}
});
}
function Button1_onclick() {
FindLocaiton();
}
window.onload = InitializeMap;
</script>
</head>
<body>
<h2>Gecoding Demo JavaScript: </h2>
<table>
<tr>
<td>
<input id="addressinput" type="text" style="width: 447px" />
</td>
<td>
<input id="Button1" type="button" value="Find" onclick="return Button1_onclick()" /></td>
</tr>
<tr>
<td colspan ="2">
<div id ="map" style="height: 253px" >
</div>
</td>
</tr>
</table>
</body>
</html>
回答by PiLHA
See this doc https://developers.google.com/maps/documentation/imageapis/
请参阅此文档https://developers.google.com/maps/documentation/imageapis/
<img src="http://maps.googleapis.com/maps/api/staticmap?center=-15.800513,-47.91378&zoom=11&size=200x200&sensor=false">
回答by Lloyd
Google provides more than ample documentation and samples to get you started -
Google 提供了丰富的文档和示例来帮助您入门 -
https://developers.google.com/maps/documentation/javascript/tutorial
https://developers.google.com/maps/documentation/javascript/tutorial
回答by rony36
Simply create link like:
只需创建链接，如：
"http://maps.google.com/?q=[lat],[long]"
for more details: http://code.google.com/apis/maps/documentation/javascript/reference.html#Map
更多详情：http: //code.google.com/apis/maps/documentation/javascript/reference.html#Map
or for static image, try this:
或者对于静态图像，试试这个：
"http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false"
for more details: https://developers.google.com/maps/documentation/staticmaps/
更多详情：https: //developers.google.com/maps/documentation/staticmaps/
