GMAP alapok

A Google Maps (GMAPS)

„A Google Maps a Google által fejlesztett ingyenes internetes térképszolgáltatás.
Az elérhető térképek és műholdfelvételek az egész Földet lefedik.
A többi Googleinternetes alkalmazáshoz hasonlóan nagy mennyiségű JavaScriptre épül.
A térképmozgatása során a kis térképrészletek folyamatosan töltődnek le a szerverről,
illetve jelennek meg a böngészőablakban. A Google Maps-ben szabadon mozgatható és nagyítható térképeket találunk. A megjelenített részletek a nagyítástól függően folyamatosan változnak.
A Google Maps nyílt API-jának következtében kiválóanalkalmas arra,
hogy bárki bármilyen adatbázist illesszen fölé.” (Wikipédia, 2012).

Az API használat bemutatására Google Maps egyik szolgáltatása (többek között) a Geo-kódolót használjuk, ezzel valós címekhez rendelhetünk földrajzi koordinátákat. Ez főleg a cim/pozició kereső miatt fontos.

A használatba vételhez az inicializálási függvény után ezt is definiálni kell.
A függvény bemeneti paraméteremaga a cím és a geokódoló státusza,
amely a működési hibák feltárásában segíthet.

API függvény meghívása az eredménytömb több értékkel tér vissza, ebből az elsőt választjuk ki és dolgozzuk fel.

A tömb egyes elemei tartalmazzák az objektum típusát, a formázott címetés a geometriát.
A geometriából több adatot is ki lehet nyerni, számunkra általában a legfontosabba földrajzi koordináták megszerzése.

A geokódoló és más gmap API függvény hiába van definiálva,
hozzá kell adani (HTML DIV-re hívatkozó alap) térképhez, különben nem működik.

Természetesen a térképet egy div-ben kell beágyazni a HTML dokumentumba, különben nem látszik/nem jelenik meg a WEB lapunkon.

Minta gmaps saját poziciónk lekérése:

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<meta name="mierdekel.hu térkép map" content="initial-scale=1.0, user-scalable=no" />
<title>Mi érdekel? Hól vagy?</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
var map,marker,circle;
var t1,t2;
//---- init kezdet
function initialize() {
var latlng = new google.maps.LatLng(47.401, 17.201);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//--
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//--
marker = new google.maps.Marker({map:map});
precisionCircle = new google.maps.Circle({map:map, fillOpacity: 0.3, fillColor: 'green', 
strokeOpacity: 0});
t1=new Date().getTime();
//--
 if (navigator.geolocation) {
 navigator.geolocation.watchPosition(ujPozicio, geolocHiba, { enableHighAccuracy: 
 true, maximumAge: 0 } );
 } else alert('Sajnos a WEB böngésző nem támogatja a geolocation JS api-t');
//--
}
//---- init vég
function ujPozicio(pos) 
{
t2=new Date().getTime();
var newLoc = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
marker.setPosition(newLoc);
map.setCenter(newLoc);
with (precisionCircle) {
 setCenter(newLoc);
 setRadius(pos.coords.accuracy);
}
with (Math)
var optZoom=floor(24-log(pos.coords.accuracy)/log(2));
if (optZoom>17)
optZoom=17;
if (map.getZoom()>optZoom)
map.setZoom(optZoom);
document.getElementById("info").innerHTML+=pos.coords.latitude+','+pos.coords.longitude+
', +/-'+pos.coords.accuracy+'m - zoom:'+optZoom+'; elapsed time:'+(t2-t1)+'ms <br>';
}
var GEOLOC_HIBAK=["Ismeretlen hiba","Hozzáférés megtagadva","Pozíció ismeretlen","Időtúllépés"];
function geolocHiba(err)
{
alert('Hiba történt a földrajzi hely lekérdezése során.\n Kód: '+err.code+' ('+GEOLOC_HIBAK[err.code]+')');
}
</script>
</head>
<body style="width:100%; height: 100%;" onload="initialize();">
<img border="0" alt="Mi érdekel?" src="http://mierdekel.hu/mie.png"><b> Mi érdekel? Térkép használat</b>
<div id="info" style="width:100%; height: 10%"; background-color: yellow;><i>Pozíció lekérdezés eredménye:</i></div>
<div id="map_canvas" style="width:100%; height: 500px; " ></div>
</body>
</html>

https://maps.googleapis.com/maps/api/geocode/json?address=budapest,kézdivásárhely utca 9

https://developers.google.com/maps/documentation/javascript/examples

Google MAPS API V3 használata

Sokszor szükséges lehet a térkép beépítése a weboldalba.

Térkép alatt érthetünk egy egyszerű térképet, térképre diagrammot megjelenítő felületet
és a több jelölőpontos útvonaltervezőig is.
Jelenleg a legtöbb helyen a google maps térképet használják.

Google maps térkép típusok:

ROADMAP : Utca térkép.
SATELLITE: Műhold térkép.
HYBRID : Az előző két típus kombinációja.
TERRAIN : Domborzati térkép.

Néhány gyakori felhasználási lehetőség:

Több jelölőpontot kell megjeleníteni egy térképen
A jelölőpont ikonokat le kell cserélni egyedien megrajzolt ikonokra (Pl.: logóg)
Dinamikusan kellene elhelyezni jelölőpontokat a térképen,… amit adatbázisban található adatok vezérelnek.
A jelölőpontokhoz egyedi képeket, hangokat, linkeket és információs buborékokat szeretnénk megjeleníteni.

Ezek már nem valósíthatóak meg az Iframe-es beszúrással.

Megvalósítási módszerek:

egyszerűen a weboldalainkba egy egyszerű iframes beágyazással.
google map api v3

Ifarmes megvalósítás elvei:

Az internet WEB html nyelve lehetőséget ad, más rész tartalmak beagyazó/beágyazott keretben történő megadására
együttes megjelenítésére.
<iframe> tag
Tehát az IFRAME elem (<iframe> </iframe> tagokkal határolt rész) egy beágyazott keretben jelenít meg
egy másik oldalt, ….

A beágyazott tartalmat módosítani lehet, a változás a beágyazó oldalon minden változtatás nélkül (automatikusan) megjelenik.

Minta: Link
<iframe src=”http://www.tferi.hu/”></iframe>
<iframe
style=” border-width:0 ” width=”300″ height=”200″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″
src=”https://mapsengine.google.com/map/embed?mid=zZYDUe-cJmq8.ktxqyzValcpI” >
</iframe>

A Google MAPS API V3 felhasználásával készítettem:

1 . Útvonaltervezőt (kocsi, gyalogos, biciklis).

2. Keresett helyek megjelenítőt

3. Időjárás térkép

Kipróbálható : Link Bemutató film

Animáció minta : Link

Több TAB füles infó ablak : Link

Útvonalterv végigjárása : Link Video: Link

KML file megnyítása: Link

4. Metro felületes megjelenítés kipróbálható : Link

Google térképek : Compass Maps Marker

Néhány hasznos link:

http://bikeroutetoaster.com/

http://share.mapbbcode.org/

http://www.gmap-pedometer.com/

http://www.bikemap.net/hu

http://www.daftlogic.com/projects-google-maps-area-calculator-tool.htm

Néhány hasznos minta:

Cím=> Pozició:

--XML
http://maps.googleapis.com/maps/api/geocode/xml?address=3300+Eger+Liget+utca+3&sensor=false

-- JSON
http://maps.googleapis.com/maps/api/geocode/json?address=Budapest+Kézdivásárhely+utca&sensor=false

Pozició=> Cím

--JSON
http://maps.googleapis.com/maps/api/geocode/json?latlng=47.4271954,19.2090547&sensor=false&language=hu

--XML
http://maps.googleapis.com/maps/api/geocode/xml?latlng=47.4271954,19.2090547&sensor=false&language=hu

