Loading:


Tworzenie mapy z google API, dodawanie markerów i chmurek z pliku XML

Przedstawię wam jak zrobić własną mapę z google API, dodać markery z pliku XML, wyświetlać dymki i jak je formatować za pomocą CSS.


Na początek musicie wygenerować sobie kod indentyfikacyjny dla swojej domeny: [ pobierz kod ]

Tam podajecie domene akceputjecie regulamin i dostajecie kod.

Teraz przejdźmy do mapy poniżej przedstawiam kod który :

1. Tworzy po lewej przyciski skalowania mapy

2. Wyświetla opcje przełączania się miedzy rodzajami mapy (używa własnych przycisków)

3. Tworzy w rogu mapy minimapę

4. Wyświetla kilka rodzajów markerów z dymkami i bez

5. Zaciąga kilka markerów z pliku XML


Ten gotowy kod poniżej możecie odrazu wkleić u siebie pamiętajcie o zmiannie kodu aktywacyjnego oraz utworzeniu plików: markery.xml aby zaciągnąć markery z pliku xml no i o css.css gdzie są style do naszej mapy.



Zobacz efekt



Napisz Artyku³

Listing


//PLIK HTML

<html xmlns='http://www.w3.org/1999/xhtml'>  
    <head>  
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />  
        <title>Pierwsza strona</title>  
                <!-- Tutaj podajemy nasz kod aktywacyjny -->
                <script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAALlcB2mNKHO3S7jhbuQncYhRO1J72BGfqxiUXRWzAvEIWI9ws6hQCOE0J_2PMfScHKbedstjt8J94Hw' type='text/javascript'></script>
               
                <!-- Plik css odpowiadający za wyświetlanie graficznych przycisków zmiany trybu mapy przyciski graficzne to activ.gif oraz noactiv.gif  -->
                <link href="css.css" rel="stylesheet" type="text/css" />
    </head>
       
        <!-- Tutaj po załadowaniu strony musimy odpslić te 2 funkcje -->  
    <body onload='mapaStart()' onunload='GUnload()'>  
        <script type='text/javascript'>
                function TypyMapy() {}
                TypyMapy.prototype = new GControl();
