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>

 

 

31,345 Okunma Henüz yorum yapılmamış 14/07/2011 18:51:25 30/10/2012 04:04:12

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
Görsel Liste


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.

41,877 okuma,

Youtube Videosunu Kullanmak

Bir youtube videosunun özellikleri

14,278 okuma, 08/12/2015

Google Docs

Paylaş

21,492 okuma,

Google Map 3.0 ile Directions (Yol Tarifi Kullanımı)

Örnek Uygulamamızda API 3.0 kullandık ve Google Mapsle nasıl yol tarifi uygulaması hazırlanabilir göstermek istedik.

41,996 okuma,

Google Drive Kullanımı

20,985 okuma,

Kurumsal Mail Hizmeti İçin Google Kullanmak

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

26,945 okuma, 16/04/2013

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.

12,150 okuma, 30/06/2018

Google Adwords API Kullanımı

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

11,968 okuma, 26/07/2018

Open Layers'a Giriş

Bir web sayfasına basit bir haritanın nasıl yerleştirileceğini öğrenin.

5,115 okuma, 25/04/2021

Google Maps Yerine OpenLayers Kullanmak

Google haritanızı bir OpenLayers Haritası ile değiştirme kılavuzu

4,959 okuma,

Google Firebase Nedir ?

Google Firebase; web ve mobil uygulamalarının server tarafıyla geliştiricinin uğraşmasına gerek kalmadan kullanıcı giriş yetkilendirmeli ve verilerini gerçek zamanlı ve senkron bir şekilde tutulmasını sağlayan bir platformdur.

4,229 okuma, 20/09/2021

Yükleniyor...
    Yükleniyor...