Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script src="http://app.essoduke.org/js/tinyMap/jquery.tinyMap-3.3.11.js"></script>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  
<style>
  .map {
        width: 640px;
        height: 480px;
    }
</style>
</head>
<body>
經度:<input type='text' name="tbxlng" id="tbxlng" value='121.564621925354' onchange="ChangeMarker()">
緯度:<input type='text' name="tbxlat" id="tbxlat" value='25.03354442783431'  onchange="ChangeMarker()">
<br/>
地址:<input type='text' name="tbxAddr" id="tbxAddr" style="width:300px">
​
<div class="map"></div>
<script>
var map = $(".map");
​
GetAddress($("#tbxlat").val(), $("#tbxlng").val());
​
map.tinyMap({
    'center': '台北市信義區台北101',
    'zoom'  : 14,
    'marker' :[{'addr': [$("#tbxlat").val(), $("#tbxlng").val()], 'text': $("#tbxAddr").val()},],
    'event': {
        'click': function (e) {
            map.tinyMap('clear');
            
            GetAddress(e.latLng.lat(), e.latLng.lng());
            
            $("#tbxlng").val(e.latLng.lng());
            $("#tbxlat").val(e.latLng.lat());
            
            map.tinyMap('panTo', [e.latLng.lat(), e.latLng.lng()]);
            map.tinyMap('modify', {             
                'marker': [
                    {
                        'addr': [e.latLng.lat(), e.latLng.lng()],
                        'text': $("#tbxAddr").val()
                    }
                ]
            });
        }
    }
});
​
function ChangeMarker(){
    
    map.tinyMap('panTo',  [$("#tbxlat").val(), $("#tbxlng").val()]);
    map.tinyMap('clear');
    
    GetAddress($("#tbxlat").val(), $("#tbxlng").val());
    
    map.tinyMap('modify', {
        'marker': [
            {
                'addr': [$("#tbxlat").val(), $("#tbxlng").val()], 
                'text': $("#tbxAddr").val()
            }
        ]
    });
}
​
function GetAddress(lat,lng)
{
    var geocoder = new google.maps.Geocoder();
    var latlng = {lat: parseFloat(lat), lng: parseFloat(lng)};
​
    geocoder.geocode({
      'latLng': latlng
    }, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            if (results) {
                var addr = results[0].formatted_address;
                $("#tbxAddr").val(addr);
            }
        } else {
            alert("Reverse Geocoding failed because: " + status);
        }
    });
}
</script>
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers