Konular

Google Map Api 3.0

Google Maps API 3 resmi API artık. Versiyon 2 API artık resmi olarak önerilmilyor.V2 ile yaptığınız uygulamalarınızı V3 için güncellemeniz gerekli. V3 'ün en büyük özelliği mobil cihazlara göre düzenlenmiş olması ve API keyin artık gerekli olmayışı

Google Map Api 3.0

Daha önce basit bir google map V2 için aşağıdakine benzer kodlar kullanıyorduk.


 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA6j3VMSV9UmmUFtzLhzZhVxRYv3kezhNjA8FABQIAAAA6j3VMSV9UmmUFtzLhzZhVxRYv3kezhNjA8F&sensor=true"
           type="text/javascript"></script>
    <script type="text/javascript">
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(41.06554,29.009622), 13);
        map.setUIToDefault();
      }
    }
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>

 

V3 ün başlıca yenilikleri şunlar:

  1. Daha fazla harita işağretçisi
  2. Fusion Tablolarıyla derecelendirme, değerlendirme seçenekleri
  3. MVC objeleriyle eylence
  4. PHP / MYSQL kodlarını kullanılabilirlik
  5. PHP / MYSQL ile mazaları ve alışveriş bölgelerini göstermek
  6. Kullanıcı tarafından eklenen bilgileri kaydetmek
  7. PHP / MYSQL ile ipye göre yer belirleme sistemlerinin kullanımı
  8. IPhone ve Adroid için özel çözümler

ve daha fazlası V3 için ek özellikleri içeriyor.

Basit bir  V3 kodu:

 


<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
   src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

Basit bir IP nize göre bulunduğunuz yeri bulan V3 kodu:


<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>
<script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script>
<script type="text/javascript">

var initialLocation;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var browserSupportFlag =  new Boolean();
var map;
var infowindow = new google.maps.InfoWindow();
 
function initialize() {
  var myOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
  // Try W3C Geolocation method (Preferred)
  if(navigator.geolocation) {
    browserSupportFlag = true;
    navigator.geolocation.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
      contentString = "Location found using W3C standard";
      map.setCenter(initialLocation);
      infowindow.setContent(contentString);
      infowindow.setPosition(initialLocation);
      infowindow.open(map);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  } else if (google.gears) {
    // Try Google Gears Geolocation
    browserSupportFlag = true;
    var geo = google.gears.factory.create('beta.geolocation');
    geo.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
      contentString = "Location found using Google Gears";
      map.setCenter(initialLocation);
      infowindow.setContent(contentString);
      infowindow.setPosition(initialLocation);
      infowindow.open(map);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  } else {
    // Browser doesn't support Geolocation
    browserSupportFlag = false;
    handleNoGeolocation(browserSupportFlag);
  }
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag == true) {
    initialLocation = newyork;
    contentString = "Error: The Geolocation service failed.";
  } else {
    initialLocation = siberia;
    contentString = "Error: Your browser doesn't support geolocation. Are you in Siberia?";
  }
  map.setCenter(initialLocation);
  infowindow.setContent(contentString);
  infowindow.setPosition(initialLocation);
  infowindow.open(map);
}
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>

</body>
</html>
 

Aşağıdaki örnek V3 kodlarıyla yapılmış basit bir harita işağretleme örneğidir

  
<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>
</head>
<body>

<div id="map_canvas" style="width: 730px; height: 500px; margin-top: 20px;"> </div>

<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><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: 'Asil Cephe Giydirme ve Alüminyum Doğrama Sistemleri',
                                        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);
                                    });


                                }
                            </script><script type="text/javascript">initialize()</script>
                           
                           
</body>
</html>

Aşağıdaki örnek ekrana eklenen harita üzerindeki koordinatı ve zoom leveli alabiliyor

 

<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: 'Asil Cephe Giydirme ve Alüminyum Doğrama Sistemleri',
                                        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"></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>

 

 

Yorumunuzu Ekleyin
Google Map Api 3.0 Yorumları +5 Yorum
  • Zafer
    1
    Zafer
    Kardeşim tuttuğun ALTIN olsun.. Harita işaretleme örneği lazımdı, kullandım.. bir çok sitede birtakım açıklamalar var, ama en güzeli ve ÇALIŞIR olanı burda buldum.. Teşekkürler..
    07 Şubat 2012 03:22:42, Salı
  • Güven Göç
    1
    Güven Göç
    Merhabalar,

    Yardımınız için çok teşekkürler.Yazınızı okuyarak mysqlden koordinatları çekebilen bir harita sistemi yaptım.



    Çözemediğim bir sorun var. Üyelere koordinatları bir forma yazdırıp kaydettiriyorum. Bu zor oluyor. Koordinatları haritada nokta belirleyip aldırabileceğimiz bir sistem var mıdır?



    Veya mysql deki adres bilgileri ile harita otomatik olarak oluşturulabilir mi?
    12 Mart 2012 17:44:36, Pazartesi
  • Gençay Yıldız
    1
    Gençay Yıldız
    Merhaba,

    Öncelikle verdiğiniz bilgiler doğrultusunda size çok teşekkür ederim.Ancak koordinat ve zoom alabilen örnekte harita gelmemektedir.Yardımcı olabilir misiniz?
    09 Kasım 2012 18:16:09, Cuma
  • Gençay YIldız
    1
    Gençay YIldız
    Sorumun çözümünü buldum.

    script typetext/javascriptinitialize/script kodu eklenmemiş.O yüzden harita gözükmemektedir
    09 Kasım 2012 19:30:00, Cuma
  • Ümit
    1
    Ümit
    Kardeşim emeğine sağlık. Bu işi yabancı kaynaklarda araştırıyordum. Bukadar kolay çözebileceğimi düşünmemiştim.
    21 Kasım 2012 13:37:18, Çarşamba
Google Map Kullanarak Harita Tasarlamak

Google bazı ürünlerini kısıtlı kullanım alanlarından sıyırıp yaratıcı ellere teslim ederek hem kendisine duyulan sempatiyi arttırıyor hem de biz kullanıcılara yeni kullanım alanları açabiliyor.

32,401 Okunma 10 Yorum 31/03/2008 05:44:04

Kurumsal Mail Hizmeti İçin Google Kullanmak

Bir host hizmetinden aldığınız mail adresini gmaile yönlendirerek nasıl kullanabileceğinizi anlatan bir makale...

18,967 Okunma 0 Yorum 12/04/2013 02:03:49 16/04/2013 02:10:39

Google Docs

Paylaş

15,018 Okunma 0 Yorum 21/02/2012 09:05:37

Google Adwords API Kullanımı

Google Reklamlarını yönetmek için Google Adwords API'yi kullanmalısınız.

4,235 Okunma 0 Yorum 25/07/2018 17:52:58 26/07/2018 17:52:55

Google Site İçi Arama Motoru

Bir web siteniz var ve ziyaretçilerinizin siteniz içerisinde arama yapmasını istiyorsanız google Custom Search Api kullanmalısınız.

3,944 Okunma 0 Yorum 29/06/2018 22:43:17 30/06/2018 01:48:54

Yükleniyor...