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:

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:

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

Bu içerikle ilgili Yorumunuzu eklemek için burayı tıklayınız.

Yorumlar

2 yorum

Zafer,

07 Şubat 2012 03:22:42, Salı

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

Güven Göç,

12 Mart 2012 17:44:36, Pazartesi

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?