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 Docs
Yükleniyor...