Google Haritalar - Hızlı Kılavuz
Google Haritalar nedir?
Google Haritalar, Google tarafından çeşitli coğrafi bilgiler sağlayan ücretsiz bir web haritalama hizmetidir. Google Haritalar'ı kullanarak biri yapabilirsiniz.
Yer arayın veya bir yerden diğerine yol tarifi alın.
Dünya genelindeki çeşitli şehirlerin yatay ve dikey panoramik sokak seviyesi görüntülerini görüntüleyin ve gezinin.
Belirli bir noktadaki trafik gibi belirli bilgileri alın.
Google Haritalar, haritaları ve üzerlerinde görüntülenen bilgileri özelleştirebileceğiniz bir API sağlar. Bu bölüm, HTML ve JavaScript kullanarak web sayfanıza basit bir Google Haritasının nasıl yükleneceğini açıklar.
Haritayı Web Sayfasına Yükleme Adımları
Web sayfanıza bir harita yüklemek için aşağıdaki adımları izleyin -
1. Adım: Bir HTML Sayfası Oluşturun
Aşağıda gösterildiği gibi başlık ve gövde etiketleriyle temel bir HTML sayfası oluşturun -
<!DOCTYPE html>
<html>
<head>
</head>
<body>
..............
</body>
</html>2. Adım: API'yi yükleyin
Aşağıda gösterildiği gibi komut dosyası etiketini kullanarak Google Haritalar API'sini yükleyin veya dahil edin -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
..............
</body>
</html>3. Adım: Kapsayıcıyı Oluşturun
Haritayı tutmak için bir konteyner öğesi oluşturmalıyız, genellikle bu amaç için <div> etiketi (genel bir konteyner) kullanılır. Bir kap öğesi oluşturun ve boyutlarını aşağıda gösterildiği gibi tanımlayın -
<div id = "sample" style = "width:900px; height:580px;"></div>Adım 4: Harita Seçenekleri
Haritayı başlatmadan önce, bir mapOptionsnesne (tıpkı bir değişmez gibi oluşturulur) ve harita başlatma değişkenleri için değerler ayarlayın. Bir haritanın üç ana seçeneği vardır:centre, zoom, ve maptypeid.
centre- Bu özellik altında, haritayı ortalamak istediğimiz konumu belirtmemiz gerekiyor. Konumu geçmek için, birLatLng Yapıcıya gerekli konumun enlem ve boylamlarını ileterek nesne.
zoom - Bu özellik altında, haritanın yakınlaştırma seviyesini belirlememiz gerekiyor.
maptypeid- Bu özellik altında istediğimiz haritanın türünü belirtmemiz gerekiyor. Google tarafından sağlanan harita türleri aşağıdadır -
- YOL HARİTASI (normal, varsayılan 2D harita)
- UYDU (fotoğrafik harita)
- HİBRİT (iki veya daha fazla başka türün kombinasyonu)
- ARAZİ (dağlar, nehirler vb. İle harita)
Bir işlev içinde, diyelim ki loadMap(), mapOptions nesnesini oluşturun ve center, zoom ve mapTypeId için gerekli değerleri aşağıda gösterildiği gibi ayarlayın.
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.240498, 82.287598),
zoom:9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
}Adım 5: Bir Harita Nesnesi Oluşturun
Adlı JavaScript sınıfını başlatarak bir harita oluşturabilirsiniz. Map. Bu sınıfın örneğini oluştururken, gerekli harita için haritayı ve harita seçeneklerini tutmak için bir HTML kabı geçirmeniz gerekir. Aşağıda gösterildiği gibi bir harita nesnesi oluşturun.
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);6.Adım: Haritayı yükleyin
Son olarak, loadMap () yöntemini çağırarak veya DOM dinleyicisi ekleyerek haritayı yükleyin.
google.maps.event.addDomListener(window, 'load', loadMap);
or
<body onload = "loadMap()">Misal
Aşağıdaki örnek, Vishakhapatnam adlı şehrin yol haritasının 12 yakınlaştırma değeriyle nasıl yükleneceğini gösterir.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:12,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretir -
Önceki bölümde, temel bir haritanın nasıl yükleneceğini tartışmıştık. Burada, gerekli bir harita türünün nasıl seçileceğini göreceğiz.
Harita Türleri
Google Haritalar dört tür harita sağlar. Onlar -
ROADMAP- Bu varsayılan türdür. Herhangi bir türü seçmediyseniz, bu görüntülenecektir. Seçilen bölgenin cadde görünümünü gösterir.
SATELLITE - Bu, seçilen bölgenin uydu görüntülerini gösteren harita türüdür.
HYBRID - Bu harita türü, ana caddeleri uydu görüntülerinde gösterir.
TERRAIN - Bu, araziyi ve bitki örtüsünü gösteren harita türüdür
Sözdizimi
Bu harita türlerinden birini seçmek için, aşağıda gösterildiği gibi harita seçeneklerinde ilgili harita türü kimliğini belirtmeniz gerekir -
var mapOptions = {
mapTypeId:google.maps.MapTypeId.Id of the required map type
};Yol haritası
Aşağıdaki örnek, ROADMAP türünde bir haritanın nasıl seçileceğini gösterir -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretecek -
Uydu
Aşağıdaki örnek, UYDU tipi bir haritanın nasıl seçileceğini gösterir -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:9,
mapTypeId:google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretecek -
Hibrit
Aşağıdaki örnek, HİBRİT türü bir haritanın nasıl seçileceğini gösterir -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:9,
mapTypeId:google.maps.MapTypeId.Hybrid
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretecek -
Arazi
Aşağıdaki örnek, TERRAIN türünde bir haritanın nasıl seçileceğini gösterir -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:9,
mapTypeId:google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretecek -
Yakınlaştırma Değerini Artır / Azalt
Bir haritanın yakınlaştırma değerini, haritanın değerini değiştirerek artırabilir veya azaltabilirsiniz. zoom harita seçeneklerinde özelliği.
Sözdizimi
Yakınlaştırma seçeneğini kullanarak haritanın yakınlaştırma değerini artırabilir veya azaltabiliriz. Aşağıda, mevcut haritanın yakınlaştırma değerini değiştirmek için sözdizimi verilmiştir.
var mapOptions = {
zoom:required zoom value
};Örnek: Zoom 6
Aşağıdaki kod, Vishakhapatnam şehrinin yol haritasını 6 yakınlaştırma değeriyle gösterecektir.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:6,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:587px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretecek -
Örnek: Yakınlaştır 10
Aşağıdaki kod, Vishakhapatnam şehrinin yol haritasını 10 yakınlaştırma değeriyle gösterecektir.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:10,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:587px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretecek -
Varsayılan olarak, haritada verilen şehir adları ve seçenek adları İngilizce olacaktır. Gerekirse, bu tür bilgileri başka dillerde de görüntüleyebiliriz. Bu süreç olarak bilinirlocalization. Bu bölümde, bir haritanın nasıl yerelleştirileceğini öğreneceğiz.
Bir Haritayı Yerelleştirme
Aşağıda gösterildiği gibi URL'de dil seçeneğini belirterek haritanın dilini özelleştirebilirsiniz (yerelleştirebilirsiniz).
<script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>Misal
İşte GoogleMaps'in nasıl yerelleştirileceğini gösteren bir örnek. Burada, Çin diline yerelleştirilmiş bir Çin yol haritasını görebilirsiniz.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(32.870360, 101.645508),
zoom:9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Çıktı
Aşağıdaki çıktıyı üretecek -
Google Haritalar, kullanıcının haritayla etkileşime girmesine izin vermek için çeşitli kontroller içeren bir Kullanıcı Arayüzü sağlar. Bu kontrolleri ekleyebilir, özelleştirebilir ve devre dışı bırakabiliriz.
Varsayılan Kontroller
İşte Google Haritalar tarafından sağlanan varsayılan kontrollerin bir listesi -
Zoom- Haritanın yakınlaştırma düzeyini artırmak ve azaltmak için varsayılan olarak + ve - düğmelerine sahip bir kaydırıcımız olacak. Bu kaydırıcı, haritanın sol tarafının köşesinde yer alacaktır.
Pan - Yakınlaştırma kaydırıcısının hemen üzerinde, haritayı kaydırmak için bir pan kontrolü olacaktır.
Map Type- Bu kontrolü haritanın sağ üst köşesinde bulabilirsiniz. Uydu, Yol Haritası ve Arazi gibi harita türü seçenekleri sunar. Kullanıcılar bu haritalardan herhangi birini seçebilir.
Street view- Pan simgesi ile yakınlaştırma kaydırıcısı arasında bir pegman simgemiz var. Kullanıcılar bu simgeyi sürükleyebilir ve sokak görünümünü almak için belirli bir konuma yerleştirebilir.
Misal
Google Haritalar tarafından sağlanan varsayılan kullanıcı arayüzü kontrollerini gözlemleyebileceğiniz bir örnek:
Kullanıcı Arabirimi Varsayılan Denetimlerini Devre Dışı Bırakma
Google Haritalar tarafından sağlanan varsayılan kullanıcı arayüzü kontrollerini, yalnızca disableDefaultUI harita seçeneklerinde true değeri.
Misal
Aşağıdaki örnek, Google Haritalar tarafından sağlanan varsayılan kullanıcı arayüzü kontrollerinin nasıl devre dışı bırakılacağını gösterir.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretecek -
Tüm Kontrolleri Etkinleştirme / Devre Dışı Bırakma
Bu varsayılan kontrollere ek olarak, Google Haritalar ayrıca aşağıda listelendiği gibi üç kontrol daha sağlar.
Scale- Ölçek kontrolü bir harita ölçek öğesi görüntüler. Bu kontrol varsayılan olarak etkin değildir.
Rotate- Döndürme kontrolü, eğik görüntüler içeren haritaları döndürmenize olanak tanıyan küçük dairesel bir simge içerir. Bu kontrol, varsayılan olarak haritanın sol üst köşesinde görünür. (Daha fazla bilgi için 45 ° Görüntülere bakın.)
Overview- Haritanın yakınlaştırma düzeyini artırmak ve azaltmak için varsayılan olarak + ve - düğmelerine sahip bir kaydırıcımız vardır. Bu kaydırıcı, haritanın sol köşesinde yer alır.
Harita seçeneklerinde, Google Haritalar tarafından sağlanan kontrollerden herhangi birini aşağıda gösterildiği gibi etkinleştirebilir ve devre dışı bırakabiliriz -
{
panControl: boolean,
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean,
overviewMapControl: boolean
}Misal
Aşağıdaki kod, tüm kontrollerin nasıl etkinleştirileceğini gösterir -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(19.373341, 78.662109),
zoom:5,
panControl: true,
zoomControl: true,
scaleControl: true,
mapTypeControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretecek -
Kontrol Seçenekleri
Kontrol seçeneklerini kullanarak Google Haritalar kontrollerinin görünümünü değiştirebiliriz. Örneğin, yakınlaştırma kontrolü boyut olarak küçültülebilir veya büyütülebilir. MapType kontrol görünümü, yatay bir çubuğa veya bir açılır menüye göre değiştirilebilir. Aşağıda, Yakınlaştırma ve Harita Türü kontrolleri için Kontrol seçeneklerinin bir listesi verilmiştir.
| Sr.No. | Kontrol Adı | Kontrol Seçenekleri |
|---|---|---|
| 1 | Yakınlaştırma kontrolü |
|
| 2 | MapType denetimi |
|
Misal
Aşağıdaki örnek, kontrol seçeneklerinin nasıl kullanılacağını gösterir -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(19.373341, 78.662109),
zoom:5,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretir -
Kontrol Konumlandırma
Kontrol seçeneklerine aşağıdaki satırı ekleyerek kontrollerin konumunu değiştirebilirsiniz.
position:google.maps.ControlPosition.Desired_Position,Bir kontrolün bir haritaya yerleştirilebileceği mevcut konumların listesi -
- TOP_CENTER
- TOP_LEFT
- TOP_RIGHT
- LEFT_TOP
- RIGHT_TOP
- LEFT_CENTER
- RIGHT_CENTER
- LEFT_BOTTOM
- RIGHT_BOTTOM
- BOTTOM_CENTER
- BOTTOM_LEFT
- BOTTOM_RIGHT
Misal
Aşağıdaki örnek, MapTypeid kontrolünün haritanın üst orta kısmına nasıl yerleştirileceğini ve yakınlaştırma kontrolünün haritanın alt orta kısmına nasıl yerleştirileceğini gösterir.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(19.373341, 78.662109),
zoom:5,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position:google.maps.ControlPosition.BOTTOM_CENTER
}
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretir -
Harita üzerine nesneler çizebilir ve bunları istenen enlem ve boylama bağlayabiliriz. Bunlara katman adı verilir. Google Haritalar, aşağıda gösterildiği gibi çeşitli kaplamalar sağlar.
- Markers
- Polylines
- Polygons
- Daire ve dikdörtgen
- Bilgi penceresi
- Symbols
Google Haritalar haritada tek bir konumu işaretlemek için markers. Bu işaretçiler standart bir sembol kullanır ve bu semboller özelleştirilebilir. Bu bölümde işaretçilerin nasıl ekleneceği ve bunların nasıl özelleştirileceği, canlandırılacağı ve kaldırılacağı açıklanmaktadır.
Basit Bir İşaretçi Ekleme
İşaretçi sınıfını örnekleyerek ve aşağıda gösterildiği gibi enlem ve boylam kullanarak işaretlenecek konumu belirleyerek haritaya istediğiniz bir konuma basit bir işaretçi ekleyebilirsiniz.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(19.373341, 78.662109),
map: map,
});Misal
Aşağıdaki kod, Haydarabad (Hindistan) şehrinin işaretleyicisini belirler.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(19.373341, 78.662109),
zoom:7
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.088291, 78.442383),
map: map,
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretir -
İşaretleyiciyi Canlandırma
Haritaya bir işaretçi ekledikten sonra, daha ileri gidebilir ve haritaya aşağıdaki gibi animasyonlar ekleyebilirsiniz. bounce ve drop. Aşağıdaki kod parçacığı, bir işaretçiye sıçrama ve bırakma animasyonlarının nasıl ekleneceğini gösterir.
//To make the marker bounce`
animation:google.maps.Animation.BOUNCE
//To make the marker drop
animation:google.maps.Animation.DropMisal
Aşağıdaki kod, eklenen bir animasyon efekti ile Haydarabad kentindeki işaretleyiciyi ayarlar -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.377631, 78.478603),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.377631, 78.478603),
map: map,
animation:google.maps.Animation.Drop
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretir -
İşaretleyiciyi Özelleştirme
Google Haritalar tarafından sağlanan varsayılan simge yerine kendi simgelerinizi kullanabilirsiniz. Simgeyi şu şekilde ayarlayın:icon:'ICON PATH'. Ve ayarlayarak bu simgeyi sürüklenebilir hale getirebilirsiniz.draggable:true.
Misal
Aşağıdaki örnek, işaretçinin istenen bir simgeye nasıl özelleştirileceğini gösterir -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.377631, 78.478603),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.377631, 78.478603),
map: map,
draggable:true,
icon:'/scripts/img/logo-footer.png'
});
marker.setMap(map);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretir -
Markörü Çıkarma
Mevcut bir işaretleyiciyi, işaretleyiciyi null olarak ayarlayarak kaldırabilirsiniz. marker.setMap() yöntem.
Misal
Aşağıdaki örnek, işaretçinin bir haritadan nasıl kaldırılacağını gösterir -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.377631, 78.478603),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.377631, 78.478603),
map: map,
animation:google.maps.Animation.Drop
});
marker.setMap(null);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretir -
Önceki bölümde, Google Haritalar'da işaretçileri nasıl kullanacağımızı öğrendik. İşaretçilerin yanı sıra, daire, çokgen, dikdörtgen, çoklu çizgi gibi çeşitli şekiller de ekleyebiliriz. Bu bölüm, Google Haritalar tarafından sağlanan şekillerin nasıl kullanılacağını açıklar.
Çoklu çizgiler
Google Haritalar tarafından sağlanan çoklu çizgiler, farklı yolları izlemek için kullanışlıdır. Sınıfı örnekleyerek bir haritaya çoklu çizgiler ekleyebilirsiniz.google.maps.Polyline. Bu sınıfı başlatırken, StrokeColor, StokeOpacity ve strokWeight gibi bir çoklu çizginin özelliklerinin gerekli değerlerini belirtmemiz gerekir.
Yönteme nesnesini ileterek haritaya bir çoklu çizgi ekleyebiliriz setMap(MapObject). SetMap () yöntemine boş bir değer ileterek çoklu çizgiyi silebiliriz.
Misal
Aşağıdaki örnek, Delhi, Londra, New York ve Pekin şehirleri arasındaki yolu vurgulayan bir çoklu çizgiyi göstermektedir.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:3,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var tourplan = new google.maps.Polyline({
path:[
new google.maps.LatLng(28.613939, 77.209021),
new google.maps.LatLng(51.507351, -0.127758),
new google.maps.LatLng(40.712784, -74.005941),
new google.maps.LatLng(28.213545, 94.868713)
],
strokeColor:"#0000FF",
strokeOpacity:0.6,
strokeWeight:2
});
tourplan.setMap(map);
//to remove plylines
//tourplan.setmap(null);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretecek -
Çokgenler
Çokgenler, bir eyaletin veya bir ülkenin belirli bir coğrafi alanını vurgulamak için kullanılır. Sınıfı somutlaştırarak istediğiniz bir çokgeni oluşturabilirsiniz.google.maps.Polygon. Örnekleme yaparken, polygon'un path, strokColor, strokOapacity, fillColor, fillOapacity vb. Özelliklerine istenen değerleri belirtmemiz gerekir.
Misal
Aşağıdaki örnek, Haydarabad, Nagpur ve Aurangabad şehirlerini vurgulamak için bir poligonun nasıl çizileceğini gösterir.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myTrip = [
new google.maps.LatLng(17.385044, 78.486671),
new google.maps.LatLng(19.696888, 75.322451),
new google.maps.LatLng(21.056296, 79.057803),
new google.maps.LatLng(17.385044, 78.486671)
];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
flightPath.setMap(map);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretecek -
Dikdörtgenler
Dikdörtgen bir kutu kullanarak belirli bir bölgenin veya bir eyaletin coğrafi alanını vurgulamak için dikdörtgenler kullanabiliriz. Sınıfı örnekleyerek haritada bir dikdörtgen elde edebiliriz.google.maps.Rectangle. Örnekleme yaparken, dikdörtgenin path, strokColor, strokOapacity, fillColor, fillOapacity, stroight, bounds vb. Özelliklerine istenen değerleri belirtmemiz gerekir.
Misal
Aşağıdaki örnek, bir dikdörtgen kullanarak haritada belirli bir alanın nasıl vurgulanacağını gösterir -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:6,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myrectangle = new google.maps.Rectangle({
strokeColor:"#0000FF",
strokeOpacity:0.6,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4,
map:map,
bounds:new google.maps.LatLngBounds(
new google.maps.LatLng(17.342761, 78.552432),
new google.maps.LatLng(16.396553, 80.727725)
)
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Bu size şu çıktıyı verir -
Çevreler
Dikdörtgenler gibi, sınıfı somutlaştırarak bir daire kullanarak belirli bir bölgenin veya bir durumun coğrafi alanını vurgulamak için Daireler kullanabiliriz. google.maps.Circle. Örnekleme yaparken, yol, strokColor, strokOapacity, fillColor, fillOapacity, strok Ağırlığı, radius vb. Gibi dairenin özelliklerine istenen değerleri belirtmemiz gerekir.
Misal
Aşağıdaki örnek, Yeni Delhi çevresindeki alanı bir daire kullanarak nasıl vurgulayacağınızı gösterir -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(28.613939,77.209021),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myCity = new google.maps.Circle({
center:new google.maps.LatLng(28.613939,77.209021),
radius:150600,
strokeColor:"#B40404",
strokeOpacity:0.6,
strokeWeight:2,
fillColor:"#B40404",
fillOpacity:0.6
});
myCity.setMap(map);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretecek -
İşaretçiler, çokgenler, çoklu çizgiler ve diğer geometrik şekillere ek olarak, harita üzerinde bir Bilgi Penceresi de çizebiliriz. Bu bölümde Bilgi Penceresinin nasıl kullanılacağı açıklanmaktadır.
Pencere Ekleme
Bilgi Penceresi haritaya her türlü bilgiyi eklemek için kullanılır. Örneğin, haritadaki bir konum hakkında bilgi vermek istiyorsanız, bir bilgi penceresi kullanabilirsiniz. Genellikle bilgi penceresi bir işaretleyiciye eklenir. Örneğini oluşturarak bir bilgi penceresi ekleyebilirsiniz.google.maps.InfoWindowsınıf. Aşağıdaki özelliklere sahiptir -
Content - Bu seçeneği kullanarak içeriğinizi String formatında aktarabilirsiniz.
position - Bu seçeneği kullanarak bilgi penceresinin konumunu seçebilirsiniz.
maxWidth- Varsayılan olarak, bilgi penceresinin genişliği metin kaydırılana kadar uzatılır. MaxWidth belirleyerek, bilgi penceresinin boyutunu yatay olarak sınırlayabiliriz.
Misal
Aşağıdaki örnek, işaretçinin nasıl ayarlanacağını ve üzerinde bir bilgi penceresinin nasıl belirtileceğini gösterir -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.433053, 78.412172),
map: map,
draggable:true,
icon:'/scripts/img/logo-footer.png'
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033"
});
infowindow.open(map,marker);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretecek -
İşaretçiler, çokgenler, çoklu çizgiler ve diğer geometrik şekillere ek olarak, bir haritaya önceden tanımlanmış vektör görüntüleri (semboller) de ekleyebiliriz. Bu bölüm, Google Maps tarafından sağlanan sembollerin nasıl kullanılacağını açıklamaktadır.
Bir Sembol Eklemek
Google, bir işaretçi veya sürekli çizgide kullanılabilen çeşitli vektör tabanlı görüntüler (semboller) sağlar. Tıpkı diğer kaplamalar gibi, bu önceden tanımlanmış sembolleri bir harita üzerine çizmek için, onların ilgili sınıflarını somutlaştırmalıyız. Aşağıda, Google tarafından sağlanan önceden tanımlanmış sembollerin bir listesi ve sınıf adları verilmiştir -
Circle - google.maps.SymbolPath.CIRCLE
Backward Pointing arrow (closed) - google.maps.SymbolPath.BACKWARD_CLOSED_ARROW
Forward Pointing arrow (closed) - google.maps.SymbolPath.FORWARD_CLOSED_ARROW
Forward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE
Backward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE
Bu semboller şu özelliklere sahiptir: path, fillColor, fillOpacity, scale, stokeColor, strokOpacity ve strok Ağırlığı.
Misal
Aşağıdaki örnek, Google Haritası üzerinde önceden tanımlanmış sembollerin nasıl çizileceğini gösterir.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 5,
strokeWeight:2,
strokeColor:"#B40404"
},
draggable:true,
map: map,
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretir -
Sembolü Canlandırma
İşaretçiler gibi, sembollere sıçrama ve düşme gibi animasyonlar da ekleyebilirsiniz.
Misal
Aşağıdaki örnek, bir sembolün haritada işaretçi olarak nasıl kullanılacağını ve ona animasyon ekleneceğini gösterir -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 5,
strokeWeight:2,
strokeColor:"#B40404"
},
animation:google.maps.Animation.DROP,
draggable:true,
map: map
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretir -
Google Haritalar JavaScript programı, kullanıcı tarafından oluşturulan çeşitli olaylara yanıt verebilir. Bu bölüm, Google Haritalar ile çalışırken olay işlemenin nasıl gerçekleştirileceğini gösteren örnekler sunar.
Etkinlik İşleyici Ekleme
Yöntemi kullanarak bir olay dinleyicisi ekleyebilirsiniz. addListener(). Dinleyiciyi eklemek istediğimiz nesne adı, olayın adı ve işleyici olayı gibi parametreleri kabul eder.
Misal
Aşağıdaki örnek, bir işaretleyici nesneye bir olay dinleyicisinin nasıl ekleneceğini gösterir. Program, işaretçiye her çift tıkladığımızda haritanın yakınlaştırma değerini 5 arttırır.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center: myCenter,
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position: myCenter,
title:'Click to zoom'
});
marker.setMap(map);
//Zoom to 7 when clicked on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretir -
Tıklamayla Bilgi Penceresi Açma
Aşağıdaki kod, işaretleyiciye tıklandığında bir bilgi penceresi açar -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hi"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretir -
Dinleyiciyi Kaldırma
Yöntemi kullanarak mevcut bir dinleyiciyi kaldırabilirsiniz removeListener(). Bu yöntem dinleyici nesnesini kabul eder, bu nedenle dinleyiciyi bir değişkene atamalı ve bu yönteme geçirmeliyiz.
Misal
Aşağıdaki kod, bir dinleyicinin nasıl kaldırılacağını gösterir -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hi"
});
var myListener = google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.removeListener(myListener);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Aşağıdaki çıktıyı üretir -