Get Longtitude and GetLatitude – sử dụng google maps

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Get Lat Lon Finder</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<style type="text/css">
body {
    margin: 0;
    padding: 0;
    font-family: "Gill sans", sans-serif;
    background-color: #fff;
    color: #000;
}
div#bd {
    position: relative;
}
div#gmap {
    width: 100%;
    height: 500px;
}
</style>
http://maps.google.com/maps/api/js?sensor=false

var map;
var marker=false;
function initialize() {
    
  var myLatlng = new google.maps.LatLng(38.909017951243754,1.4319777488708496);
  var myLatlng = new google.maps.LatLng(34.49648586452719,73.35619300603867); //for my home
  
  var myOptions = {
    zoom: 19,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  
  map = new google.maps.Map(document.getElementById("gmap"), myOptions);
  
  marker = new google.maps.Marker({
          position: myLatlng, 
          map: map
      });
    
  google.maps.event.addListener(map, 'center_changed', function() {
      var location = map.getCenter();
    document.getElementById("lat").innerHTML = location.lat();
    document.getElementById("lon").innerHTML = location.lng();
    placeMarker(location);
  });
  google.maps.event.addListener(map, 'zoom_changed', function() {
      zoomLevel = map.getZoom();
    document.getElementById("zoom_level").innerHTML = zoomLevel;
  });
  google.maps.event.addListener(marker, 'dblclick', function() {
    zoomLevel = map.getZoom()+1;
    if (zoomLevel == 20) {
     zoomLevel = 10;
       }   
    document.getElementById("zoom_level").innerHTML = zoomLevel; 
    map.setZoom(zoomLevel);
    
  });
  
  document.getElementById("zoom_level").innerHTML = 14; 
  document.getElementById("lat").innerHTML = 38.909017951243754;
  document.getElementById("lon").innerHTML = 1.4319777488708496;
}
  
function placeMarker(location) {
  var clickedLocation = new google.maps.LatLng(location);
  marker.setPosition(location);
}
window.onload = function(){initialize();};


</head>
<body>
<center>
    
lat:<span id="lat"></span> lon:<span id="lon"></span><br/> zoom level: <span id="zoom_level"></span> </div> </center> </body> </html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s