Adott távolságon (10Km)belüli pontok:

--- SQL:
SELECT * , 
 ( 6371 * acos( cos( radians( start.lat ) ) * 
 cos( radians( lat ) ) * 
 cos( radians( lng ) - radians( start.lng ) ) 
 + 
 sin( radians( start.lat ) ) * 
 sin( radians( lat ) ) 
 ) 
 ) AS dist
FROM mie_pontok dest
HAVING dist <100
ORDER BY dist 
WHERE dest.lng between lng1 and lng2 and dest.lat between lat1 and lat2

---- Mysql tárolt eljárás
DELIMITER $$
CREATE PROCEDURE MieTavolsag (IN mylng double, IN mylat DOUBLE, IN dist int)
BEGIN
 
 declare lng1 float; 
 declare lng2 float;
 declare lat1 float; 
 declare lat2 float;
 
 -- Kiszámoljuk a határoló négyzet koordinátáit:
 set lng1 = mylng-dist/abs(cos(radians(mylat)) * 111.04);
 set lng2 = mylng+dist/abs(cos(radians(mylat)) * 111.04);
 set lat1 = mylng-(dist/111.04); 
 set lat2 = mylng+(dist/111.04);
 SELECT * , 
 ( 6371 * acos( cos( radians( mylat ) ) * 
 cos( radians( lat ) ) * 
 cos( radians( lng ) - radians( mylng ) ) 
 + 
 sin( radians( mylat ) ) * 
 sin( radians( lat ) ) 
 ) 
 ) AS distance
 FROM mie_pontok dest 
 WHERE dest.lng between lng1 and lng2 and dest.lat between lat1 and lat2
 HAVING distance < dist
 ORDER BY distance;
END $$
DELIMITER ;
--- Használata:
CALL MieTavolsag(42.121212, 12.12121212, 50);

//--- zavaró dupla klikk térkép nagyítás kikapcsolása:

var mapOptions = { 
scrollwheel: false,
 disableDoubleClickZoom: true,
 panControl: false, 
 streetViewControl: false,  
center: defaultMapCenter
 };

Egér események: click, dblclick, mousemove, mouseout, mouseover, rightclick

// esemény figyelő hozzáadása map1 objektumhoz
 var eventObj = google.maps.event.addListener(map1,
 'center_changed',function() {
 map2.setCenter(map1.getCenter());
 });

/*
addDomListener()
addListenerOnce()
*/

// Összes esemény figyelő eltávolítása map1 objektumról
 google.maps.event.clearInstanceListeners(map1);

// Egy (középpont változás) esemény figyelő eltávolítása map1 objektumról
 google.maps.event.clearListeners(map1, 'center_changed');

// esemény kezelők összekötése
map2.bindTo('center', map1, 'center');
map2.bindTo('zoom', map1, 'zoom');

//— egy klikk helyett hosszú klikk használata az új térkép objektum felvételére

// deffiniciós rész
function LongPress(map, length) {
this.length_ = length;
var me = this;
me.map_ = map;
me.timeoutId_ = null;
google.maps.event.addListener(map, ‘mousedown’, function(e) {
me.onMouseDown_(e);
});
google.maps.event.addListener(map, ‘mouseup’, function(e) {
me.onMouseUp_(e);
});
google.maps.event.addListener(map, ‘drag’, function(e) {
me.onMapDrag_(e);
});
};
LongPress.prototype.onMouseUp_ = function(e) {
clearTimeout(this.timeoutId_);
};
LongPress.prototype.onMouseDown_ = function(e) {
clearTimeout(this.timeoutId_);
var map = this.map_;
var event = e;
this.timeoutId_ = setTimeout(function() {
google.maps.event.trigger(map, ‘longpress’, event);
}, this.length_);
};
LongPress.prototype.onMapDrag_ = function(e) {
clearTimeout(this.timeoutId_);
};
// meghívás, használat (az inicializálló résznél)
function init_mie() {
var myLatlng = new google.maps.LatLng(47.397, 19.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById(“mie_map”), myOptions);
new LongPress(map, 500);
google.maps.event.addListener(map, ‘longpress’, function(e) {
new google.maps.Marker({
position: e.latLng,
map: map
})
});
}

