maphero v1.1.2-beta.14b

MapHero

MapHero est un plugin javascript pour interagir avec Google Map API : afficher une ou plusieurs cartes avec un ou de multiple marqueurs. Le plugin se configure via des attribut data.

Consulter le Changelog.

Installation

npm : npm install --save maphero

Ou télécharger la dernière release.

<!-- Exemple to a simple map with only one marker -->
<script type="text/javascript" src="js/maphero.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=[YOURKEY]&callback=mapHero" async defer></script>

Utilisation

La fonction mapHero() doit être appelée dans le calback de Google Map API (voir ci-dessus). Elle va alors s'instancier sur les itérations de la class .maphero présentes dans le DOM. Pour chaque itération vous pouvez renseigner des data afin de configurer votre Google Map.

<!-- Exemple to a simple map with only one marker -->
<div class="maphero" 
	data-zoom-min="9" 
	data-zoom-max="14" 
	data-adresses="221b Baker St, Marylebone, London NW1 6XE, Royaume-Uni"></div>

Markup

Chaque instance est personnalisable via des attributs data. Notez que ces attributs sont notés en camel-case. If faut cependant les renseigner en data avec le délimiteur hyphen ("-").

ADRESSES

Lat-Lng Coords

Plain text

Ce paramètre accepte plusieurs typologies de valeurs possibles. Le plus simple étant l'adresse en plain text :

<div class="maphero" data-adresses="221b Baker St, Marylebone, London NW1 6XE, Royaume-Uni"></div>

Array

Vous pouvez aussi renseigner plusieurs adresses dans un tableau. Cette solution convient à un petit nombre d'adresses. Chaque adresse devant être retranscrite en coordonnées GPS, un géocoding est nécéssaire pour chacune d'elle. MapHero le fait automatiquement, cependant cela représente une requête par adresse, impactant sur le temps de rendu de la carte.

<div class="maphero" data-adresses="[
	'19 Route de Turretot, 76280 Criquetot-l'Esneval',
	'6 rue de la Commune 1871 - 76290 Montivilliers'
]"></div>

JSON

Enfin, la dernière méthode et la plus efficace : un object au format Json. Ce tableau vous permet de personnaliser vos markers et leurs tooltips. Ainsi vous pouvez éditer les icons, infoWindow ou tout autre paramètre de marker mis à disposition par l'API Google map.

<div class="maphero" data-adresses="[
	{
		'title': 'Titre du marker 1',
		'infoWindow': '<h1>Nom du marker</h1><p>description</p>',
 		'url': '//www.google.com',
 		'icon': 'images/markers/marker-1.png',
		'position': {
			'lat': 49.614905,
			'lng': 1.552235
 		}
	},{
		'title': 'Titre du marker 1',
		'infoWindow': '<h1>Nom du marker</h1><p>description</p>',
		'url': '//www.google.com',
		'icon': 'images/markers/marker-2.png',
		'position': {
			'lat': 49.614905,
			'lng': 1.552235
		}
	}
]"></div>

Comme l'exemple ci-dessus le montre, on peut définir de nombreux paramètres pour chaque marker :

Attention : Il est nécessaire d'échapper les différentes valeurs dans votre code HTML.

OVERLAYS

Map Type

Images

Background Color

Tiles

DIVERS

Refresh

Styling

Géocoding restriction

Cluster

Callback