GoogleMap – integrace Google map do Nette

GoogleMap – verze v0.1.1 (repo | docs)

• přechod na data vrstvu s GeoJSON daty (viz dokumentace na Githubu)
• využívá vlastní jednoduchou třídu GeoJSON, která bude postupně rozšiřována
• používá data atributy pro konfiguraci elementu mapy, protože inline javascript je ee.
• infowindows k jednotlivým značkám na mapě, zobrazuje automaticky, pokud má značka vlastnost content, pokud má vlastnost href, doplní nakonec infowindow odkaz :-)

Požadavky

• Nette >= v2.2.0 (na nižších netestuji anžto je nepoužívám)
• JQuery >= v1.8.0 (dtto)
• george-oakling/geojson = v0.1.0

Instalace aktuální verze, zprovoznění a základní nastavení

Nejlépe přes composer, tedy

composer require george-oakling/googlemap:v0.1.1

Použití v presenteru:

<?php

use GoogleMap;

class MapPresenter
{
	public function createComponentGoogleMap()
	{
		$gmap = new GoogleMap\GoogleMapComponent();
		$gmap->initialCenterLatitude = 50.083;
		$gmap->initialCenterLongitude = 14.423;
		$gmap->initialZoom = 12;
		$gmap->key = 'AIzA';
		return $gmap;
	}
}
?>

Od verze v0.1.1 používá komponenta GeoJSON (standard, více popsaný zde: http://geojson.org/) pro zobrazování značek (markers) na mapě. Úplně nejlepší, jak zjistit, jak to funguje je podívat se na zdrojový kód SampleFeatureCollectionProvider.php, která je ve zdrojácích komponenty, případně přečíst dokumentaci (taktéž součástí zdrojáků). Takový FeatureCollection provider pak navěsíme na komponentu úplně jednodušše v presenteru takto:

<?php

$fcProvider = new GoogleMap\SampleFeatureCollectionProvider();
$gmap->setFeatureCollectionProvider($fcProvider);

?>

V šabloně pak komponentu zapisujeme takto (pokud máme JQuery nalinkované v hlavičce nebo před mapou)

{control googleMap}

Pokud používáme něco jako block scripts, tak na místo, kde chceme mapu, dosadíme:

{control googleMap:HTML}

A block scripts renderujeme:

{block scripts}
	{include parent}
	{control googleMap:JS}
{/block}

Nicméně, chytří používají webloader od Honzy Marka, a tomu stačí předhodit soubor google.map.js z adresáře komponenty hned za inkludované JQuery a renderovat v šabloně jenom googleMap:HTML.

Editoval potapnik (16. 6. 2014 10:24)