Mapy Google - krótki przewodnik
Co to są Mapy Google?
Mapy Google to bezpłatna usługa map internetowych 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.
Przeglądaj poziome i pionowe panoramiczne obrazy ulic różnych miast na całym świecie i nawiguj po nich.
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 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 wystąpienia 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 załadować 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 -
W poprzednim rozdziale omówiliśmy, jak załadować podstawową mapę. Tutaj zobaczymy, jak wybrać wymagany typ mapy.
Rodzaje map
Mapy Google oferują cztery typy map. Oni są -
ROADMAP- To jest typ domyślny. Jeśli nie wybrałeś żadnego z typów, zostanie to wyświetlone. Pokazuje widok ulicy w wybranym regionie.
SATELLITE - Jest to typ mapy przedstawiający obrazy satelitarne wybranego regionu.
HYBRID - Ten typ mapy pokazuje główne ulice na zdjęciach satelitarnych.
TERRAIN - Jest to typ mapy, który pokazuje teren i roślinność
Składnia
Aby wybrać jeden z tych typów map, musisz wspomnieć o odpowiednim identyfikatorze typu mapy w opcjach mapy, jak pokazano poniżej -
var mapOptions = {
mapTypeId:google.maps.MapTypeId.Id of the required map type
};Mapa drogowa
Poniższy przykład pokazuje, jak wybrać mapę typu ROADMAP -
<!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>Wytworzy następujący wynik -
Satelita
Poniższy przykład pokazuje, jak wybrać mapę typu SATELLITE -
<!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>Wytworzy następujący wynik -
Hybrydowy
Poniższy przykład pokazuje, jak wybrać mapę typu HYBRYDOWEGO -
<!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>Wytworzy następujący wynik -
Teren
Poniższy przykład pokazuje, jak wybrać mapę typu TERRAIN -
<!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>Wytworzy następujący wynik -
Zwiększ / zmniejsz wartość powiększenia
Możesz zwiększyć lub zmniejszyć wartość powiększenia mapy, modyfikując wartość zoom atrybut w opcjach mapy.
Składnia
Możemy zwiększać lub zmniejszać wartość zoomu mapy za pomocą opcji zoom. Poniżej podano składnię zmiany wartości powiększenia bieżącej mapy.
var mapOptions = {
zoom:required zoom value
};Przykład: Zoom 6
Poniższy kod wyświetli mapę drogową miasta Vishakhapatnam z wartością powiększenia 6.
<!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>Wytworzy następujący wynik -
Przykład: Zoom 10
Poniższy kod wyświetli mapę drogową miasta Vishakhapatnam z wartością powiększenia 10.
<!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>Wytworzy następujący wynik -
Domyślnie nazwy miast i nazwy opcji podane na mapie będą w języku angielskim. W razie potrzeby możemy wyświetlić takie informacje również w innych językach. Ten proces jest znany jakolocalization. W tym rozdziale dowiemy się, jak zlokalizować mapę.
Lokalizowanie mapy
Możesz dostosować (zlokalizować) język mapy, określając opcję języka w adresie URL, jak pokazano poniżej.
<script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>Przykład
Oto przykład, który pokazuje, jak zlokalizować GoogleMaps. Tutaj możesz zobaczyć mapę drogową Chin zlokalizowaną na język chiński.
<!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>Wynik
Wytworzy następujący wynik -
Mapy Google zapewniają interfejs użytkownika z różnymi elementami sterującymi, aby umożliwić użytkownikowi interakcję z mapą. Możemy dodawać, dostosowywać i wyłączać te kontrolki.
Sterowanie domyślne
Oto lista domyślnych elementów sterujących udostępnianych przez Mapy Google -
Zoom- Aby zwiększyć i zmniejszyć poziom powiększenia mapy, domyślnie będziemy mieć suwak z przyciskami + i -. Ten suwak będzie znajdował się w rogu lewej strony mapy.
Pan - Tuż nad suwakiem powiększenia znajduje się element sterujący przesuwaniem mapy.
Map Type- Możesz zlokalizować tę kontrolkę w prawym górnym rogu mapy. Zapewnia opcje typu mapy, takie jak satelita, mapa drogowa i teren. Użytkownicy mogą wybrać dowolną z tych map.
Street view- Pomiędzy ikoną panoramy a suwakiem powiększenia znajduje się ikona Pegmana. Użytkownicy mogą przeciągnąć tę ikonę i umieścić ją w określonej lokalizacji, aby uzyskać widok ulicy.
Przykład
Oto przykład, w którym możesz obserwować domyślne elementy sterujące interfejsu użytkownika udostępniane przez Mapy Google -
Wyłączanie domyślnych formantów interfejsu użytkownika
Możemy wyłączyć domyślne elementy sterujące interfejsu użytkownika zapewniane przez Mapy Google, po prostu tworząc rozszerzenie disableDefaultUI wartość true w opcjach mapy.
Przykład
Poniższy przykład pokazuje, jak wyłączyć domyślne elementy sterujące interfejsu użytkownika udostępniane przez Mapy Google.
<!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>Wytworzy następujący wynik -
Włączanie / wyłączanie wszystkich elementów sterujących
Oprócz tych domyślnych elementów sterujących, Mapy Google zapewniają również trzy dodatkowe elementy sterujące wymienione poniżej.
Scale- Kontrolka Skala wyświetla element skali mapy. Ta kontrolka nie jest domyślnie włączona.
Rotate- Element sterujący Obróć zawiera małą okrągłą ikonę, która umożliwia obracanie map zawierających ukośne obrazy. Ta kontrolka pojawia się domyślnie w lewym górnym rogu mapy. (Aby uzyskać więcej informacji, patrz Obrazy 45 °).
Overview- Aby zwiększyć i zmniejszyć poziom powiększenia mapy, mamy domyślnie suwak z przyciskami + i -. Ten suwak znajduje się w lewym rogu mapy.
W opcjach mapy możemy włączać i wyłączać dowolne elementy sterujące zapewniane przez Mapy Google, jak pokazano poniżej -
{
panControl: boolean,
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean,
overviewMapControl: boolean
}Przykład
Poniższy kod pokazuje, jak włączyć wszystkie kontrolki -
<!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>Wytworzy następujący wynik -
Opcje sterowania
Możemy zmienić wygląd elementów sterujących w Mapach Google za pomocą opcji sterowania. Na przykład element sterujący zoomem można zmniejszać lub powiększać. Wygląd kontrolki MapType można zmienić na poziomy pasek lub menu rozwijane. Poniżej znajduje się lista opcji sterowania dla kontrolek Zoom i MapType.
| Sr.No. | Nazwa kontrolna | Opcje sterowania |
|---|---|---|
| 1 | Kontrola powiększenia |
|
| 2 | Kontrolka MapType |
|
Przykład
Poniższy przykład demonstruje, jak używać opcji sterowania -
<!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>Generuje następujący wynik -
Pozycjonowanie sterowania
Możesz zmienić położenie formantów, dodając następujący wiersz w opcjach sterowania.
position:google.maps.ControlPosition.Desired_Position,Oto lista dostępnych pozycji, na których można umieścić kontrolkę na mapie -
- TOP_CENTER
- TOP_LEFT
- TOP_RIGHT
- LEFT_TOP
- RIGHT_TOP
- LEFT_CENTER
- RIGHT_CENTER
- LEFT_BOTTOM
- RIGHT_BOTTOM
- BOTTOM_CENTER
- BOTTOM_LEFT
- BOTTOM_RIGHT
Przykład
Poniższy przykład pokazuje, jak umieścić kontrolkę MapTypeid w górnej środkowej części mapy i jak umieścić kontrolkę powiększenia w dolnej środkowej części mapy.
<!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>Generuje następujący wynik -
Możemy rysować obiekty na mapie i wiązać je z wybraną szerokością i długością geograficzną. Nazywa się to nakładkami. Mapy Google zapewniają różne nakładki, jak pokazano poniżej.
- Markers
- Polylines
- Polygons
- Okrąg i prostokąt
- Okno informacyjne
- Symbols
Aby oznaczyć pojedyncze miejsce na mapie, Google Maps zapewnia markers. Te znaczniki używają standardowego symbolu, który można dostosować. W tym rozdziale wyjaśniono, jak dodawać znaczniki oraz jak je dostosowywać, animować i usuwać.
Dodawanie prostego markera
Możesz dodać prosty znacznik do mapy w żądanym miejscu, tworząc instancję klasy znacznika i określając pozycję, która ma być oznaczona za pomocą latlng, jak pokazano poniżej.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(19.373341, 78.662109),
map: map,
});Przykład
Poniższy kod ustawia znacznik na mieście Hyderabad (Indie).
<!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>Generuje następujący wynik -
Animowanie znacznika
Po dodaniu znacznika do mapy możesz przejść dalej i dodać do niego animacje np bounce i drop. Poniższy fragment kodu pokazuje, jak dodać animacje odbijania i upuszczania do znacznika.
//To make the marker bounce`
animation:google.maps.Animation.BOUNCE
//To make the marker drop
animation:google.maps.Animation.DropPrzykład
Poniższy kod ustawia znacznik na mieście Hyderabad z dodatkowym efektem animacji -
<!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>Generuje następujący wynik -
Dostosowywanie znacznika
Możesz użyć własnych ikon zamiast domyślnej ikony dostarczanej przez Mapy Google. Po prostu ustaw ikonę jakoicon:'ICON PATH'. I możesz przeciągnąć tę ikonę, ustawiającdraggable:true.
Przykład
Poniższy przykład pokazuje, jak dostosować znacznik do żądanej ikony -
<!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>Generuje następujący wynik -
Usuwanie znacznika
Możesz usunąć istniejący znacznik, ustawiając znacznik na null za pomocą marker.setMap() metoda.
Przykład
Poniższy przykład pokazuje, jak usunąć znacznik z mapy -
<!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>Generuje następujący wynik -
W poprzednim rozdziale dowiedzieliśmy się, jak używać znaczników w Mapach Google. Wraz ze znacznikami możemy również dodawać różne kształty, takie jak koła, wielokąty, prostokąty, polilinie itp. W tym rozdziale wyjaśniono, jak korzystać z kształtów udostępnianych przez Google Maps.
Polilinie
Polilinie dostarczane przez Google Maps są przydatne do śledzenia różnych ścieżek. Możesz dodać polilinie do mapy, tworząc instancję klasygoogle.maps.Polyline. Podczas tworzenia wystąpienia tej klasy musimy określić wymagane wartości właściwości polilinii, takie jak StrokeColor, StokeOpacity i strokeWeight.
Możemy dodać polilinię do mapy, przekazując jej obiekt do metody setMap(MapObject). Możemy usunąć polilinię, przekazując wartość null do metody SetMap ().
Przykład
Poniższy przykład przedstawia polilinię podświetlającą ścieżkę między miastami Delhi, Londynem, Nowym Jorkiem i Pekinem.
<!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>Wytworzy następujący wynik -
Wielokąty
Wielokąty służą do wyróżnienia określonego obszaru geograficznego stanu lub kraju. Możesz utworzyć żądany wielokąt, tworząc instancję klasygoogle.maps.Polygon. Podczas tworzenia instancji musimy określić żądane wartości we właściwościach Polygon, takie jak path, strokeColor, strokeOapacity, fillColor, fillOapacity itp.
Przykład
Poniższy przykład pokazuje, jak narysować wielokąt, aby wyróżnić miasta Hajdarabad, Nagpur i Aurangabad.
<!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>Wytworzy następujący wynik -
Prostokąty
Możemy użyć prostokątów, aby zaznaczyć obszar geograficzny określonego regionu lub stanu za pomocą prostokątnej ramki. Możemy mieć prostokąt na mapie, tworząc instancję klasygoogle.maps.Rectangle. Podczas tworzenia instancji musimy określić żądane wartości do właściwości prostokąta, takie jak path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, bounds itp.
Przykład
Poniższy przykład pokazuje, jak wyróżnić określony obszar na mapie za pomocą prostokąta -
<!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>Daje to następujące dane wyjściowe -
Kręgi
Podobnie jak prostokąty, możemy użyć Kręgów, aby wyróżnić obszar geograficzny określonego regionu lub stanu za pomocą okręgu, tworząc instancję klasy google.maps.Circle. Podczas tworzenia instancji musimy określić żądane wartości właściwości koła, takie jak path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, radius itp.
Przykład
Poniższy przykład pokazuje, jak wyróżnić obszar wokół New Delhi za pomocą okręgu -
<!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>Wytworzy następujący wynik -
Oprócz znaczników, wielokątów, polilinii i innych kształtów geometrycznych, możemy również narysować na mapie okno informacyjne. W tym rozdziale wyjaśniono, jak korzystać z okna informacyjnego.
Dodawanie okna
Okno informacyjne służy do dodawania dowolnych informacji do mapy. Na przykład, jeśli chcesz podać informacje o lokalizacji na mapie, możesz użyć okna informacyjnego. Zwykle okno informacyjne jest dołączone do znacznika. Możesz dołączyć okno informacyjne, tworząc wystąpieniegoogle.maps.InfoWindowklasa. Ma następujące właściwości -
Content - Za pomocą tej opcji możesz przekazać swoją zawartość w formacie String.
position - Za pomocą tej opcji możesz wybrać położenie okna informacyjnego.
maxWidth- Domyślnie szerokość okna informacyjnego będzie rozciągnięta do momentu zawijania tekstu. Określając maxWidth, możemy ograniczyć rozmiar okna informacyjnego w poziomie.
Przykład
Poniższy przykład pokazuje, jak ustawić znacznik i określić okno informacyjne nad nim -
<!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>Wytworzy następujący wynik -
Oprócz znaczników, wielokątów, polilinii i innych kształtów geometrycznych, możemy również dodawać na mapie predefiniowane obrazy wektorowe (symbole). W tym rozdziale wyjaśniono, jak używać symboli udostępnianych przez Google Maps.
Dodawanie symbolu
Google udostępnia różne obrazy wektorowe (symbole), których można użyć na znaczniku lub polilinii. Podobnie jak inne nakładki, aby narysować te predefiniowane symbole na mapie, musimy utworzyć instancję ich odpowiednich klas. Poniżej znajduje się lista wstępnie zdefiniowanych symboli udostępnionych przez Google i ich nazwy klas -
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
Te symbole mają następujące właściwości - path, fillColor, fillOpacity, scale, stokeColor, strokeOpacity i strokeWeight.
Przykład
Poniższy przykład ilustruje sposób rysowania predefiniowanych symboli na mapie Google.
<!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>Generuje następujący wynik -
Animowanie symbolu
Podobnie jak znaczniki, możesz dodawać animacje, takie jak odbijanie i upuszczanie, również do symboli.
Przykład
Poniższy przykład pokazuje, jak użyć symbolu jako znacznika na mapie i dodać do niego animację -
<!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>Generuje następujący wynik -
Program Google Maps JavaScript może reagować na różne zdarzenia generowane przez użytkownika. Ten rozdział zawiera przykłady pokazujące, jak obsługiwać zdarzenia podczas pracy z Google Maps.
Dodawanie detektora zdarzeń
Możesz dodać detektor zdarzeń za pomocą metody addListener(). Akceptuje parametry, takie jak nazwa obiektu, do którego chcemy dodać detektor, nazwa zdarzenia i zdarzenie obsługi.
Przykład
Poniższy przykład pokazuje, jak dodać detektor zdarzeń do obiektu znacznika. Program zwiększa wartość powiększenia mapy o 5 za każdym razem, gdy klikamy dwukrotnie na marker.
<!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>Generuje następujący wynik -
Otwieranie okna informacyjnego po kliknięciu
Poniższy kod otwiera okno informacyjne po kliknięciu znacznika -
<!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>Generuje następujący wynik -
Usuwanie słuchacza
Możesz usunąć istniejący odbiornik za pomocą metody removeListener(). Ta metoda akceptuje obiekt detektora, dlatego musimy przypisać detektor do zmiennej i przekazać go do tej metody.
Przykład
Poniższy kod pokazuje, jak usunąć odbiornik -
<!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>Generuje następujący wynik -