HTML5 GeoLocation ile harita üzerinden konumunuzu kolayca javascript desteğiyle öğrenebilirsiniz bunun için yapmanız gereken sadece makalenin devamındaki google maps’e ait kütüphane linkini sayfanıza eklemek ve kütüphane kullanımına ait örneği denemek.

İçerik göster

HTML5 GeoLocation ile harita üzerinde konumu öğrenme

İlk script etiketi google maps’e ait kütüphanedir ikinci script etiketi içerisinde yer alan kodlar ise google maps kütüphanesi kullanımına ait kodlardır.

Javascript Kodu

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></ script>
<script type="text/javascript">
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (p) {
            var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
            var mapOptions = {
                center: LatLng,
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            var marker = new google.maps.Marker({
                position: LatLng,
                map: map,
                title: "<div style = 'height:60px;width:200px'><b>Konumunuz:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
            });
            google.maps.event.addListener(marker, "click", function (e) {
                var infoWindow = new google.maps.InfoWindow();
                infoWindow.setContent(marker.title);
                infoWindow.open(map, marker);
            });
        });
    } else {
        alert('Tarayıcınız Geolocation özelliklerini desteklemiyor');
    }
</ script>

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function (p) {

var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);

var mapOptions = {

center: LatLng,

zoom: 13,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

var marker = new google.maps.Marker({

position: LatLng,

map: map,

title: "<div style = 'height:60px;width:200px'><b>Konumunuz:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude

});

google.maps.event.addListener(marker, "click", function (e) {

var infoWindow = new google.maps.InfoWindow();

infoWindow.setContent(marker.title);

infoWindow.open(map, marker);

});

} else {

alert('Tarayıcınız Geolocation özelliklerini desteklemiyor');

}

</ script>

HTML Kodu

<div id="dvMap" style="width: 500px; height: 500px"></div>

1	<div id="dvMap" style="width: 500px; height: 500px"></div>

5/5 - (2 votes)

akdyazilim dedi ki:
28 Kasım 2022, 20:44
Maalesef bendede çalışmadı, Crome de deniyorum
Yanıtla
akdyazilim dedi ki:
30 Ekim 2022, 21:34
Çalışmanızı gönderebilirmisiniz incelemek isterim..
Yanıtla
Abdullatif dedi ki:
22 Haziran 2021, 21:27
hocam bu kodlar bende çalışmadı
Yanıtla
- Murat ÖNER dedi ki:
  24 Haziran 2021, 02:18
  Hangi tarayıcı ve hangi sürümde deniyorsunuz?
  Yanıtla

Kategoriler

Bloga e-posta ile abone ol

HTML5 GeoLocation İle Harita Üzerinde Konumu Öğrenme

HTML5 GeoLocation ile harita üzerinde konumu öğrenme

Javascript Kodu

You may also like...

4 Responses

Bir yanıt yazın Yanıtı iptal et

HTML5 GeoLocation ile harita üzerinde konumu öğrenme

Javascript Kodu

You may also like...

CSS3 Tam Ekran Arkaplan Örneği

HTML5 Hidden Attribute Nedir?

HTML5 SessionStorage Nedir Ve Kullanımı

4 Responses

Bir yanıt yazın Yanıtı iptal et

Murat Öner sitesinden daha fazla şey keşfedin