谷歌地图按地址未显示

时间:2014-03-02 20:52:38

标签: javascript html google-maps

我有两个脚本。当状态/县下拉时更改它将激活它将进行地址查找并转到该特定县。第二个脚本我在表单中填充了经度和纬度文本框。我想把两者结合起来。后一个脚本使用静态经度/纬度,我需要它使用像我在第一个脚本中使用的地址。在尝试将两者结合起来时,我的代码中出现了错误。地图甚至不会出现。

function selectState(state_id){
     if(state_id!="-1"){
      loadData('city',state_id);
var e = document.getElementById("state");
var stateloc = e.options[e.selectedIndex].value;

   var sAddress = state_id + stateloc;

    var $latitude = document.getElementById('latitude');
    var $longitude = document.getElementById('longitude');
    //var latitude = 33.00636021320537
   // var longitude = -93.46687316894531;
    var zoom = 12;
    var geocoder;

    //var LatLng = new google.maps.LatLng(latitude, longitude);
geocoder = new google.maps.Geocoder();

geocoder.geocode( { 'address': sAddress}, function(results, status)
{
    if (status == google.maps.GeocoderStatus.OK)
    {


    map.setCenter(results[0].geometry.location);



var mapOptions = {
  zoom: zoom,
  //center: LatLng,
  panControl: false,
  zoomControl: true,
  scaleControl: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}  

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

var marker = new google.maps.Marker({
 // position: LatLng,
 position: results[0].geometry.location,
  map: map,
  title: 'Drag Me!',
  draggable: true
});

google.maps.event.addListener(marker, 'dragend', function(marker){
  var latLng = marker.latLng;
  $latitude.value = latLng.lat();
  $longitude.value = latLng.lng();
});




//end geocoder check
        }
    else
    {
            alert("Geocode was not successful: " + status);
    }

    });




     }else{
       $("#city_dropdown").html("<option value='-1'>Select city</option>");
     }
   }

HTML

<li>
    <label for="lat">Latitude:</label>
    <input id="latitude" placeholder="latitude" name="lat" type="text" class="text" />
</li>
<li>
    <label for="lon">Longitude:</label>
    <input id="longitude" placeholder="longitude" name="lon" class="text" type="text"/>
</li>

   <div id="map" style="width: 460px; height: 350px;"></div>

1 个答案:

答案 0 :(得分:0)

您设置了未定义地图的中心。因此,如果其他一切都没问题,你必须改变这一部分:

       ...
       if (status == google.maps.GeocoderStatus.OK) {
            // map is undefined here
            // map.setCenter(results[0].geometry.location);

            var mapOptions = {
                zoom: zoom,
                // center could be set here
                center: results[0].geometry.location,
                panControl: false,
                zoomControl: true,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }  

            // map is created here
            var map = new google.maps.Map(document.getElementById('map'),mapOptions);
            ...