<!-- Tutaj Tworzymy przyciski i interakcje przycisków zmiany trybu mapy --->  
                TypyMapy.prototype.odswiez = function()
                {
                        if(this.mapa.getCurrentMapType() != G_SATELLITE_MAP)
                                this.przycisk1.className = 'nieaktywny';
                        else
                                this.przycisk1.className = 'aktywny';
                               
                        if(this.mapa.getCurrentMapType() != G_HYBRID_MAP)
                                this.przycisk2.className = 'nieaktywny';
                        else
                                this.przycisk2.className = 'aktywny';
                               
                        if(this.mapa.getCurrentMapType() != G_NORMAL_MAP)
                                this.przycisk3.className = 'nieaktywny';
                        else
                                this.przycisk3.className = 'aktywny';
                               
                        if(this.mapa.getCurrentMapType() != G_PHYSICAL_MAP)
                                this.przycisk4.className = 'nieaktywny';
                        else
                                this.przycisk4.className = 'aktywny';
                }
               
                TypyMapy.prototype.initialize = function(mapa)
                {
                        var lista       = document.createElement("ul");
                        lista.id        = 'typymapy';
                        var przycisk1 = document.createElement('li');
                        var przycisk2 = document.createElement('li');
                        var przycisk3 = document.createElement('li');
                        var przycisk4 = document.createElement('li');
                       
                        przycisk1.innerHTML = 'Satelitarna';
                        przycisk2.innerHTML = 'Hybryda';
                        przycisk3.innerHTML = 'Mapa';
                        przycisk4.innerHTML = 'Teren';
                       
                        przycisk1.title = 'pokaż zdjęcia satelitarne';
                        przycisk2.title = 'pokaż zdjęcia satelitarne z nakładką ulic';
                        przycisk3.title = 'pokaż mapę';
                        przycisk4.title = 'pokaż mapę fizyczną';
                       
                        przycisk1.onclick = function() { mapa.setMapType(G_SATELLITE_MAP); return false; };
                        przycisk2.onclick = function() { mapa.setMapType(G_HYBRID_MAP); return false; };
                        przycisk3.onclick = function() { mapa.setMapType(G_NORMAL_MAP); return false; };
                        przycisk4.onclick = function() { mapa.setMapType(G_PHYSICAL_MAP); return false; };
                       
                        lista.appendChild(przycisk1);
                        lista.appendChild(przycisk2);
                        lista.appendChild(przycisk3);
                        lista.appendChild(przycisk4);
                       
                        this.przycisk1 = przycisk1;
                        this.przycisk2 = przycisk2;
                        this.przycisk3 = przycisk3;
                        this.przycisk4 = przycisk4;
                        this.mapa = mapa;                      
                        mapa.getContainer().appendChild(lista);
                        return lista;
                }
                TypyMapy.prototype.getDefaultPosition = function()
                {
                        return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(5, 5));
                }

               
                var typymapy;
            function mapaStart()  
            {  
               if(GBrowserIsCompatible())       // sprawdzamy, czy przeglądarka jest kompatybilna
                {
                        // tworzymy nowy obiekt mapy, i umieszczamy go w elemencie blokowym o ID "mapka"
                        var mapa = new GMap2(document.getElementById("mapka"));
                        typymapy = new TypyMapy();
                        mapa.addControl(typymapy);
                        GEvent.addListener(mapa,'maptypechanged',function()
                                {
                                        typymapy.odswiez();
                                });
                       
                        // centrujemy mapę w okolicy Szczecina na poziomie zoom = 11
                        mapa.setCenter(new GLatLng(53.41935400090768,14.58160400390625),11);
                       
                        // deklaracja ikonki numer jeden
                        var ikona1 = new GIcon();
                        ikona1.image = "http://maps.google.com/mapfiles/kml/pal2/icon38.png";
                        ikona1.shadow = "http://maps.google.com/mapfiles/kml/pal2/icon38s.png";
                        ikona1.iconSize = new GSize(32, 32);
                        ikona1.infoWindowAnchor = new GPoint(16,16);
                        ikona1.iconAnchor = new GPoint(16,16);
                        ikona1.shadowSize = new GSize(59, 32);
                       
                        // deklaracja ikonki numer dwa
                        var ikona2 = new GIcon(ikona1);
                        ikona2.image = "http://maps.google.com/mapfiles/kml/pal4/icon23.png";
                        ikona2.shadow = "http://maps.google.com/mapfiles/kml/pal4/icon23s.png";
                       
                        // dodamy kilka markerów  
            dodajMarker(53.4203,14.7011,{title: 'Restauracja #1', icon: ikona1});
                        dodajMarker(53.4101,14.6033,{title: 'Myjnia', icon: ikona2});
           
                        // ten marker będzie przesuwalny                      
                        dodajMarker(53.400,14.700,{title: 'Przeciągnij mnie', draggable: true});  
                       
                        // ten marker nie będzie klikalny
                        dodajMarker(53.400,14.600,{title: 'Jestem nieklikalny', clickable: false});  
                       
                        // to będzie zwykły marker z tooltipem
                        dodajMarker(53.400,14.500,{title: 'Jestem zwykłym markerem'});  
                       
                        // ...a to zwykły bez tooltipa
                        dodajMarker(53.400,14.400,{});
                       
                        // przyciski do przesuwania oraz funkcjonalny suwak zoomu
                        mapa.addControl(new GLargeMapControl());
                        //mini mapa w prawym dolnym rogu
                        mapa.addControl(new GOverviewMapControl());
                        //Kontrolka podziałki skali
                        mapa.addControl(new GScaleControl());
                        //Zoom przy podwójnym kliknięciu
                        mapa.enableDoubleClickZoom();
                        //Płynny zoom przy podwójnym kliknięciu
                        mapa.enableContinuousZoom();
                        //Przybliżania / oddalanie za pomocą kółka myszy
                        mapa.enableScrollWheelZoom();
                }
               
       
                // Dodaje zwykły marker
                function dodajMarker(lat,lon,opcje)
                {
                // obiekt mapa jest obiektem globalnym!
                // tworzymy marker z współrzędnymi i opcjami z argumentów funkcji dodajMarker
                var marker = new GMarker(new GLatLng(lat,lon),opcje);
                // dodajemy marker na mapę
                mapa.addOverlay(marker);
                }
                // Dodaje marker z dymkiem
               
                function dodajMarker2(lat,lon,txt)
                {
                        // tworzymy marker
                        var marker = new GMarker(new GLatLng(lat,lon));
                        marker.txt=txt;
                        mapa.addOverlay(marker);
                        GEvent.addListener(marker,"click",function() {
                                marker.openInfoWindowHtml(marker.txt);
                        });
                        return marker;
                }
                //Tutaj tworzymy kilka makrerów z dymkami
                var marker1 = dodajMarker2(53.439068183003684,14.518346786499023,'<div class="dymek"><h4>Nazwa markera</h4><p>Opis, składający się z kilku zdań.<br /> Może zawierać obrazek, co pokazano w tym przykładzie.<br /><a href="http://gmapsapi.com">http://gmapsapi.com</a></p></div>');
                var marker2 = dodajMarker2(53.42235902258507,14.489099979400635,'<div class="dymek"><h4>Nazwa markera</h4><p>Opis, składający się z kilku zdań.<br /> Może zawierać obrazek, co pokazano w tym przykładzie.<br /><a href="http://gmapsapi.com">http://gmapsapi.com</a></p></div>');
                //ustawia ze dymek jest wyświetlony odrazu dla marker1
                marker1.openInfoWindowHtml(marker1.txt);
                 
                 
                                 //pobieramy markery z pliku markery.xml
                                 
        function dodajMarker3(lat,lon,ikona_url,nazwa)
                {
               
                        var ikona = new GIcon();
                        ikona.image = ikona_url;
                        ikona.iconSize = new GSize(30, 23);
                        ikona.iconAnchor = new GPoint(15, 12);
                        ikona.shadow = "";
                        ikona.infoWindowAnchor = new GPoint(15,12);
                       
                        var marker      =       new GMarker(new GLatLng(lat,lon),{title: nazwa, icon: ikona});
                        marker.txt      =       'Wybrane państwo:<br /><strong>'+nazwa+'</strong>';
                        mapa.addOverlay(marker);
                        GEvent.addListener(marker,"click",function()
                        {
                                marker.openInfoWindowHtml(marker.txt);
                        });
                        return marker;
                }

        GDownloadUrl('markery.xml', function(dane,kodOdpowiedzi)
                                {
                                        if(kodOdpowiedzi==200)
                                        {
                                                var xml = GXml.parse(dane);
                                                var markery = xml.documentElement.getElementsByTagName("marker");
                                                for(var i=0; i<markery.length; i++)
                                                {
                                                        var lat                 =       parseFloat(markery[i].getAttribute("lat"));
                                                        var lon                 =       parseFloat(markery[i].getAttribute("lon"));
                                                        var ikona_url   =       markery[i].getAttribute("ikona");
                                                        var nazwa               =       markery[i].getAttribute("nazwa");
                                                        var marker              =       dodajMarker3(lat,lon,ikona_url,nazwa);
                                                }
                                        }
                                        else
                                        {
                                                alert('Nie mogłem otworzyć pliku dane1.xml');
                                        }
                                });
                 
                 
                 
            }  
        -->     
        </script>

       
       
        <div id='mapka' style='width: 500px; height: 300px; border: 1px solid black; background: gray;'>
        <!-- tu będzie mapa można dowolnie ustawiać szerokość i wysokość -->
        </div>
    </body>  
