Cílem je vzít adresy z databáze, v PHP je načíst do pole a zobrazit je všechny současně na mapě tak, aby každá adresa měla špendlík indexovaný jiným písmenem. Byl to docela boj, ale nakonec se to povedlo takovou podivnou kombinací PHP a Java scriptu.
poznámka: Pokud potřebujete zobrazit jen jedinou adresu – jediný špendlík – viz článek Dynamicky vložený iframe s mapou maps.google.com (PHP), kde najdete poměrně jednoduché řešení.
Nejprve je potřeba si vygenerovat Google Maps API key. Jde o bezplatnou registraci na stránce http://code.google.com/intl/cs-CZ/apis/maps/signup.html.
Do těla stránky vložíme vrstvu, ve které bude mapa:
<div id="moje_mapa" style="width: 80%; height: 80%"></div> |
V hlavičce stránky nadefinujeme spojení s mapami maps.google.com (na to je potřeba vygenerovaný API klíč):
<script src="http://maps.google.com/maps?file=api&v=2.x&key=zde_bude_váš_API_klíč" type="text/javascript"> </script> |
Tak to byla ta jednodušší práce 🙂
Dále je potřeba udělat inicializaci mapy (rovnou si nadefinujeme vzhled ikon (špendlíků), ačkoli je v tomto dílu nepoužijeme – ale bude se to hodit do dalšího dílu 😉 )
<script type="text/javascript"> var map = null; var geocoder = new GClientGeocoder(); var zoom = 15; // definice vzhledu ikony (špendlíku) na mapě var baseIcon = new GIcon(G_DEFAULT_ICON); baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png"; baseIcon.shadow = ""; baseIcon.iconSize = new GSize(20, 34); baseIcon.shadowSize = new GSize(37, 34); baseIcon.iconAnchor = new GPoint(9, 34); baseIcon.infoWindowAnchor = new GPoint(9, 2); function initialize() { // zobrazení základní prázdné mapy if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("moje_mapa")); map.setCenter(new GLatLng(50.769396,15.058115), zoom); map.setUIToDefault(); } } </script> |
Funkci initialize spustíme při načtení stránky:
<body onload="initialize();"></body> |
Pokud vše proběhlo správně, zobrazí se při načtení stránky mapa a střed mapy se umístí na GPS souřadnice 50.769396,15.058115 (což je centrum Liberce).
Příští týden vyjde druhý díl, ve kterém zapíchneme špendlík do mapy.
Druhý díl: Google maps API – zobrazení adres z databáze na mapě (2.)