API tools faq
paste
Advertisement
cahyadsn

location finder

cahyadsn
Nov 24th, 2015
225
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 9.62 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Location Finder</title>
  5. <style type="text/css">
  6. div#bd {
  7.     position: relative;
  8. }
  9. div#gmap {
  10.     width: 100%;
  11.     height: 300px;
  12. }  
  13. div.label {
  14.   padding:5px;
  15.   width:100px;
  16.   float:left;
  17.   background-color:#ffc;
  18.   color:#009;
  19. }
  20. div.clear{
  21.   clear:both;
  22. }
  23. </style>
  24. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  25. <script type="text/javascript">
  26. var map;
  27. var latlng = new google.maps.LatLng(-6.39,106.82999999999993);
  28. var marker=false;  
  29. var geocoder = new google.maps.Geocoder();
  30. function initialize(latitude,longitude) {
  31.   latlng = new google.maps.LatLng(latitude,longitude);
  32.   var myOptions = {
  33.     zoom: 14,
  34.     center: latlng,
  35.     mapTypeId: google.maps.MapTypeId.ROADMAP
  36.   }
  37.   map = new google.maps.Map(document.getElementById("gmap"), myOptions);
  38.   marker = new google.maps.Marker({
  39.         position: latlng,
  40.         map: map,
  41.         draggable: true
  42.         });
  43.   /*
  44.   google.maps.event.addListener(map, 'center_changed', function() {
  45.         var location = map.getCenter();
  46.     placeMarker(location);
  47.   });
  48.  
  49.   google.maps.event.addListener(map, 'zoom_changed', function() {
  50.         zoomLevel = map.getZoom();
  51.   });
  52.   */
  53.   google.maps.event.addListener(marker, 'dragend', function(evt){
  54.       document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
  55.   });
  56.  
  57.   google.maps.event.addListener(marker, 'dragstart', function(evt){
  58.       document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
  59.   });  
  60. }
  61.  
  62. function placeMarker(location) {
  63.   var clickedLocation = new google.maps.LatLng(location);
  64.   marker.setPosition(location);
  65. }
  66. function findPlace(){
  67.   var address = document.getElementById('address').value;
  68.   var i=document.getElementById('address').selectedIndex;
  69.   var text = document.getElementById('address').options[i].text;
  70.   geocoder.geocode( { 'address': address}, function(results, status) {
  71.   if (status == google.maps.GeocoderStatus.OK) {
  72.     var latitude = results[0].geometry.location.lat();
  73.     var longitude = results[0].geometry.location.lng();
  74.     initialize(latitude,longitude);
  75.     document.getElementById('result').innerHTML="<a href='http://id.wikipedia.org/wiki/"+text.replace(/ /g,"_")+"'>"+text+"</a>|"+address+"|"+latitude+"|"+longitude;
  76.     }
  77.   });
  78. }
  79.  
  80. function findPlace2(){
  81.   clearText();
  82.   var address = document.getElementById('addtext').value;
  83.   geocoder.geocode( { 'address': address}, function(results, status) {
  84.   if (status == google.maps.GeocoderStatus.OK) {
  85.     var latitude = results[0].geometry.location.lat();
  86.     var longitude = results[0].geometry.location.lng();
  87.     initialize(latitude,longitude);
  88.     document.getElementById('result').innerHTML=address+"|"+latitude+"|"+longitude;
  89.     }
  90.   });
  91. }
  92.  
  93. function clearText(){
  94.   document.getElementById('result').innerHTML="";
  95. }
  96.  
  97. </script>
  98. </head>
  99. <body>
  100. <div class="label">Select 'n Go</div> <select name="address" id="address" onChange="clearText();">
  101. <option value="Tigaraksa">Kabupaten Tangerang</option>
  102. <option value="Ciruas">Kabupaten Serang</option>
  103. <option value="Rangkasbitung">Kabupaten Lebak</option>
  104. <option value="Pandeglang">Kabupaten Pandeglang</option>
  105. <option value="Tangerang">Kota Tangerang</option>
  106. <option value="Serang">Kota Serang</option>
  107. <option value="Cilegon">Kota Cilegon</option>
  108. <option value="Ciputat">Kota Tangerang Selatan</option>
  109. <option value="Soreang">Kabupaten Bandung</option>
  110. <option value="Ngamprah">Kabupaten Bandung Barat</option>
  111. <option value="Cikarang">Kabupaten Bekasi</option>
  112. <option value="Cibinong">Kabupaten Bogor</option>
  113. <option value="Ciamis">Kabupaten Ciamis</option>
  114. <option value="Cianjur">Kabupaten Cianjur</option>
  115. <option value="Sumber">Kabupaten Cirebon</option>
  116. <option value="Garut">Kabupaten Garut</option>
  117. <option value="Indramayu">Kabupaten Indramayu</option>
  118. <option value="Karawang">Kabupaten Karawang</option>
  119. <option value="Kuningan">Kabupaten Kuningan</option>
  120. <option value="Majalengka">Kabupaten Majalengka</option>
  121. <option value="Purwakarta">Kabupaten Purwakarta</option>
  122. <option value="Subang">Kabupaten Subang</option>
  123. <option value="Pelabuanratu">Kabupaten Sukabumi</option>
  124. <option value="Sumedang">Kabupaten Sumedang</option>
  125. <option value="Singaparna">Kabupaten Tasikmalaya</option>
  126. <option value="Bandung">Kota Bandung</option>
  127. <option value="Banjar">Kota Banjar</option>
  128. <option value="Bekasi">Kota Bekasi</option>
  129. <option value="Bogor">Kota Bogor</option>
  130. <option value="Cimahi">Kota Cimahi</option>
  131. <option value="Cirebon">Kota Cirebon</option>
  132. <option value="Depok">Kota Depok</option>
  133. <option value="Cisaat">Kota Sukabumi</option>
  134. <option value="Tasikmalaya">Kota Tasikmalaya</option>
  135. <option value="Pulau Pramuka">Kabupaten Administrasi Kepulauan Seribu</option>
  136. <option value="Kebon Jeruk">Kota Administrasi Jakarta Barat</option>
  137. <option value="Menteng">Kota Administrasi Jakarta Pusat</option>
  138. <option value="Kebayoran Baru">Kota Administrasi Jakarta Selatan</option>
  139. <option value="Jatinegara">Kota Administrasi Jakarta Timur</option>
  140. <option value="Koja">Kota Administrasi Jakarta Utara</option>
  141. <option value="Banjarnegara">Kabupaten Banjarnegara</option>
  142. <option value="Purwokerto">Kabupaten Banyumas</option>
  143. <option value="Batang">Kabupaten Batang</option>
  144. <option value="Blora">Kabupaten Blora</option>
  145. <option value="Boyolali">Kabupaten Boyolali</option>
  146. <option value="Brebes">Kabupaten Brebes</option>
  147. <option value="Cilacap">Kabupaten Cilacap</option>
  148. <option value="Demak">Kabupaten Demak</option>
  149. <option value="Purwodadi">Kabupaten Grobogan</option>
  150. <option value="Jepara">Kabupaten Jepara</option>
  151. <option value="Karanganyar">Kabupaten Karanganyar</option>
  152. <option value="Kebumen">Kabupaten Kebumen</option>
  153. <option value="Kendal">Kabupaten Kendal</option>
  154. <option value="Klaten">Kabupaten Klaten</option>
  155. <option value="Kudus">Kabupaten Kudus</option>
  156. <option value="Mungkid">Kabupaten Magelang</option>
  157. <option value="Pati">Kabupaten Pati</option>
  158. <option value="Kajen">Kabupaten Pekalongan</option>
  159. <option value="Pemalang">Kabupaten Pemalang</option>
  160. <option value="Purbalingga">Kabupaten Purbalingga</option>
  161. <option value="Purworejo">Kabupaten Purworejo</option>
  162. <option value="Rembang">Kabupaten Rembang</option>
  163. <option value="Ungaran">Kabupaten Semarang</option>
  164. <option value="Sragen">Kabupaten Sragen</option>
  165. <option value="Sukoharjo">Kabupaten Sukoharjo</option>
  166. <option value="Slawi">Kabupaten Tegal</option>
  167. <option value="Temanggung">Kabupaten Temanggung</option>
  168. <option value="Wonogiri">Kabupaten Wonogiri</option>
  169. <option value="Wonosobo">Kabupaten Wonosobo</option>
  170. <option value="Magelang">Kota Magelang</option>
  171. <option value="Pekalongan">Kota Pekalongan</option>
  172. <option value="Salatiga">Kota Salatiga</option>
  173. <option value="Semarang">Kota Semarang</option>
  174. <option value="Surakarta">Kota Surakarta</option>
  175. <option value="Tegal">Kota Tegal</option>
  176. <option value="Bangkalan">Kabupaten Bangkalan</option>
  177. <option value="Banyuwangi">Kabupaten Banyuwangi</option>
  178. <option value="Kanigoro">Kabupaten Blitar</option>
  179. <option value="Bojonegoro">Kabupaten Bojonegoro</option>
  180. <option value="Bondowoso">Kabupaten Bondowoso</option>
  181. <option value="Gresik">Kabupaten Gresik</option>
  182. <option value="Jember">Kabupaten Jember</option>
  183. <option value="Jombang">Kabupaten Jombang</option>
  184. <option value="Kediri">Kabupaten Kediri</option>
  185. <option value="Lamongan">Kabupaten Lamongan</option>
  186. <option value="Lumajang">Kabupaten Lumajang</option>
  187. <option value="Madiun">Kabupaten Madiun</option>
  188. <option value="Magetan">Kabupaten Magetan</option>
  189. <option value="Kepanjen">Kabupaten Malang</option>
  190. <option value="Mojokerto">Kabupaten Mojokerto</option>
  191. <option value="Nganjuk">Kabupaten Nganjuk</option>
  192. <option value="Ngawi">Kabupaten Ngawi</option>
  193. <option value="Pacitan">Kabupaten Pacitan</option>
  194. <option value="Pamekasan">Kabupaten Pamekasan</option>
  195. <option value="Pasuruan">Kabupaten Pasuruan</option>
  196. <option value="Ponorogo">Kabupaten Ponorogo</option>
  197. <option value="Kraksaan">Kabupaten Probolinggo</option>
  198. <option value="Sampang">Kabupaten Sampang</option>
  199. <option value="Sidoarjo">Kabupaten Sidoarjo</option>
  200. <option value="Situbondo">Kabupaten Situbondo</option>
  201. <option value="Sumenep">Kabupaten Sumenep</option>
  202. <option value="Trenggalek">Kabupaten Trenggalek</option>
  203. <option value="Tuban">Kabupaten Tuban</option>
  204. <option value="Tulungagung">Kabupaten Tulungagung</option>
  205. <option value="Kota Batu">Kota Batu</option>
  206. <option value="Blitar">Kota Blitar</option>
  207. <option value="Kediri">Kota Kediri</option>
  208. <option value="Madiun">Kota Madiun</option>
  209. <option value="Malang">Kota Malang</option>
  210. <option value="Mojokerto">Kota Mojokerto</option>
  211. <option value="Pasuruan">Kota Pasuruan</option>
  212. <option value="Probolinggo">Kota Probolinggo</option>
  213. <option value="Surabaya">Kota Surabaya</option>
  214. <option value="Bantul">Kabupaten Bantul</option>
  215. <option value="Wonosari">Kabupaten Gunung Kidul</option>
  216. <option value="Wates">Kabupaten Kulon Progo</option>
  217. <option value="Sleman">Kabupaten Sleman</option>
  218. <option value="Yogyakarta">Kota Yogyakarta</option>
  219. </select>
  220. <input type="button" value="go" onClick="findPlace();"/>
  221. <div class="clear"></div>
  222. <div class="label">Type 'n Go</div><input type="text" id="addtext" />
  223. <input type="button" value="go" onClick="findPlace2();"/>
  224. <div class="clear"></div>
  225. <div id="result"></div>
  226. <div class="clear"></div>
  227. <div id="current"></div>
  228. <div class="clear"></div>
  229. <div id="bd">
  230. <div id="gmap"></div>  
  231. </div>
  232. </body>
  233. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!