在1頁搜索多個Google地圖並縮放問題

我今天在Google Map問題上獲得了很大的幫助，並且在我通過我的代碼處理更多東西時彈出了對話框。所以這裏是另一個我希望得到幫助的問題。在1頁搜索多個Google地圖並縮放問題

有2件

1）我已經調整了我的代碼顯示在同一頁面上2×谷歌地圖。我的谷歌地圖是這樣的

用戶搜索地址，結果是

地圖上顯示的位置的銷
朗和緯度字段填入座標呼籲
輸入字段辦公室名稱填入搜索查詢。

這一切都有效，當我有1地圖。但是，當我一個MAP2添加到下面的代碼，我不知道如何編寫代碼來分割地圖和MAP2的結果

我的代碼嘗試如下（頭）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<script type="text/javascript" 
     src="http://maps.googleapis.com/maps/api/js?sensor=true"> 
    </script> 
<script type="text/javascript"> 

var geocoder; 
var map,map2; 

function initialize(condition) { 
    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); 
} 

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); 
     } 
    }); 
    } 

</script>

和我的身體看起來像這樣

<body onload="initialize()" onunload="GUnload()"> 
    <p>To Add your Google Map you must first plot your address by searching</p> 
    <p> 
    <input id="address" type="textbox" value="" placeholder="Search For Your Address"> 
    <input type="button" value="Plot Your Address" onclick="codeAddress()"> 
    </p> 

    <div id="latlong"> 
     <p>Office Name: <input size="20" type="text" id="input_15_92" name="ofn" ></p> 
     <p>Latitude: <input size="20" type="text" id="input_15_169" name="lat" ></p> 
     <p>Longitude: <input size="20" type="text" id="input_15_167" name="lng" ></p> 
    </div> 

    <div id="map_canvas" style="width: 600px; height: 400px"></div> 

    <p>To Add your Google Map you must first plot your address by searching</p> 
    <p> 
    <input id="address2" type="textbox" value="" placeholder="Search For Your Address"> 
    <input type="button" value="Plot Your Address" onclick="codeAddress()"> 
    </p> 

    <div id="latlong"> 
     <p>Office Name: <input size="20" type="text" id="input_16_92" name="ofn" ></p> 
     <p>Latitude: <input size="20" type="text" id="input_16_169" name="lat" ></p> 
     <p>Longitude: <input size="20" type="text" id="input_16_167" name="lng" ></p> 
    </div> 

    <div id="map_canvas2" style="width: 600px; height: 400px"></div> 

</body> 
</html>

我知道在我的javascript電流上面我缺少的代碼來填充第二張地圖應該是這個樣子的領域，但我不知道在哪裏放置它們

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;

////

2）第二個問題是變焦做。我看到我可以在代碼開始時將縮放級別設置爲zoom: 10,，該代碼給出了地圖的縮放級別。我想知道是否可以在找到結果時有一個不同的縮放比例，即在用戶搜索後，我希望能稍微放大一點！

在此先感謝

來源

2012-10-19 Redwall

我會建議一個不同的標記。

裹輸入和地圖成一種形式，像這樣：

<form style="width:220px;float:left;"> 
     <input name="address" value="" placeholder="Search For Your Address"/> 
     <input type="button" value="Plot Your Address" onclick="codeAddress(this.form)"/> 
     <input size="20" type="text" name="ofn" /> 
     <input size="20" type="text" name="lat" /> 
     <input size="20" type="text" name="lng" /> 
     <div class="map_canvas" style="width: 200px; height: 200px"></div> 
    </form>

好處：

你現在可以加載地圖動態，沒有地圖的數量的知識。你可能會document.querySelectorAll('form>.map_canvas');方便地選擇他們，得到的節點列表，你可以使用一個循環中創建的地圖：

var maps=document.querySelectorAll('form>.map_canvas'); 
    for(var i=0;i<maps.length;++i) 
    { 
     maps[i].parentNode.map=new google.maps.Map(maps[i], mapOptions); 
    }

注：創建全球地圖變量代替的地圖將被存儲爲一個屬性的形式，讓您可以通過使用formElement.map

還要注意的codeAddress()通話後進入地圖，它現在有一個說法this.form，它指的是點擊按鈕所屬的形式。

通過使用該參數，你能夠訪問所希望的形式內的輸入和圖：

功能codeAddress（形式）{

var address=form.address.value 
geocoder.geocode({ 'address': address}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 

    form.map.setCenter(results[0].geometry.location); 
    var marker = new google.maps.Marker({ 
     map: form.map, 
     position: results[0].geometry.location 
    }); 
    form.map.setZoom(18); 
    form.lat.value = marker.getPosition().lat(); 
    form.lng.value = marker.getPosition().lng(); 
    form.ofn.value = address; 

    } else { 
    alert('Geocode was not successful for the following reason: ' + status); 
    } 
});

}

縮放可以被設置通過使用setZoom-method af地圖（它已經在我的建議中實現）

演示：http://jsfiddle.net/doktormolle/Tpgdd/

來源

2012-10-20 01:26:59

嗨，這看起來像一個很棒的解決方案，謝謝你的詳細介紹。我今天要嘗試和實施。我實際上使用了Gravity Form，並且在表單中的2個不同位置插入了html，所以我的html標記並不那麼靈活。說當我今天讀到你的詳細信息時，我確信我可以調整它以適應當前的領域。我希望:)再次感謝 – Redwall

我不知道如何與您聯繫。你給了我一個很好的答案，現在我正在調整，但是碰到一堵磚牆。想知道如果你能看看我的JSfiddle在這裏http://goo.gl/kk1td謝謝 – Redwall

在1頁搜索多個Google地圖並縮放問題

回答

相關問題