</html>







//PLIK CSS.CSS

/* CSS Document */

<style type="text/css">
               
.dymek
{
        width: 150px;
        font-family: Verdana;
        font-size:11px;
}
.dymek h4
{
        font-weight: bold;
        font-size: 14px;
        border-bottom: 2px solid orange;
        padding-bottom: 1px;
        margin-bottom: 2px;
        color: black;
        margin:0;
        padding:0;
        line-height:normal;
}

.dymek p
{
        text-align: justify;
        font-size: 10px;
        color: #676767;
        font-size:11px;
        font-family:Verdana, Arial, Helvetica, sans-serif;
}
.dymek a
{
        color: green;
        text-decoration: none;
}
.dymek a:hover
{
        color: black;
}
               
                #typymapy
                {
                        margin: 0;
                        padding: 0;
                        font-family: Arial;
                        font-size: 11px;
                        list-style: none;
                }
               
                #typymapy li
                {
                        display: block;
                        width: 60px;
                        text-align: center;
                        padding: 2px;
                        cursor: pointer;
                        float: left;
                        margin-left: 2px;
                        font-family: Arial;
                        font-size: 11px;
                }
               
                #typymapy li.nieaktywny
                {

                        color: black;
                        text-align:center;
                        font-weight: normal;
                        font-weight: bold;
                        background-image:url("noactiv.gif");
                        border:none;
                        background-repeat:no-repeat;
                        height:20px;
                        width:96px;

                }
               
                #typymapy li.aktywny
                {
                        background-image:url("activ.gif");
                        text-align:center;
                        border:none;
                        background-repeat:no-repeat;
                        color: white;
                        font-weight: bold;
                        height:20px;   
                        width:96px;
                }
               
                #typymapy li:hover
                {
                        background-image:url("activ.gif");
                        color:#FFFFFF;
                }
               
                </style>







