Latest web development tutorials

Baza Map Google

Tworzenie prostych aplikacji Mapy Google

Teraz stwórzmy prosty Google Maps.

Poniżej znajduje się wykres pokazujący Google Maps Londyn:

Przykłady

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

</body>
</html>

Spróbuj »

Przykłady analityczne

W powyższym przykładzie tworzymy procesu rozwiązywania mapę Google.

Dlaczego powinniśmy zadeklarować HTML5 aplikacji?

<!DOCTYPE html>

Większość przeglądarek użyć "standardowy model" HTML5 renderowanie stron dokumentu, co oznacza, że ​​aplikacja jest kompatybilna ze wszystkimi popularnymi przeglądarkami.

Ponadto, jeśli nie ma tagu DOCTYPE, przeglądarka użyć trybu promiscuous (tryb dziwactw) do renderowania zawartości strony.

Wskazówka: Należy zauważyć,że niektóre "trybie rozwiązłym" w CSS i nie można korzystać z trybu standardowego. W konkretnej aplikacji, wszystkie muszą dziedziczyć elementów bloku macierzystych w oparciu o procent wielkości. Jeśli nie zostanie określona wielkość modułu w rodzica, wartość domyślna 0 x 0 pikseli. Jeśli chcesz korzystać z procentów, może być zadeklarowany w tagu <style>, co następuje:

<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>

Ta mapa pokaż Moduł deklaracja stylu (GoogleMap) powinna być wysokość HTML 100%.

Dodaj Google Maps API Key

W poniższym przykładzie pierwsza <script> tag muszą być zawarte w Google Maps API:

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

Google wygenerowany klucz API umieszczone wkluczowych parametrów(key= YOUR_API_KEY).

Parametr Czujnik jest wymagane, parametr jest używany do wskazania, czy aplikacja wykorzystuje czujnik (podobny do nawigacji GPS), aby znaleźć lokalizację użytkownika.Wartości parametrów można ustawić na wartość true lub false.

HTTPS

Jeśli aplikacja jest bezpieczna HTTP (HTTPS: http bezpieczne) aplikacji, można użyć protokołu HTTPS, aby załadować API Map Google:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

asynchroniczne ładowanie

Podobnie, możemy również załadować Google Maps API po stronie w pełni załadowany.

W poniższym przykładzie użyto window.onload wdrożyć w pełni załadowany, gdy strona jest ładowana Google Maps. loadScript () Funkcja ta tworzy załadować Google Maps API <script> tag. Również na końcu etykiety do zwrotnego = zainicjować parametry inicjalizacji () będzie wykonywany po API jest w pełni załadowany jako funkcję zwrotną:

Przykłady

function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js? key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize"; document.body.appendChild(script);
}

window.onload = loadScript;

Spróbuj »

Mapa Właściwości niestandardowe

Przed inicjowanie mapę, musimy utworzyć obiekt na mapie, aby zdefiniować właściwości nieruchomość na mapie:

var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Center (Centrum)

Centrum atrybut określa środek mapy, które za pomocą współrzędnych (szerokość, długość), aby utworzyć centralny punkt na mapie.

Powiększenie (zoom Series)

Obiekt zoom zoom Mapa określa liczbę etapów. zoom: 0 pokazać pełnej skali całą mapę Ziemi.

MapTypeId (początkowa typu mapa)

mapTypeId Atrybut type określa wstępną mapę.

mapTypeId obejmuje następujące cztery typy:

  • google.maps.MapTypeId.HYBRID: zdjęcia satelitarne wskazują na główną ulicę przezroczystej warstwie
  • google.maps.MapTypeId.ROADMAP: wyświetlanie normalnej ulicy mapę
  • google.maps.MapTypeId.SATELLITE: Pokaż zdjęcie satelitarne
  • google.maps.MapTypeId.TERRAIN: wyświetla mapy z cech fizycznych (takich jak topografia i roślinności) od

Gdzie można wyświetlić Mapy Google

Zwykle stosowany w Google Maps <div>:

<div id="googleMap" style="width:500px;height:380px;"></div>

Uwaga: wielkość mapie będą div ustawić, aby pokazać rozmiar mapy, dzięki czemu możemy ustawić rozmiar mapie w <div>.

Tworzenie obiektu mapy

var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);

Powyższy kod używa parametru (mapProp) w elemencie <div> (id jest GoogleMap) tworzy nową mapę.

Wskazówka: Jeśli chceszutworzyć wiele stron map, trzeba tylko dodać nową obiekty mapy może być.

Poniższy przykład definiuje cztery mapy instancji (mapy za pomocą czterech różnych rodzajów map):

Przykłady

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);

Spróbuj »

Ładowanie mapy

okno na mapie, aby zainicjować obiektu po załadowaniu przez wykonywanie funkcji initialize (), która gwarantuje, że strona jest w pełni załadowany przed załadowaniem Mapy Google:

google.maps.event.addDomListener(window, 'load', initialize);