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ü
  • google.maps.ZoomControlStyle.SMALL
  • google.maps.ZoomControlStyle.LARGE
  • google.maps.ZoomControlStyle.DEFAULT
2 MapType denetimi
  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU
  • google.maps.MapTypeControlStyle.DEFAULT

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

Misal

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 -