javascript 使用谷歌地图加载显示地址位置

displaying address location with google maps onload

提问by hellomello

I'm trying to currently show the location of an address when page loads, but my map doesn't show at all. I tried to alert(address) and it works. It shows the correct address I'm trying to get. But I'm not sure if I'm doing this right?

我目前正在尝试在页面加载时显示地址的位置，但我的地图根本不显示。我试图 alert(address) 并且它有效。它显示了我试图获取的正确地址。但我不确定我这样做是否正确？

<script>
    var geocoder;
    var map;
    function codeAddress() {
    geocoder = new google.maps.Geocoder();
    //var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            var city_state_zip = document.getElementById("city_state_zip").innerHTML;
            var street_address = document.getElementById("street_address").innerHTML;
            var address = street_address + " " + city_state_zip;//document.getElementById(street_addres +" "+ city_state_zip).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);
              }
            });
          }



    window.onload = function(){
            codeAddress();
       }
</script>

I combined the initialize() with the codeAddress() found in this example: http://code.google.com/apis/maps/documentation/javascript/geocoding.html#GeocodingStatusCodesThe reason I want to combine this because I dont want to load the map with a random LatLng, and I want it to load with a address I have already.

我将 initialize() 与在这个例子中找到的 codeAddress()结合起来：http: //code.google.com/apis/maps/documentation/javascript/geocoding.html#GeocodingStatusCodes我想结合这个的原因，因为我不想要使用随机 LatLng 加载地图，我希望它使用我已经拥有的地址加载。

Does anyone have any idea if I'm even doing this correctly?

有没有人知道我是否正确地做到了这一点？

Thanks!

谢谢！

回答by hellomello

The following modification of the script makes it work for those who was in the same boat as me. This now allows me to load a specific address when the page is loaded, it will automatically detect the lat,lng from my html.

脚本的以下修改使其适用于与我在同一条船上的人。这现在允许我在加载页面时加载特定地址，它将自动检测我的 html 中的 lat,lng。

This is a slight modification from the google's website.

这是对谷歌网站的轻微修改。

<script>
  var geocoder;
  var map;
  function codeAddress() {
    geocoder = new google.maps.Geocoder();
    var lat='';
    var lng=''
    var city_state_zip = document.getElementById("city_state_zip").innerHTML;
    var street_address = document.getElementById("street_address").innerHTML;
    var address = street_address + " " + city_state_zip;
    geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
       lat = results[0].geometry.location.lat(); //getting the lat
       lng = results[0].geometry.location.lng(); //getting the lng
       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 latlng = new google.maps.LatLng(lat, lng);
     var myOptions = {
         zoom: 8,
         center: latlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP
     }
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
     }


window.onload = function(){
       codeAddress();
}
</script>