Mapy Google - wprowadzenie

Co to są Mapy Google?

Mapy Google to bezpłatna internetowa usługa kartograficzna firmy Google, która zapewnia różnego rodzaju informacje geograficzne. Korzystając z Google Maps, można.

Wyszukaj miejsca lub uzyskaj wskazówki dojazdu z jednego miejsca do drugiego.
Wyświetlaj i nawiguj po poziomych i pionowych panoramicznych zdjęciach ulic różnych miast na całym świecie.
Uzyskaj szczegółowe informacje, takie jak ruch w określonym miejscu.

Mapy Google zapewniają interfejs API, za pomocą którego można dostosowywać mapy i wyświetlane na nich informacje. W tym rozdziale wyjaśniono, jak załadować prostą Mapę Google na swoją stronę internetową za pomocą HTML i JavaScript.

Kroki, aby załadować mapę na stronę internetową

Postępuj zgodnie z instrukcjami podanymi poniżej, aby załadować mapę na swoją stronę internetową -

Krok 1: Utwórz stronę HTML

Utwórz podstawową stronę HTML z tagami head i body, jak pokazano poniżej -

<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Krok 2: Załaduj interfejs API

Załaduj lub dołącz interfejs API Map Google za pomocą tagu script, jak pokazano poniżej -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Krok 3: Utwórz kontener

Aby utrzymać mapę, musimy stworzyć element kontenera, zwykle do tego celu służy tag <div> (ogólny kontener). Utwórz element kontenera i zdefiniuj jego wymiary, jak pokazano poniżej -

<div id = "sample" style = "width:900px; height:580px;"></div>

Krok 4: Opcje mapy

Przed inicjalizacją mapy musimy utworzyć plik mapOptionsobiekt (jest tworzony tak jak literał) i ustaw wartości dla zmiennych inicjalizacyjnych mapy. Mapa ma trzy główne opcje, a mianowicie:centre, zoom, i maptypeid.

centre- W tej właściwości musimy określić lokalizację, w której chcemy wyśrodkować mapę. Aby przekazać lokalizację, musimy utworzyć plikLatLng obiektu, przekazując konstruktorowi szerokość i długość geograficzną wymaganej lokalizacji.
zoom - W ramach tej właściwości musimy określić poziom powiększenia mapy.
maptypeid- W ramach tej właściwości musimy określić typ mapy, którą chcemy. Poniżej przedstawiono typy map udostępnianych przez Google -
- ROADMAP (normalna, domyślna mapa 2D)
- SATELITARNA (mapa fotograficzna)
- HYBRYDOWY (połączenie dwóch lub więcej innych typów)
- TEREN (mapa z górami, rzekami itp.)

Powiedzmy, że w funkcji loadMap(), utwórz obiekt mapOptions i ustaw wymagane wartości dla center, zoom i mapTypeId, jak pokazano poniżej.

function loadMap() {
   var mapOptions = {
      center:new google.maps.LatLng(17.240498, 82.287598), 
      zoom:9, 
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
}

Krok 5: Utwórz obiekt mapy

Możesz utworzyć mapę, tworząc wystąpienie klasy JavaScript o nazwie Map. Podczas tworzenia instancji tej klasy musisz przekazać kontener HTML do przechowywania mapy i opcji mapy dla wymaganej mapy. Utwórz obiekt mapy, jak pokazano poniżej.

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

Krok 6: załaduj mapę

Na koniec załaduj mapę, wywołując metodę loadMap () lub dodając odbiornik DOM.

google.maps.event.addDomListener(window, 'load', loadMap);
                    or
<body onload = "loadMap()">

Przykład

Poniższy przykład pokazuje, jak wczytać mapę drogową miasta o nazwie Vishakhapatnam z wartością powiększenia 12.

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

Generuje następujący wynik -