Térképes direct/közvetlen megjelenítő linkekek:

Google Maps:
http://maps.google.com/?q=47.3932900,18.9372420

http://maps.google.com/maps?z=12&t=m&q=loc:47.29419,19.3020

z : Nagyítás => zoom level (1-20)
t : Térkép tipus (“m” map, “k” satellite, “h” hybrid, “p” terrain, “e” GoogleEarth)
q : Keresés (search query), elotet jelölője loc: ezt követi a lat lon adat

BING Maps / Microsoft Live Local:
http://www.bing.com/maps/?lvl=14&cp=47.3932900~18.9372420

Yahoo Maps:
http://maps.yahoo.com/#q1=Érd, 7 73, 2030 Magyarország&mag=6&lon=18.9372420&lat=47.3932900

OpenStreetMap.org:
http://www.openstreetmap.org/?lat=47.3932900&lon=18.9372420&zoom=13

Geo-Metatag-ek

A következõ geo-tag-eket / metatag-eket a honlaphoz adásával (a htm HEAD részébe)
a keresõk fel fogják ismerni a geo cimke alapján is a lapodat.
Ez jobb helyezéseket fog adni a helyhez kötött kereséseknél.

Miután hozzáadtad a metatag-eket, nyugodtan ellenõrizd az eredményt:
Írd be keresõmezõbe a web címedet.
<meta name=”geo.placename” content=”Érd, 7 73, 2030 Magyarország” />
<meta name=”geo.position” content=”47.3932900;18.9372420″ />
<meta name=”geo.region” content=”HU-Pest” />
<meta name=”ICBM” content=”47.3932900, 18.9372420″ />

Geo-Tag-ek

Ha szeretnéd címkézni a blogodat vagy weboldaladat, használd nyugodtan a
következõ geotag-eket, ami a geo-címkézés de-facto szabványa.

geotagged
geo:lat=47.3932900
geo:lon=18.9372420

MKL file megnyítása és megjelenítése : Link

Jelölők (markerek) elérési lista oldalt Link

//— KML file tartalmának megjelenítése

// Váldozó declarációk
var myMap; // Térkép terület objektuma
var myField; // KML objektum
var centerpoint; // Térkép középpont (refferencia)

// Inicializállás
function initialize() {
// Térkép réteg kezdő pontjának meghatározása
centerpoint = new google.maps.LatLng(45.00495,-90.00052);

// térkép alap paramétereinek beállítása
var mapOptions = {
zoom: 16,
center: centerpoint,
mapTypeId: google.maps.MapTypeId.SATELLITE
};

// Példányositás és <div> cél területre hívatkozás beállítás
myMap = new google.maps.Map(
document.getElementById(‘map-canvas’),
mapOptions
);

// KML megjelenítés funkció meghívása
showKML();
}

// Funkció deffiniciója
function showKML()
{
myField = new Array();
myField[0] = new google.maps.KmlLayer({
url: ‘http://mierdekel.hu/map/orzo.kml’
});
myField[0].setMap(myMap);
}

$(document).ready(function() {
initialize();
});

//— JS script kódoló és tömörítő linkek:

http://dean.edwards.name/packer/
http://dean.edwards.name/unpacker/
//————————————–
http://matthewfl.com/Packer.html
http://matthewfl.com/unPacker.html
//—————————————
http://yui.github.io/yuicompressor/
=> yuicompressor.jar

//— Hasznos oktató és minta anyagok:

http://www.geocodezip.com
http://econym.org.uk/gmap
http://www.geocodezip.com/blitz-gmap-editor
http://gmaps-samples-v3.googlecode.com/svn/trunk/

