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>
Merhaba Arkadaşlar, Sizinle Türkiye'de faaliyet gösteren bankalar ve ödeme kuruluşlarının kartlarının güncel BIN numaraları listesini…
Bu yazımda size Asp.Net üzerinden bir api'ye nasıl dizi (Array List) veri gönderebileceğinizden bahsetmek istiyorum.…
Merhaba Arkadaşlar, Bu yazımda size Postman üzerinden bir diziyi (Array List) nasıl post olarak göndereceğinizden…
Merhaba Arkadaşlar, Google Sheet üzerinden hazırladığınız bir uygulamanızı nasıl belirli saatlerde çalışmasını sağlayabileceğinizi paylaşmak istiyorum.…
Merhaba Arkadaşlar, Google Sheet hepimizin kullandığı bir uygulama. Sizlerle Sheet üzerinden nasıl Mysql veritabanına bağlanıp…
Merhaba Arkadaşlar, İnternet sayfalarında aşağıdaki şekilde kolayca Whatsapp mesaj linki ekleyebilirsiniz.