如何显示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