Javascript 谷歌地图地理编码问题

我在谷歌地图地理编码方面遇到了一些问题

出于某种原因，地图在这里起作用，但在我的网站上不起作用——我不明白为什么

如果我没有包括

address=encodeURI（地址），我收到一个
无效\u请求
警报

如果我

alert

address变量，我会得到

undefined

如果我运行下面的代码，它会将地图位置更改为堪萨斯城的某个地方

函数initMap（）{
var map=new google.maps.map（document.getElementById（'google_-map'）{
缩放：8，
中心：{纬度：-34.397，液化天然气：150.644}
});
var geocoder=new google.maps.geocoder（）；
document.getElementById（'submit'）。addEventListener（'click'，function（）{
地理编码地址（地理编码器、地图）；
});
}
函数geocodeAddress（geocoder，resultsMap）{
var address=document.getElementById（'address'）。值；
地址=编码URI（地址）；
警报（地址）；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
如果（状态=='OK'）{
resultsMap.setCenter（结果[0].geometry.location）；
var marker=new google.maps.marker({
地图：结果地图，
位置：结果[0]。几何体。位置
});
}否则{
警报（'地理编码因以下原因未成功：'+状态）；
}
});
}

#谷歌地图{
宽度：500px；
高度：500px；
}

---

我解决这个问题的方法是：

• 确保启用服务API（在Google API仪表板上）

• 生成用于Javascript API的Javascript凭据

• 生成用于服务器API的服务器凭据

• 配置地理代码的初始值设定项

HTML代码

<input type="text" id="mapaddress" />
<input type="submit" id="change" onclick="changeMap()">


<div id="map" style="width: 413px; height: 300px;"></div>

---

谢谢我不知道为什么谷歌的原始代码不起作用，但是你的代码起作用了。如果或者当你有时间的时候，你可以在代码旁边加上注释。完成最后三个要点的代码。谢谢你能编辑吗？请帮我做那件事。我不清楚你的说法。

function changeMap(){

  var mapOptions = {
    zoom: 16,
    center: new google.maps.LatLng(54.00, -3.00),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var geocoder = new google.maps.Geocoder();

  //var address = '3410 Taft Blvd  Wichita Falls, TX 76308';
  var address= document.getElementById("mapaddress").value;

  if(!address) {
    address = '3410 Taft Blvd  Wichita Falls, TX 76308';
  }

  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);
    }
  });

  var map = new google.maps.Map(document.getElementById("map"), mapOptions);

  return false;
}