Web 2 Zero Programowanie Web 2.0 : PHP, AJAX, Google API, Adobe Flex

2lip/101

Trochę geografii na twojej stronie – “Instalacja” Map Google

Nie raz zdarzyło się nam że ładowaliśmy do naszego bloga / strony mapy z położeniem jakiegoś miejsca obiektu itd....
Dziś mamy do tego jedne z najlepszych niekomercyjnych rozwiązań dostępnych na rynku Google Maps (Pomijam wszystkie zawodowe komercyjne rozwiązania w stylu ArcGis , bo jest to zupełnie inna półka). Ale koniec tych dywagacji do dzieła!!!.
Google Maps oferuje nam całe API z którego możemy dowolnie korzystać na stronach www .Wystarczy posiadać konto Google i zgłosić się po klucz do Mapki dla naszej witryny.
Postaram się zmieścić krótki przykład "wmontowania mapki na stronie www".

1.Na stronie umieszczamy element w którym chcielibyśmy umieścić naszą mapkę dajemy mu odpowiedni identyfikator.Powiedzmy że będzie to "div" z identyfikatorem "kontener_mapy"

1

<div id="kontener_mapy"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
         <title>Moja 1 mapa Google Maps</title>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
 
           <div id="kontener_mapy"><div>
 
</body>
</html>

2. Dopinamy bibliotekę Google Maps ® do naszej strony.Ustalamy też rozmiary naszego kontenera na mapkę.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
         <title>Moja 1 mapa Google Maps</title>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         <!-- Dołączona biblioteka Google Maps -->
	<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
</head>
<body>
<!-- Troszkę stylu dla naszego kontenera na mapę . 
   Uwaga nasz kontener musi posiadać atrybuty width i height
   w przeciwnym wypadku nasza mapka nie zostanie  wyświetlona. 
-->
<div id="kontener_mapy" style="width:300px;height:300px;border: 1px solid #FF00CC;"></div>
 
</body>
</html>

3. No i zabieramy się do kodowania!!! Piszemy pierwszą funkcje w Java Script.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
         <title>Moja 1 mapa Google Maps</title>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Moja 1 mapa Google Maps</title>
	<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
	<script type="text/javascript">
        <!-- Funckja która załaduje naszą mapę w dokumencie html -->
	function zaladujMape()
	{
 
 
	}
	</script>
</head>
<body>
<div id="kontener_mapy" style="width:300px;height:300px;border: 1px solid #FFFFCC;"></div>
</body>
</html>

4. Ustalamy współrzędne mapy,zoom ,typ oraz miejsce wycentrowania. Razem będą tworzyły składowe określające cechy naszej mapy.

10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<script type="text/javascript">
	function zaladujMape()
	{
            /*  Współrzędne dowolnego miejsca na mapie , w tym przypadku 
                Calgary w prowincji Alberta W Kanadzie  */
            var wspolrzedne = new  google.maps.LatLng(51.042119,-114.191913);   
            /* zoom mapy */
            var zoomMapy = 12;
            /* Śródkę naszej mapy będzie się znajdował dokładnie w punkcie podanych współrzenych , 
              oczywiście może to być dowolny inny punkt 
            */
            var srodekMapy = wspolrzedne;  
            /* Wybieramy tryb w jakim wyświetlana ma być nasza mapa , w tym przypadku 
             domyślny standardowy tryb mapy drogowej */
	    var typMapy = new google.maps.mapTypeId.ROADMAP;
	    var skladoweMapy = {zoom:zoomMapy,center:srodekMapy,mapTypeId:typMapy};
 
	}
	</script>

5. W Końcu tworzymy samą mapkę.

27
28
29
30

 /* Ładujemy mapę funkcją google.maps.Map(var1,var2)   */
 /* var1 - kontener w którym ma być umieszczona nasz mapka */
 /* var2 - opcje konfiguracyjne naszej mapy */
 var mapa = new google.maps.Map(ducument.getElementByid("kontener_mapy"),skladoweMapy);

6. Wystarczy teraz uruchomić nasza funkcję "zaladujMape()" podczas zdarzenia onload dla naszego dokumentu html.

18

	<body onload="zaladujMape();">

7.Gotowe!!!Jeśli nasza mapa będzie postawiona na jakiejkolwiek witrynie dostępnej w sieci należy pamiętać o uzyskaniu klucza dla naszej domeny od Google Maps bez którego nasza mapka nie będzie się wyświetlała.Klucz dostępny jest pod adresem  http://code.google.com/intl/pl/apis/maps/signup.html

Tagi: , , , , Dodaj komentarz

Powiązane Tematy:

Komentarze (1) Trackbacks (0)
  1. marvin
    Sierpień 31st, 2010 - 18:07

    Hi, opisany sposób kiedyś wykorzystywałem dziś jest to nie potrzebne
    co prawda nie czytałem na temat użycia komercyjnego ale chyba niema różnic; w każdym razie chodzi mi o fakt że dziś wystarczy kliknąć w link “link” w prawym rogu nad mapą (gdy wyświetlamy ją na stronie maps.google.pl ) i skopiować kod html odpowiedzialny za wyświetlanie mapy na dowolnej witrynie, można też w opcjach zaawansowanych podać wymiary mapy itp. :]


Dodaj komentarz


Brak trackbacków.

« Trochę geografii na twojej stronie II– “Instalacja” Map Bing Początek – web kodowanie i nie tylko. »

Branża

Kategorie

Archiwa

Strony

Tagi

bing api blog dodawanie mapy bing dodawanie mapy google google api kodowanie mapka na stronie mapy bing mapy google podstawy