Cél témák lehetnek:

Tematikus írányított gyalog-, kerékpár-, csónaktúrák …
Turista utak, tanösvények, sétautak, erdei iskolák …
Látogatóközpont, természetház, természetvédelem, …
Település bemutatás, pozicionálás, idő tér historik, területi megoszlások, …
Munkák, tevékenységek, mozgások követése, előálló adatok tárolása, elemzése, …

Zárszóként más apis működés:

Megjelenítés
http://nominatim.openstreetmap.org/search.php?q=budapest+k%C3%A9zdiv%C3%A1s%C3%A1rhely+utca+9

Listázás
http://nominatim.openstreetmap.org/search.php?q=budapest+k%C3%A9zdiv%C3%A1s%C3%A1rhely+utca+9&format=json

=>
[{“place_id”:”66267518″,”licence”:”Data \u00a9 OpenStreetMap contributors, ODbL 1.0. http:\/\/www.openstreetmap.org\/copyright”,”osm_type”:”way”,”osm_id”:”42694823″,”boundingbox”:[“47.4262338″,”47.4280965″,”19.2067435″,”19.2112986″],”lat”:”47.4271446″,”lon”:”19.2090715″,”display_name”:”K\u00e9zdiv\u00e1s\u00e1rhely utca, Kir\u00e1lyh\u00e1g\u00f3 lak\u00f3park, Szent Imre kertv\u00e1ros, 18. ker\u00fclet, Budapest, Budapesti kist\u00e9rs\u00e9g, Budapest, Central Hungary, K\u00f6z\u00e9p-Magyarorsz\u00e1g, 1182, Magyarorsz\u00e1g”,”class”:”highway”,”type”:”residential”,”importance”:0.4}]

IT, BI, DWH, DM, AI

Keresés ebben a blogban

GMAP alapok

A Google Maps (GMAPS)

Minta gmaps saját poziciónk lekérése:

Google MAPS API V3 használata

Google maps térkép típusok:

Néhány gyakori felhasználási lehetőség:

Ifarmes megvalósítás elvei:

A Google MAPS API V3 felhasználásával készítettem:

1 . Útvonaltervezőt (kocsi, gyalogos, biciklis).

Néhány hasznos minta:

//— egy klikk helyett hosszú klikk használata az új térkép objektum felvételére

Térképes direct/közvetlen megjelenítő linkekek:

Geo-Tag-ek

Jelölők (markerek) elérési lista oldalt Link

//— KML file tartalmának megjelenítése

//— JS script kódoló és tömörítő linkek:

//— Hasznos oktató és minta anyagok:

Cél témák lehetnek:

Zárszóként más apis működés:

Megjegyzések

Megjegyzés küldése

IT, BI, DWH, DM, AI

GMAP alapok

A Google Maps (GMAPS)

Minta gmaps saját poziciónk lekérése:

Google MAPS API V3 használata

Google maps térkép típusok:

Néhány gyakori felhasználási lehetőség:

Ifarmes megvalósítás elvei:

Minta: Link<iframe src=”http://www.tferi.hu/”></iframe><iframe style=” border-width:0 ” width=”300″ height=”200″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”https://mapsengine.google.com/map/embed?mid=zZYDUe-cJmq8.ktxqyzValcpI” ></iframe>

A Google MAPS API V3 felhasználásával készítettem:

1 . Útvonaltervezőt (kocsi, gyalogos, biciklis).

Néhány hasznos minta:

//— egy klikk helyett hosszú klikk használata az új térkép objektum felvételére

Térképes direct/közvetlen megjelenítő linkekek:

Geo-Tag-ek

Jelölők (markerek) elérési lista oldalt Link

//— KML file tartalmának megjelenítése

//— JS script kódoló és tömörítő linkek:

//— Hasznos oktató és minta anyagok:

Cél témák lehetnek:

Zárszóként más apis működés:

Megjegyzések

Megjegyzés küldése