//PLIK MARKERY.XML

<dane>
        <marker lat="62.098297000000000" lon="17.3847860000" ikona="http://gmapsapi.com/ikony/szwecja.png" nazwa="Szwecja"/>
        <marker lat="61.438767493682825" lon="7.91015625000" ikona="http://gmapsapi.com/ikony/norwegia.png" nazwa="Norwegia"/>
        <marker lat="63.704722429433225" lon="26.9824218750" ikona="http://gmapsapi.com/ikony/finlandia.png" nazwa="Finlandia"/>
        <marker lat="51.919438000000000" lon="19.1451360000" ikona="http://gmapsapi.com/ikony/polska.png" nazwa="Polska"/>
        <marker lat="51.163475000000000" lon="10.4542390000" ikona="http://gmapsapi.com/ikony/niemcy.png" nazwa="Niemcy"/>
        <marker lat="55.012934000000000" lon="-3.4468680000" ikona="http://gmapsapi.com/ikony/uk.png" nazwa="Wielka Brytania"/>
        <marker lat="46.226699000000000" lon="2.20911900000" ikona="http://gmapsapi.com/ikony/francja.png" nazwa="Francja"/>
        <marker lat="39.707186656826540" lon="-6.0644531250" ikona="http://gmapsapi.com/ikony/hiszpania.png" nazwa="Hiszpania"/>
        <marker lat="41.292666000000000" lon="12.5735000000" ikona="http://gmapsapi.com/ikony/wlochy.png" nazwa="Włochy"/>
        <marker lat="48.382802000000000" lon="31.1746100000" ikona="http://gmapsapi.com/ikony/ukraina.png" nazwa="Ukraina"/>
        <marker lat="56.656226493502220" lon="33.6621093750" ikona="http://gmapsapi.com/ikony/rosja.png" nazwa="Rosja"/>
</dane>
 




Dodano przez: igor
Ranga: Administrator serwisu Punktów: 28716
Komentarze użytkowników
    • Tre¶æ komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2024 v.1.5 | design: diviXdesign & rainbowcolors