Javascript 从HTML元素中检索地址并使用它创建Google地图_Javascript_Geocoding

Javascript 从HTML元素中检索地址并使用它创建Google地图

javascript

Javascript 从HTML元素中检索地址并使用它创建Google地图,javascript,geocoding,Javascript,Geocoding,我的页面上有一个元素，我已将ID“地址”分配给该元素： <p id="address">1600 Pennsylvania Ave NW, Washington, DC 20500, United States</p> 美国华盛顿特区西北宾夕法尼亚大道1600号，邮编20500 现在，我正尝试使用以下方法从中创建谷歌地图： <script type="text/javascript"> var gecoder, map; var address =

我的页面上有一个元素，我已将ID“地址”分配给该元素：

<p id="address">1600 Pennsylvania Ave NW, Washington, DC 20500, United States</p>

美国华盛顿特区西北宾夕法尼亚大道1600号，邮编20500

现在，我正尝试使用以下方法从中创建谷歌地图：

<script type="text/javascript">
  var gecoder, map;
  var address = document.getElementById('address').innerHTML;
  function googlemap(address) {
    geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var myOptions = {
        zoom: 8,
        center: results[0].geometry.location,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      }
    });
  }
</script>


var-gecoder，map；
var address=document.getElementById（'address'）.innerHTML；
功能谷歌地图（地址）{
geocoder=新的google.maps.geocoder（）；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
变量myOptions={
缩放：8，
中心：结果[0].geometry.location，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var marker=new google.maps.marker({
地图：地图，
位置：结果[0]。几何体。位置
});
}
});
}

然而，这不会返回任何结果。我得到一个空白。知道我做错了什么吗？

这就是我所做的，而且很有效。头部的JavaScript：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" />
<script type="text/javascript">
    var geocoder, map;

    function googlemap() {
        var address = document.getElementById('address').innerHTML;

        geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': address }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var myPosition = results[0].geometry.location;
                alert(myPosition);

                var myOptions = {
                    zoom: 8,
                    center: myPosition,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                map = new google.maps.Map(document.getElementById('map'), myOptions);

                var marker = new google.maps.Marker({
                    map: map,
                    position: myPosition
                });
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }
</script>


var地理编码器；
函数googlemap（）{
var address=document.getElementById（'address'）.innerHTML；
geocoder=新的google.maps.geocoder（）；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
var myPosition=results[0]。geometry.location；
警报（我的位置）；
变量myOptions={
缩放：8，
中心：我的位置，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map（document.getElementById（'map'），myOptions）；
var marker=new google.maps.marker({
地图：地图，
职位：我的职位
});
}否则{
警报（'地理编码因以下原因未成功：'+状态）；
}
});
}

该机构：

<body onload="googlemap()">
<form id="form1" runat="server">
<div>
    <p id="address">1600 Pennsylvania Ave NW, Washington, DC 20500, United States</p>
    <div id="map" style="overflow:hidden; width:400px; height:400px"></div>
</div>
</form>


美国华盛顿特区宾夕法尼亚大道西北1600号，邮编20500