我可以使用Google地图图钉来填充我的网页上的表单吗? [英] Can I use google maps pins to populate a form on my webpage?

查看:144
本文介绍了我可以使用Google地图图钉来填充我的网页上的表单吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I have a database of over 600 map markers with longitude and latitude and all the applicable information for them to be used by the clients.

我需要创建一些东西,允许我点击地图中的pin标记,然后附加到该pin的任何数据(电话号码,邮政编码,地址,

I need to create something that allows me to click the pin marker within the map and then any data attached to that pin (phone number, postcode, address, etc) to be pulled from that pin in the database and be added into the form.

我可以从google地图中提取数据,以填充表单中的网页?

Can I extract data from google maps to populate a form on the webpage?

推荐答案

您需要为此执行某些步骤。

you need to do certain steps for this.

从Google开发人员生成密钥:

Generate key from Google Developer :

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

generated key = GeneratedKey

generated 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>

这篇关于我可以使用Google地图图钉来填充我的网页上的表单吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