Google Maps Üzerinden Koordinat Yazdırma
Merhaba Arkadaşlar,
Bazen formlarda kullanıcıdan harita koordinat bilgisi almamız gerekebilir. Bu işlem Google Maps ile oldukça basit. Aşağıda kodları görebileceğiniz şekilde harita üzerinde hareket ettirilen maker’ın (icon) bulunduğu koordinat yandaki inputta enlem ve boylam olarak yazıyor. Kodlar içinden harita üzerindeki sembolu ve ilk başlangıç noktasını kolayca değiştirebilirsiniz. Çalışır haini buradaki dosyada bulabilirsiniz.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerPosition(latLng) {
document.getElementById('txtposition').value=latLng.lat() + ',' + latLng.lng() ;
}
function initialize() {
var latLng = new google.maps.LatLng(41.0072588, 29.0866961);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 7,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var iconBase = 'location.png';
var marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: true,
icon: iconBase
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('Dragging...');
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
geocodePosition(marker.getPosition());
});
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<style>
#mapCanvas {
width: 900px;
height: 500px;
float: left;
}
#infoPanel {
float: left;
margin-left: 10px;
}
</style>
<div id="mapCanvas"></div>
<div id="infoPanel">
<b>Koordinat :</b><br>
<input type='text' id='txtposition' style="width: 350px;" />
</div>
</body>
</html>
Son yorumlar