Loading:

BLACK WEEK IT! [Zgarnij książkę GRATIS lub kupuj solo z rabatem do -50%]

Ostatnio dodane

php Upload dodaw PHP Tworzenia mi Logowanie obiekt Prosty system sz Lista plików z Jak zbudować pr Jak zamienić w IP uzytkownika Obiekt Timer [AS Proste skrypty w

Top 10

1.ftp_put 2.yp_errno 3.Array() 4.strripos() 5.ip2long 6.mt_srand 7.substr() 8.getenv() 9.sqrt 10.Nowa broń

56853.05

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

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>

<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAALlcB2mNKHO3S7jhbuQncYhRO1J72BGfqxiUXRWzAvEIWI9ws6hQCOE0J_2PMfScHKbedstjt8J94Hw' type='text/javascript'></script>


<link href="css.css" rel="stylesheet" type="text/css" />
</head>


<body onload='mapaStart()' onunload='GUnload()'>
<script type='text/javascript'>
function TypyMapy() {}
TypyMapy.prototype = new GControl();

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;'>

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