標籤：
1 <apex:page > 2 <head> 3 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 4 <script type="text/javascript" src="http://maps.google.cn/maps/api/js?sensor=false"></script> 5 <script type="text/javascript"> 6 function myLoad() { 7 8 9 lat = document.getElementById("{!$Component.form.pageBlock1.text1}").value;10 11 12 lng = document.getElementById("{!$Component.form.pageBlock1.text2}").value;13 14 var myLatLng = new google.maps.LatLng(lat, lng);15 var myOptions = {16 zoom: 15,17 center: myLatLng, 18 mapTypeId: google.maps.MapTypeId.ROADMAP19 };20 var map = new google.maps.Map(document.getElementById("map"), myOptions);21 22 var marker = new google.maps.Marker({23 position: myLatLng,24 draggable: true25 });26 marker.setMap(map);27 28 var win2 = null;29 //添加了偵聽每次移動都會產生新的win1，但是會重疊覆蓋；30 google.maps.event.addListener(marker, ‘dragend‘, function() {31 var win1 = new google.maps.InfoWindow({32 content: "経度:" + marker.position.lat() + " " + "緯度:" + marker.position.lng()33 });34 win1.open(map, marker);35 //每次都關閉上一個就不會有重複了；36 if(win2) {37 win2.close();38 }39 win2 = win1;40 });41 }42 window.onload = myLoad;43 </script> 44 </head>45 <body>46 <style>47 #map {48 width: 500px;49 height: 400px;50 float: left;51 }52 </style>53 <div id="map"></div>54 <apex:form id="form">55 <apex:pageBlock id="pageBlock1">56 <apex:inputText id="text1"/>57 <apex:inputText id="text2"/>58 <apex:pageBlockButtons >59 <apex:commandButton onclick="myLoad()" value="change"/>60 </apex:pageBlockButtons>61 </apex:pageBlock>62 <apex:pageBlock >63 64 65 </apex:pageBlock>66 67 </apex:form>68 </body>69 </apex:page>
其實就是這兩句話啦。在下面添加兩個 apex:inputText輸入框，設定上ID然後後通過{!$Component.form.pageBlock1.text1}每一級的ID擷取，就可以擷取到你輸入的地址然後定位了。
lat = document.getElementById("{!$Component.form.pageBlock1.text1}").value;10 11 12 lng = document.getElementById("{!$Component.form.pageBlock1.text2}").value;
本列要注意的地方有很多
1，必須用IE瀏覽器開啟WIN10的不好用；
2，我原來擷取ID的時候是在瀏覽器頁面按F12，然後選擇你要的組件，它就會告訴你ID。好處是不需要自己手動的給每一級都添加ID，缺點也很明顯就是每次只要你改動<body></body>裡面的內容，id就會改變，每次都要重新擷取，直到我看見了別人這麼寫才…………
3，就是上一個例子裡提到的
marker.position.lat()
marker.position.lng()這兩個方法，草雞好用，直接幫擷取到經緯度。
4，這是我最無語錯誤，由於本例剛剛載入完畢的時候，是沒有輸入經緯度的，所以它有一個預設的地址，是在海上……在海上……海上……以至於我以為一直沒有載入出來，直到我師傅過來撥了撥我的滑鼠滾輪（縮放）然後才看見其他的東西，
5，就是其實可以不用添加button組件的，只要輸入新的經緯度，enter就可以跳轉，這個很神奇為什麼enter的時候inputText裡面的東西沒被清空，被保留了呢？求教！！！
初識SFDC建立一個google map（添加了marker小表徵圖讓他可以去到你輸入的經緯度上）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
