我可以使用谷歌地图引脚填充我的网页上的表格吗?

时间:2015-04-16 13:28:43

标签: php mysql database google-maps dynamic

我有一个超过600个地图标记的数据库,其中包含longitudelatitude以及客户使用的所有适用信息。

我需要创建一些东西,允许我点击地图中的引脚标记,然后附加到该引脚的任何数据(电话号码,邮政编码,地址等)从该引脚中拉出在数据库中并添加到表单中。

我可以从谷歌地图中提取数据以填充网页上的表格吗?

2 个答案:

答案 0 :(得分:4)

你需要为此做一些步骤。

从Google Developer生成密钥:

Link = https://code.google.com/apis/console/

生成key =“GeneratedKey”

<!DOCTYPE html>
    <html>
  <head>
    <style type="text/css">
      html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=YourGenerateKeyHere">
    </script>
<script>
	
   function getLocation()
    {
	var geocoder = new google.maps.Geocoder();
	var address = document.getElementById("Location").value;
	var latitude = 0;
	var longitude = 0;
	geocoder.geocode( { 'address': address}, function(results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
		latitude = results[0].geometry.location.lat();
        longitude = results[0].geometry.location.lng();
		showPosition(latitude, longitude, address);
	}
	}); 
   }
    function showPosition(latitude, longitude, address)
	{
		var mapOptions = {
          center: { lat: latitude, lng: longitude},
          zoom: 18,
		  mapTypeId: google.maps.MapTypeId.ROADMAP 
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
		var myLatlng = new google.maps.LatLng(latitude,longitude);

		var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: address,
  });

		google.maps.event.addDomListener(window, 'load', initialize);
    }
     
</script>
<body>
	<input type="text" id="Location" placeholder="Type address here" />
    <button onclick="getLocation()">Click here to see map</button>
  
<div id="map-canvas"></div>
  
</body>
</html>
</html>

答案 1 :(得分:0)

您应该能够找到有用的内容here: