Tutoriel JavaScript & Google Maps : Personnaliser les Markers Google Maps

Dans cette vidéo je vous propose de découvrir ensemble comment créer des markers personnalisés pour Google Maps. Si vous avez déjà un petit peu exploré l'API, vous le savez, il n'est pas possible de personnaliser complètement les markers par défaut (la seule chose qu'il est possible de modifier ce sont les icônes qui sont utilisées).

Il existe cependant une manière détournée pour créer des markers complètement personnalisés. Méthode avec laquelle il sera possible d'injecter le code HTML que l'on souhaite à l'intérieur. Il faudra passer par l'utilisation des superpositions personnalisées. Le principe du système de superposition est de créer un élément qui va se placer au-dessus de la carte, il sera ensuite possible de modifier son contenu mais aussi son positionnement afin de le faire coller aux déplacements de la carte.

Pour obtenir cet élément il suffit de créer un nouvel objet qui va utiliser le prototype de google.maps.OverlayView. On devra alors implémenter trois méthodes importantes pour faire fonctionner notre système.

• La méthode onAdd() qui est appelée lorsque la carte est prête afin de créer l'élément à placer en superposition
• La méthode draw() permet de gérer l'affichage visuel de l'objet, c'est dans cette méthode que l'on repositionnera l'objet en fonction de la latitude et de la longitude.
• La méthode onRemove permet de nettoyer tous les éléments qui ont été ajoutés à la superposition.

Il est possible d'utiliser la nouvelle syntaxe ES2015 pour simplifier l'écriture de ses différentes méthodes :

class TextMarker extends google.maps.OverlayView {

    constructor (pos, map, text) {
        super()
        this.div = null
        this.pos = pos
        this.text = text
        this.setMap(map)
    }

    onAdd () {
        this.div = document.createElement('div')
        this.div.classList.add('marker')
        this.div.style.position = 'absolute'
        this.div.innerHTML = this.text
        this.getPanes().overlayImage.appendChild(this.div)
    }

    draw () {
        let position = this.getProjection().fromLatLngToDivPixel(this.pos)
        this.div.style.left = position.x + "px"
        this.div.style.top = position.y + "px"
    }

    onRemove () {
        this.div.parentNode.removeChild(this.div)
    }

}

Vous pouvez modifier le constructeur suivant vos besoins, ici mon objet prendra en constructions trois paramètres

• La position de notre marqueur (google.maps.LatLng)
• La carte sur laquelle on souhaite ajouter notre marqueur (google.maps.Map)
• Le texte à afficher à l'intérieur de notre marqueur

Ensuite, on peut utiliser notre marqueur très simplement :

let marker = new TextMarker(center, gmap, "Salut les gens")

Voilà pour le principe de base !
Ensuite libre à vous de modifier la classe que l'on vient de créer afin de rajouter les comportements que vous souhaitez (pour par exemple gérer le "clic" sur le marker).