Temel Google Haritası oluşturun
Bu örnek Londra, İngiltere merkezli bir Google Haritası oluşturur:
Örnek
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Kendin dene " Bu sayfanın geri kalanı, yukarıda adım adım örneği açıklanmaktadır.
1. Yük Google API
Google Maps API, bir JavaScript kütüphanesidir. Bu bir ile bir web sayfasına eklenebilir <script> etiketi:
<script src="http://maps.googleapis.com/maps/api/js"></script>2. Set Harita Özellikleri
Haritayı başlatmak için bir işlev oluşturun:
function initialize() {
}Initialize fonksiyonu olarak, bir nesne oluşturmak (mapProp) harita özelliklerini tanımlamak için:
var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};Merkez özelliği haritanın merkezine nereye belirtir. Belirli bir noktayı harita ortalamak için bir EnlBoy nesne oluşturun. sırayla koordinatları geçirin: enlem, boylam.
Yakınlaştırma özelliği haritası için yakınlaştırma düzeyini belirtir. yakınlaştırma: 0 Earth haritası tam uzaklaştırma gösterir. Daha yüksek zum seviyeleri daha yüksek bir çözünürlükte yakınlaştırmak.
MapTypeId özelliği görüntülemek için harita türünü belirtir. Aşağıdaki harita türleri desteklenir:
- YOL HARİTASI (normal, default 2D map)
- UYDU (photographic map)
- HİBRİT (photographic map + roads and city names)
- ARAZİ (map with mountains, rivers, etc.)
3. Bir Harita Kapsayıcı Oluştur
Bir oluşturma <div> haritayı tutmak için eleman. boyutuna elemanı için CSS kullanın:
<div id="googleMap" style="width:500px;height:380px;"></div>Harita her zaman olacaktır "inherit" kabını öğesinden boyutunu.
4. Bir Harita Nesne oluşturma
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);Yukarıdaki kod içinde yeni bir haritasını oluşturur <div> geçirilen parametreler kullanılarak, id = "googlemap" ile eleman (mapProp) .
5. Harita yükleyin bir olay İşleyici'yi ekleyin
Çalıştırır bir DOM dinleyicisi ekleyin initialize() pencere yüklendiğinde işlevini (when the page is loaded) :
google.maps.event.addDomListener(window, 'load', initialize);
eşzamansız yükleniyor
Talep üzerine Google Maps API yüklemek de mümkündür.
Aşağıdaki örnekte sayfa tam yüklendikten sonra Google Maps API yüklemek için window.onload kullanır.
loadScript() işlevi Google Maps API oluşturur <script> etiketi. Buna ek olarak, geri = başlatmak parametresi çalıştırmak için URL'nin sonuna eklenir initialize() API tamamen yüklendikten sonra işlevi:
Örnek
function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
Kendin dene " Çoklu Haritalar
Aşağıdaki örnek bir web sayfası (farklı harita türleri ile dört haritalar) dört haritalar tanımlar:
Örnek
var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapProp4);
Kendin dene " Google API Anahtarı
Google'ın web sitesi herhangi bir Google API günde birçok bin defa çağırmak için izin verir.
Eğer ağır trafik için planlıyorsanız, Google'dan ücretsiz bir API anahtarı almak gerekir.
Git https://console.developers.google.com ücretsiz anahtarı almak için.
Google Maps API yüklenirken anahtar parametresinde API anahtarını bulmak için bekler:
<script src="http://maps.googleapis.com/maps/api/js? key=YOUR_KEY "></script>