2013-06-22 3 views
-1

Следующий код, отображающий карту, а также отображение части div, но не отображающей точку маркера на карте, может помочь мне заранее!API геокодирования Google Maps

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">               </script> 

<script> 
    var myCenter=new google.maps.LatLng(17.382094947877505,78.431396484375); 
    var geocoder,map; 

    function initialize() 
    { 
     geocoder = new google.maps.Geocoder(); 
     var mapProp = { 
      center:myCenter, 
      zoom:5, 
      mapTypeId:google.maps.MapTypeId.ROADMAP 
     }; 

     var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 
    } 

    function codeAddress() { 
     var address = document.getElementById('address').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); 
      } 
     }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 

<body> 
    <div id="pannel"> 
     <input type="address" type="textbox" value="hyderbad,Andhra Pradesh"> 
     <input type="button" value="Geocode" onclick="codeAddress();"> 
    </div> 
    <div id="googleMap" style="width:1200px;height:800px;"></div> 
</body> 
</html> 
+0

Объявите переменные один раз, с вар в верхней (вар карте). Затем просто повторно назначьте их без var (в функции инициализации) http://jsfiddle.net/B5ZM7/ – jamiltz

+1

В следующий раз, пожалуйста, положите некоторое время на форматирование своего кода, прежде чем публиковать его, действительно сложно собрать силу чтобы прочитать ваш код, если он не имеет отступов должным образом. –

ответ

0

Там в 2 вещи, которые нужно сделать, чтобы сделать код работы:

  1. Убедитесь, что поле ввода имеет атрибут id (так как вы используете document.getElementById)
  2. Не переинициализировать map переменная

Так входной адрес должен выглядеть следующим образом:

<input id="address" type="text" value="hyderbad,Andhra Pradesh"> 

И карта конкретизации:

map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 

Вот полный код:

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script> 
     var myCenter=new google.maps.LatLng(17.382094947877505,78.431396484375); 
     var geocoder,map; 

     function initialize() { 
     geocoder = new google.maps.Geocoder(); 
     var mapProp = { 
      center:myCenter, 
      zoom:5, 
      mapTypeId:google.maps.MapTypeId.ROADMAP 
     }; 

     map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 
     } 

     function codeAddress() { 
     var address = document.getElementById('address').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); 
      } 
     }); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
</head> 
<body> 
    <div id="panel"> 
     <input id="address" type="text" value="hyderbad,Andhra Pradesh"> 
     <input type="button" value="Geocode" onclick="codeAddress();"> 
    </div> 
    <div id="googleMap" style="width:1200px;height:800px;"></div> 
</body> 
</html>