2个Google地图在同一页面上使用地理编码 [英] 2 Google Maps working with geocoding on same page
问题描述
我使用Google地图对地址进行地理编码，并将这些信息填充到输入字段中。我可以成功完成1张地图，但我需要在我的页面上放置2张地图。每个都有自己的地理编码信息。
我试图将Javascript代码放在一起，基本上复制了我的第一张地图。
我的JavaScript如下所示：
< script type =文本/ JavaScript的>
var geocoder;
var map;
函数initialize（）{
geocoder = new google.maps.Geocoder（）;
var latlng = new google.maps.LatLng（53.2948557，-6.139267399999994）;
var mapOptions = {
zoom：10，
center：latlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
map = new google .maps.Map（document.getElementById（'map_canvas'），mapOptions）;
}
函数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
}）;
document.getElementById（input_15_169）。value = marker.getPosition（）。lat（）;
document.getElementById（input_15_167）。value = marker.getPosition（）。lng （）;
document.getElementById（input_15_92）。value = address;
} else {
alert（'由于以下原因，Geocode不成功：'+ status ）;
}
}）;
}
var geocoder;
var map2;
函数initialize（）{
geocoder = new google.maps.Geocoder（）;
var latlng = new google.maps.LatLng（53.2948557，-6.139267399999994）;
var mapOptions = {
zoom：10，
center：latlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
map2 = new google .maps.Map（document.getElementById（'map_canvas2'），mapOptions）;
}
函数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：map2，
position：results [0] .geometry.location
}）;
document.getElementById（input_16_169）。value = marker.getPosition（）。lat（）;
document.getElementById（input_16_167）。value = marker.getPosition（）。lng （）;
document.getElementById（input_16_92）。value = address;
} else {
alert（'Geocode由于以下原因不成功：'+ status ）;
}
}）;
}
< / script>
在我的html中，我给出了map 2不同的id map_canvas 和 map_canvas2
然而，当我加载我的页面时，只会出现第二张地图，尽管上面的输入字段是正确的，但试图绘制一个地址没有任何反应。
我认为我在添加第二张地图并寻找上述javascript中的一些建议时做错了什么。
感谢
JSFiddle Code here http://jsfiddle.net / JJKx5 /
你不能使用同名的方法，否则解释器不知道选择哪一个，所以把你的逻辑放在一个方法中。
http： // $ jsfiddle.net/JJKx5/1/
函数初始化（）{
geocoder = new google.maps.Geocoder（）;
var latlng = new google.maps.LatLng（53.2948557，-6.139267399999994）;
var mapOptions = {
zoom：10，
center：latlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map（document.getElementById（'map_canvas'），mapOptions）;
map2 = new google.maps.Map（document.getElementById（'map_canvas2'），mapOptions）;
}
I am using Google Maps to geo code an address and populate that information into an input field. I can do this successfully for 1 map, but I need to have 2 maps on my page. Each having their own geo-coding information.
I have attempted to put the Javascript code together, essentially duplicating my first map.
My JavaScript is as follows
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(53.2948557, -6.139267399999994);
var mapOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}
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
});
document.getElementById("input_15_169").value = marker.getPosition().lat();
document.getElementById("input_15_167").value = marker.getPosition().lng();
document.getElementById("input_15_92").value = address;
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
var geocoder;
var map2;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(53.2948557, -6.139267399999994);
var mapOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map2 = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions);
}
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: map2,
position: results[0].geometry.location
});
document.getElementById("input_16_169").value = marker.getPosition().lat();
document.getElementById("input_16_167").value = marker.getPosition().lng();
document.getElementById("input_16_92").value = address;
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>
In my html I have the given the map 2 different id's map_canvas and map_canvas2
However when I load my page, only the 2nd map appears and when I try to plot an address nothing happens even though the input fields above are correct.
I think I am doing something wrong when adding this 2nd map and looking for some advice in the above javascript.
Thanks
JSFiddle Code here http://jsfiddle.net/JJKx5/
you cant have methods with the same name otherwise the interpreter wont know which one to choose, so put your logic in the one method.
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(53.2948557, -6.139267399999994);
var mapOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
map2 = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions);
}
这篇关于2个Google地图在同一页面上使用地理编码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
