Minerva :: Location Finder

Read 981 times | Created 2013-01-12 20:50:16 | Updated 2013-01-14 07:41:44 | | |
<!DOCTYPE html>
<html>
<head>
<title>Location Finder</title>
<style type="text/css">
div#bd {
    position: relative;
}
div#gmap {
    width: 100%;
    height: 300px;
}  
div.label {
  padding:5px;
  width:100px;
  float:left;
  background-color:#ffc;
  color:#009;
}
div.clear{
  clear:both;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var latlng = new google.maps.LatLng(-6.39,106.82999999999993);
var marker=false;  
var geocoder = new google.maps.Geocoder();
function initialize(latitude,longitude) {
  latlng = new google.maps.LatLng(latitude,longitude);
  var myOptions = {
    zoom: 14,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("gmap"), myOptions); 
  marker = new google.maps.Marker({
      	position: latlng, 
      	map: map
  	});
  google.maps.event.addListener(map, 'center_changed', function() {
  	var location = map.getCenter();
    placeMarker(location);
  });
  google.maps.event.addListener(map, 'zoom_changed', function() {
  	zoomLevel = map.getZoom();
  });
}
  
function placeMarker(location) {
  var clickedLocation = new google.maps.LatLng(location);
  marker.setPosition(location);
}
function findPlace(){
  var address = document.getElementById('address').value;
  var i=document.getElementById('address').selectedIndex;
  var text = document.getElementById('address').options[i].text;
  geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    var latitude = results[0].geometry.location.lat();
    var longitude = results[0].geometry.location.lng();
    initialize(latitude,longitude);
    document.getElementById('result').innerHTML="<a href='http://id.wikipedia.org/wiki/"+text.replace(/ /g,"_")+"'>"
        +text+"</a>|"+address+"|"+latitude+"|"+longitude;
    } 
  });
}

function findPlace2(){
  clearText();
  var address = document.getElementById('addtext').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    var latitude = results[0].geometry.location.lat();
    var longitude = results[0].geometry.location.lng();
    initialize(latitude,longitude);
    document.getElementById('result').innerHTML=address+"|"+latitude+"|"+longitude;
    } 
  });
}

function clearText(){
  document.getElementById('result').innerHTML="";
}

