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. "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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=abqiaaaa6j3vmsv9ummuftzlhzzhvxryv3kezhnja8fabqiaaaa6j3vmsv9 UmmUFtzLhzZhVxRYv3kezhNjA8F&sensor=true" type="text/javascript"> if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setcenter(new GLatLng(41.06554,29.009622), 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: 1. 2. 3. 4. 5. 6. 7. 8. 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: www.dijitalders.net Google Map Api 3.0 1
<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"> var latlng = new google.maps.latlng(-34.397, 150.644); 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="http://maps.googleapis.com/maps/api/js?sensor=true"> <script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"> 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(); 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) { www.dijitalders.net Google Map Api 3.0 2
// 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="http://maps.googleapis.com/maps/api/js?sensor=true"><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> var Koordinatlar = new google.maps.latlng(39.86156903970107,32.83813489062504); center: Koordinatlar, maptypeid: google.maps.maptypeid.hybrid ; www.dijitalders.net Google Map Api 3.0 3
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); 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="http://maps.googleapis.com/maps/api/js?sensor=true"> <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="http://maps.google.com/maps/api/js?sensor=false"> var Koordinatlar = new google.maps.latlng(39.86156903970107,32.83813489062504); 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({ www.dijitalders.net Google Map Api 3.0 4
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(); <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> <td>adres Bilginiz</td> <td><text type="text" class="text" style="width:605px;">hürriyet MH. 1744 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> www.dijitalders.net Google Map Api 3.0 5