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 ("-").

| Option | Type | Default | Description | |:---------------------------------|:--------------------|:-------------------:|:------------| | selector | dom (ID) | false | - | | adresses | string, array, json | false | Adresse plain text, tableau d'adresse plain text au format json ou un json afin de personnaliser les tooltips (icon, description HTML, etc.). Ce dernier accepte permet de renseigner entre autres les coordonnées GPS (lat, lng) évitant le géocoding récursif (récommandé). | | ajax | string (path) | false | Recupère en Ajax un array Json à l'adresse renseignée. | | lat | float int | 49.4431 | Nécessite que lng soit renseigner. Permet de centrer la carte sur des coordonnées. Cependant, si un ou plusieurs markers sont présents sur la map, MapHero recadre sur ces derniers. | | lng | float int | 1.0993 | Idem que pour l'option lat. | | zoom | int | 9 | Zoom appliquer lors du chargement de la carte. | | minZoom | int | 7 | Zoom minimum applicable par l'utilisateur. | | maxZoom | int | 16 | Zoom maximum applicable par l'utilisateur. | | relief | bool | false | Afficher le relief sur la carte. | | Type | string | false | Définir le type de carte (ex : 'roadmap', 'satellite' ou 'hybrid') | | restrictionsCountry | string | false | 2-digit code ccTLD. Exemple : 'FR','US', etc. | | animateMarker | bool | false | Active l'animation des markers. | | backgroundColor | int (hex) | false | Redéfinir la couleur de fond en dessous des Tiles | | cluster | bool | false | - | | streetViewControl | bool | false | Active l'affichage du Pegman permettant de faire du streetview sur la carte. | | icon | string (path) | 'images/marker.png' | Personnalisation de l'icon du marker utilisé par default. | | radius | int (m) | false | Ajout d'un radius autour d'un marker | | zone | string | false | Ajout des d'une zone administrative. Exemple "Rouen" | | zoneStrokeColor | string | "#FF0000" | Couleur du contour de la zone ou du radius | | zoneStrokeWidth | int (px) | 1 | Épaisseur du contour de la zone ou du radius | | zoneFillColor | string (hex) | "#FF0000" | Couleur de la zone ou du radius |

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 :

| key | Type | Description | |:--------------------|:--------------------|:----------------------| | title | Plain text | | | infoWindow | HTML | | | url | path | | | icon | path | | | position | object{lat,lng} | |

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