如何顯示Google地圖的網格？

Question

我有兩個字段的表單：

• 第一個允許進入城市
• 第二個允許進入提供的地址

這兩個數據，我應該使用谷歌API來創建地圖。 每次單擊該按鈕時，表單都會創建一個新地圖。 我是這樣做的。

HTML代碼：

<form method="post" action="../public/maps.php" id="upload"> 
    <table> 
     <tr> 
      <td>City:</td> 
      <td><input type="text" name="city" id="city"/></td> 
     </tr> 
     <tr> 
      <td>Address:</td> 
      <td><input type="text" name="address" id="address"/></td>       
     </tr> 
     <tr> 
      <td> 
       <input type="submit" name="submit-maps" value="Post" onClick="createMap()"/> 
      </td> 
     </tr> 
    </table> 
</form> 

<div id="content_map-canvas"></div> 

Javascript代碼：

var geocoder; 
var map; 
var city; 
var address; 
var count = 0; 

function createMap() { 
    var city = document.getElementById('city').value; 
    var address = document.getElementById('address').value; 
    var city_address = city+address; 
    var description = city+address; 
    showMap(city_address, description); 
} 

function showMap(city_address, description) { 
    geocoder = new google.maps.Geocoder(); 
    var options = { 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

    //Creates the new div 
    count = count + 1; 
    var id = "map-canvas" + count; 
    var div = document.createElement("div"); 
    div.id = id; 
    document.getElementById('content_map-canvas').appendChild(div); 

    //Creates the map 
    map = new google.maps.Map(document.getElementById(id), options); 
    geocoding(city_address, description); 
} 

function geocoding(city_address, description) { 
    geocoder.geocode({'address': city_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, 
       title: description 
     }); 
     marker.setAnimation(google.maps.Animation.DROP); 

     contentString = description; 
     var infowindow = new google.maps.InfoWindow({ 
     content: contentString 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map, marker); 
     }); 
    } 
    });  
} 

該代碼不起作用。當我點擊按鈕時，不要製作地圖。 我從來沒有使用過Google API，所以我肯定會犯一個愚蠢的錯誤。謝謝:)

Answer 1

你有問題：

• 你的地圖的div（即動態創建）不具有尺寸（所以你不能看到他們）。

  div.style.width= "300px"; 
  div.style.height= "300px"; 
  

• 您的表單處理函數需要返回false，否則頁面將重新加載。

  <input type="submit" name="submit-maps" value="Post" onClick="createMap(); return false;"/> 
  

• 您的地址字段連接使地址無效。

  var city = document.getElementById('city').value; 
  var address = document.getElementById('address').value; 
  var city_address = city+address; 
  var description = city+address; 
  showMap(city_address, description); 
  

給的東西，如：城市：紐約，地址： 「100百老匯」 - > 「新建York100百老匯」，你可能想要的東西，看起來像一個地址，在經過：

var city = document.getElementById('city').value; 
    var address = document.getElementById('address').value; 
    var city_address = address+", "+city; 
    var description = address+", "+city; 
    showMap(city_address, description); 

• 如果地理編碼器 「狀態」 不是 「OK」，它靜靜地失敗，是不好的做法，添加其他情況：

  else alert("Geocode failed:"+status+", "+city_address); 
  

個

working example