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

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "Google Map Api 3.0. Google Map Api 3.0. Daha önce basit bir google map V2 için aşağıdakine benzer kodlar kullanıyorduk."

Erdem Sarper
7 yıl önce
İzleme sayısı:

1 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ışı Daha önce basit bir google map V2 için aşağıdakine benzer kodlar kullanıyorduk. " <html xmlns=" <meta http-equiv="content-type" content="text/html; charset=utf-8" <title>google Maps JavaScript API Example</title> <script src=" UmmUFtzLhzZhVxRYv3kezhNjA8F&sensor=true" type="text/javascript"> if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setcenter(new GLatLng( , ), 13); map.setuitodefault(); <body onload="initialize()" onunload="gunload()"> <div id="map_canvas" style="width: 500px; height: 300px"></div> V3 ün başlıca yenilikleri şunlar: Daha fazla harita işağretçisi Fusion Tablolarıyla derecelendirme, değerlendirme seçenekleri MVC objeleriyle eylence PHP / MYSQL kodlarını kullanılabilirlik PHP / MYSQL ile mazaları ve alışveriş bölgelerini göstermek Kullanıcı tarafından eklenen bilgileri kaydetmek PHP / MYSQL ile ipye göre yer belirleme sistemlerinin kullanımı IPhone ve Adroid için özel çözümler ve daha fazlası V3 için ek özellikleri içeriyor. Basit bir V3 kodu: Google Map Api 3.0 1

2 <style type="text/css"> html { height: 100% body { height: 100%; margin: 0px; padding: 0px #map_canvas { height: 100% </style> <script type="text/javascript" src=" var latlng = new google.maps.latlng( , ); zoom: 8, center: latlng, maptypeid: google.maps.maptypeid.roadmap ; <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> Basit bir IP nize göre bulunduğunuz yeri bulan V3 kodu: <meta http-equiv="content-type" content="text/html; charset=utf-8" <script type="text/javascript" src=" <script type="text/javascript" src=" var initiallocation; var siberia = new google.maps.latlng(60, 105); var newyork = new google.maps.latlng( , ); var browsersupportflag = new Boolean(); var map; var infowindow = new google.maps.infowindow(); maptypeid: google.maps.maptypeid.roadmap ; map = new google.maps.map(document.getelementbyid("map_canvas"), // 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";, function() { else if (google.gears) { Google Map Api 3.0 2

3 // 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";, function() { else { // Browser doesn't support Geolocation browsersupportflag = false; 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?"; <body onload="initialize()"> <div id="map_canvas"></div> Aşağıdaki örnek V3 kodlarıyla yapılmış basit bir harita işağretleme örneğidir <meta http-equiv="content-type" content="text/html; charset=utf-8" <body> <div id="map_canvas" style="width: 730px; height: 500px; margin-top: 20px;"> </div> <script type="text/javascript" src=" type="text/javascript" src=" var Koordinatlar = new google.maps.latlng( , ); center: Koordinatlar, maptypeid: google.maps.maptypeid.hybrid ; Google Map Api 3.0 3

4 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: ' google.maps.event.addlistener(isagretci, 'dragend', function(){ Isagretci.setAnimation(google.maps.Animation.BOUNCE); initialize() Aşağıdaki örnek ekrana eklenen harita üzerindeki koordinatı ve zoom leveli alabiliyor <meta http-equiv="content-type" content="text/html; charset=utf-8" <script type="text/javascript" src=" <body> <form name="harita_formu" method="post"> <input type="hidden" name="tur" value="harita"> <table id="box-table-a"> <tbody> <td>harita</td> <td> <script type="text/javascript" src=" var Koordinatlar = new google.maps.latlng( , ); center: Koordinatlar, maptypeid: google.maps.maptypeid.hybrid ; 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({ Google Map Api 3.0 4

5 map:map, draggable:true, animation: google.maps.animation.drop, position: Koordinatlar, icon: ' 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(); <div id="map_canvas" style="width:605px; height: 400px; border:10px solid #e3e3ca"></div> <input type="text" name="harita_geo" value=" , " <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> <td>adres Bilginiz</td> <td><text type="text" class="text" style="width:605px;">hürriyet MH SK. ŞENZEYBEK APT. NO:1 KAT:1 MERSİN</text></td> <td></td> <td><input type="button" class="genel buton buton2" value="kaydet" onclick="dugmelerikitle(); submit();" </td> </tbody> </table> </form> Google Map Api 3.0 5

Benzer belgeler

Google Map Kullanarak Harita Tasarlamak

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. Mesela