Google Map Api 3.0 – Tıklanan Alanın Koordinat ve Zoom Bilgileri


<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Map Geolocation</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>        
</head>
<body>
<form name="harita_formu" method="post">
            <input type="hidden" name="tur" value="harita">
            <table id="box-table-a">
                <tbody>
                    <tr>
                        <td>Harita</td>
                        <td>
                            <script type="text/javascript"
                                   src="http://maps.google.com/maps/api/js?sensor=false">
                            </script>
                            <script type="text/javascript">
                                function initialize() {
                                    var Koordinatlar = new google.maps.LatLng(39.86156903970107,32.83813489062504);
                                    var myOptions = {
                                        zoom: 6,
                                        center: Koordinatlar,
                                        mapTypeId: google.maps.MapTypeId.HYBRID
                                    };
                                    var map = new google.maps.Map(document.getElementById("map_canvas"),
                                    myOptions);
                                    var BilgiPenceresi = new google.maps.InfoWindow(
                                    { content: 'www.gencayyildiz.com',
                                        size: new google.maps.Size(50,50),
                                        position: Koordinatlar
                                    });
                                    BilgiPenceresi.open(map);
                                    var Isagretci = new google.maps.Marker({
                                        map:map,
                                        draggable:true,
                                        animation: google.maps.Animation.DROP,
                                        position: Koordinatlar,
                                        icon: 'http://google-maps-icons.googlecode.com/files/factory.png'
                                    });
                                    google.maps.event.addListener(Isagretci, 'dragend', function(){
                                        Isagretci.setAnimation(google.maps.Animation.BOUNCE);
                                    });
                                    google.maps.event.addListener(map, 'click', function(event){
                                        //map.setCenter(event.latLng);
                                        BilgiPenceresi.setPosition(event.latLng);
                                        Isagretci.setPosition(event.latLng);
                                        document.forms['harita_formu'].elements['harita_zoom'].value=map.getZoom();
document.forms['harita_formu'].elements['harita_geo'].value=event.latLng.lat()+","+event.latLng.lng();
                                    });
                                    google.maps.event.addListener(map, 'zoom_changed', function(event) {
                                        document.forms['harita_formu'].elements['harita_zoom'].value=map.getZoom();
//document.forms['harita_formu'].elements['harita_geo'].value=event.latLng.lat()+","+event.latLng.lng();
                                    });
                                }
                            </script>
                            <div id="map_canvas" style="width:605px; height: 400px; border:10px solid #e3e3ca"><script type="text/javascript">initialize()</script></div>
                            <input type="text" name="harita_geo" value="39.86156903970107,32.83813489062504" />
                            <input type="text" name="harita_zoom" value="6"  />
                            <div class="f_kc">
                                <ul>
                                    <li>Harita üzerindeki ev simgesini firmanızın bulunduğu adres üzerine yerleştiriniz. </li>

                                    <li>Simge harita üzerinde her tıkladığınız yere gelecektir.</li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>Adres Bilginiz</td>
                        <td><text type="text" class="text" style="width:605px;">HÜRRİYET MH. 1744 SK. ŞENZEYBEK APT. NO:1 KAT:1 MERSİN</text></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="button" class="genel buton buton2" value="Kaydet" onclick="DugmeleriKitle(); submit();" /></td>
                    </tr>
                </tbody>
            </table>
        </form>
</body>
</html>

Bunlar da hoşunuza gidebilir...

7 Cevaplar

  1. Erdinc Taşlı dedi ki:

    Merhaba hocam acaba pLACE auto complete eklentisini( yani input a şehri yazdığımızdada işaretleye bilme) yi nasıl birleştire biliriz ?

    • Gençay dedi ki:

      Merhaba Erdinc Bey,
      Bu işlev hakkında benimde bilgim bulunmamaktadır.Araştırmaya koyulup en kısa zamanda sizleri neticeden haberdar edeceğim.

  2. ahmet dedi ki:

    Selamün aleyküm ,
    verdiğin kodu , normal html kaydedip çift tıklayıp açtığımda çalışıyor fakat localhostta html açtığımda çalışmıyor. haliyle sunucuda da çalışmıyor. ve bu
    “””” Bu sayfa Google Haritalar’ı düzgün şekilde yükleyemedi. Teknik ayrıntılar için JavaScript konsoluna bakın. “”” hatayı veriyor.. aradım key alınması gerek olduğunu gördüm aldım girdim lakin yine aynı.. bilgi var mıdır?

  3. Yusuf dedi ki:

    Merhaba,

    Google haritalara c# dan bir baglantı ile yeni harita nasıl tanımlayıp onu çekebilirim acaba ?

  4. Harun dedi ki:

    Bu sayfa Google Haritalar’ı doğru şekilde yükleyemedi.
    Gibi bir hata alıyorum. Artık çalışmıyor mu? api key almak zorunlu hale geldimi?
    Api key almak ücretli mi

    • Gençay dedi ki:

      Merhaba,

      İlgili içerik 2012 yılındaki API’lar üzerine oluşturulmuştur. Süreçte bir daha hiç kullanmasamda Google API’ları değişmiştir ve bildiğim kadarıyla ücretli olmuştur.
      Yinede size araştırmanızı öneririm.
      Kolay gelsin…

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Copy Protected by Chetan's WP-Copyprotect.