Google maps API – zobrazení adres z databáze na mapě (1.)

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&amp;v=2.x&amp;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.)

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

*