</script>
</head>
<body>
<div class="label">Select 'n Go</div> <select name="address" id="address" onChange="clearText();">
<option value="Tigaraksa">Kabupaten Tangerang</option>
<option value="Ciruas">Kabupaten Serang</option>
<option value="Rangkasbitung">Kabupaten Lebak</option>
<option value="Pandeglang">Kabupaten Pandeglang</option>
<option value="Tangerang">Kota Tangerang</option>
<option value="Serang">Kota Serang</option>
<option value="Cilegon">Kota Cilegon</option>
<option value="Ciputat">Kota Tangerang Selatan</option>
<option value="Soreang">Kabupaten Bandung</option>
<option value="Ngamprah">Kabupaten Bandung Barat</option>
<option value="Cikarang">Kabupaten Bekasi</option>
<option value="Cibinong">Kabupaten Bogor</option>
<option value="Ciamis">Kabupaten Ciamis</option>
<option value="Cianjur">Kabupaten Cianjur</option>
<option value="Sumber">Kabupaten Cirebon</option>
<option value="Garut">Kabupaten Garut</option>
<option value="Indramayu">Kabupaten Indramayu</option>
<option value="Karawang">Kabupaten Karawang</option>
<option value="Kuningan">Kabupaten Kuningan</option>
<option value="Majalengka">Kabupaten Majalengka</option>
<option value="Purwakarta">Kabupaten Purwakarta</option>
<option value="Subang">Kabupaten Subang</option>
<option value="Pelabuanratu">Kabupaten Sukabumi</option>
<option value="Sumedang">Kabupaten Sumedang</option>
<option value="Singaparna">Kabupaten Tasikmalaya</option>
<option value="Bandung">Kota Bandung</option>
<option value="Banjar">Kota Banjar</option>
<option value="Bekasi">Kota Bekasi</option>
<option value="Bogor">Kota Bogor</option>
<option value="Cimahi">Kota Cimahi</option>
<option value="Cirebon">Kota Cirebon</option>
<option value="Depok">Kota Depok</option>
<option value="Cisaat">Kota Sukabumi</option>
<option value="Tasikmalaya">Kota Tasikmalaya</option>
<option value="Pulau Pramuka">Kabupaten Administrasi Kepulauan Seribu</option>
<option value="Kebon Jeruk">Kota Administrasi Jakarta Barat</option>
<option value="Menteng">Kota Administrasi Jakarta Pusat</option>
<option value="Kebayoran Baru">Kota Administrasi Jakarta Selatan</option>
<option value="Jatinegara">Kota Administrasi Jakarta Timur</option>
<option value="Koja">Kota Administrasi Jakarta Utara</option>
<option value="Banjarnegara">Kabupaten Banjarnegara</option>
<option value="Purwokerto">Kabupaten Banyumas</option>
<option value="Batang">Kabupaten Batang</option>
<option value="Blora">Kabupaten Blora</option>
<option value="Boyolali">Kabupaten Boyolali</option>
<option value="Brebes">Kabupaten Brebes</option>
<option value="Cilacap">Kabupaten Cilacap</option>
<option value="Demak">Kabupaten Demak</option>
<option value="Purwodadi">Kabupaten Grobogan</option>
<option value="Jepara">Kabupaten Jepara</option>
<option value="Karanganyar">Kabupaten Karanganyar</option>
<option value="Kebumen">Kabupaten Kebumen</option>
<option value="Kendal">Kabupaten Kendal</option>
<option value="Klaten">Kabupaten Klaten</option>
<option value="Kudus">Kabupaten Kudus</option>
<option value="Mungkid">Kabupaten Magelang</option>
<option value="Pati">Kabupaten Pati</option>
<option value="Kajen">Kabupaten Pekalongan</option>
<option value="Pemalang">Kabupaten Pemalang</option>
<option value="Purbalingga">Kabupaten Purbalingga</option>
<option value="Purworejo">Kabupaten Purworejo</option>
<option value="Rembang">Kabupaten Rembang</option>
<option value="Ungaran">Kabupaten Semarang</option>
<option value="Sragen">Kabupaten Sragen</option>
<option value="Sukoharjo">Kabupaten Sukoharjo</option>
<option value="Slawi">Kabupaten Tegal</option>
<option value="Temanggung">Kabupaten Temanggung</option>
<option value="Wonogiri">Kabupaten Wonogiri</option>
<option value="Wonosobo">Kabupaten Wonosobo</option>
<option value="Magelang">Kota Magelang</option>
<option value="Pekalongan">Kota Pekalongan</option>
<option value="Salatiga">Kota Salatiga</option>
<option value="Semarang">Kota Semarang</option>
<option value="Surakarta">Kota Surakarta</option>
<option value="Tegal">Kota Tegal</option>
<option value="Bangkalan">Kabupaten Bangkalan</option>
<option value="Banyuwangi">Kabupaten Banyuwangi</option>
<option value="Kanigoro">Kabupaten Blitar</option>
<option value="Bojonegoro">Kabupaten Bojonegoro</option>
<option value="Bondowoso">Kabupaten Bondowoso</option>
<option value="Gresik">Kabupaten Gresik</option>
<option value="Jember">Kabupaten Jember</option>
<option value="Jombang">Kabupaten Jombang</option>
<option value="Kediri">Kabupaten Kediri</option>
<option value="Lamongan">Kabupaten Lamongan</option>
<option value="Lumajang">Kabupaten Lumajang</option>
<option value="Madiun">Kabupaten Madiun</option>
<option value="Magetan">Kabupaten Magetan</option>
<option value="Kepanjen">Kabupaten Malang</option>
<option value="Mojokerto">Kabupaten Mojokerto</option>
<option value="Nganjuk">Kabupaten Nganjuk</option>
<option value="Ngawi">Kabupaten Ngawi</option>
<option value="Pacitan">Kabupaten Pacitan</option>
<option value="Pamekasan">Kabupaten Pamekasan</option>
<option value="Pasuruan">Kabupaten Pasuruan</option>
<option value="Ponorogo">Kabupaten Ponorogo</option>
<option value="Kraksaan">Kabupaten Probolinggo</option>
<option value="Sampang">Kabupaten Sampang</option>
<option value="Sidoarjo">Kabupaten Sidoarjo</option>
<option value="Situbondo">Kabupaten Situbondo</option>
<option value="Sumenep">Kabupaten Sumenep</option>
<option value="Trenggalek">Kabupaten Trenggalek</option>
<option value="Tuban">Kabupaten Tuban</option>
<option value="Tulungagung">Kabupaten Tulungagung</option>
<option value="Kota Batu">Kota Batu</option>
<option value="Blitar">Kota Blitar</option>
<option value="Kediri">Kota Kediri</option>
<option value="Madiun">Kota Madiun</option>
<option value="Malang">Kota Malang</option>
<option value="Mojokerto">Kota Mojokerto</option>
<option value="Pasuruan">Kota Pasuruan</option>
<option value="Probolinggo">Kota Probolinggo</option>
<option value="Surabaya">Kota Surabaya</option>
<option value="Bantul">Kabupaten Bantul</option>
<option value="Wonosari">Kabupaten Gunung Kidul</option>
<option value="Wates">Kabupaten Kulon Progo</option>
<option value="Sleman">Kabupaten Sleman</option>
<option value="Yogyakarta">Kota Yogyakarta</option>
</select>
<input type="button" value="go" onClick="findPlace();"/>
<div class="clear"></div>
<div class="label">Type 'n Go</div><input type="text" id="addtext" />
<input type="button" value="go" onClick="findPlace2();"/>
<div class="clear"></div>
<div id="result"></div>
<div class="clear"></div>
<div id="bd">
<div id="gmap"></div>  
</div>
</body>
</html>
Snippet Code Location Finder
