Le blog de la CT2C

Afficher une carte google map sur rails 4

Par Arpsara , publié le 20 Avril 2016

Situer un lieu à l'aide d'une carte est une pratique très courante sur les sites webs. Pour cela, nous allons utiliser en rails 4 trois gems: geocoder, gmaips4rails et gon.


Installation

Tout d'abord, commençons par installer les gems qui nous intéressent:
gem "geocoder"
gem "gmaps4rails"
gem "gon"

geocoder va nous permettre de geocoder l'adresse souhaitée.
gmaps4rails va nous permettre d'afficher et manipuler une carte Google map.
Et enfin, gon va nous faciliter la tâche pour passer nos variables ruby à notre javascript.
N'oubliez pas bien sûr de lancer
bundle install

Etape 1: geocoder notre adresse

C'est assez logique: avant de pouvoir situer le lieu sur une carte, il nous faut ses coordonnées géographiques, Vous devez donc avoir la latitude et la longitude de l'endroit que vous souhaitez placer sur la carte. Geocoder permet de faire ceci très facilement, en insérant les instructions suivantes dans votre model qui gère les adresses:

class Address < Activerecord::Base
before_save :geocode
geocoded_by :address_for_geocoding, :latitude => :lat, :longitude => :lng

def address_for_geocoding
# récupérez ici votre adresse concaténée
end
end

Ici, nous enregistrons la latitude dans l'attribut :lat, et la longitude :lng.

Etape 2: Afficher la google Map

Commençons par suivre la documentation pour voir la carte de google s'afficher.

Dans application.js
//= require underscore
//= require gmaps/google

Dans layout/application.html.slim
head
/ On en profite aussi pour inclure les données de gon
= include_gon(:init => true)
/ Google Map API Scripts
<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script>
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>

Dans localized_us.html.slim (votre vue dans laquelle doit être la carte)
<div style='width: 800px;'>
<div id="map" style='width: 800px; height: 400px;'></div>
</div>

Dans un fichier google_maps.js.coffee, ajoutez le code suivant pour afficher votre carte:
$ ->
# Google Map
handler = Gmaps.build('Google')
handler.buildMap({
provider: {},
internal: {id: 'map'}
}, () ->
markers = handler.addMarkers([
{
"lat": 0,
"lng": 0,
"infowindow": "hello!"
}
])
)
handler.fitMapToBounds()

Pour le moment, le marqueur "vous êtes ici" n'est pas à un endroit très intéressant, mais votre carte devrait s'afficher. :)

Etape 3: Passer les coordonnées depuis le controller au javascript

C'est là qu'intervient gon. Google map a besoin d'un tableau des coordonnées de chaque marqueur. Chaque marqueur peut avoir différentes informations, notamment la latitude et la longitude, mais aussi le nom de l'adresse par exemple, qui seront enregistrées sous forme de hash.
On a donc besoin des infos sous la forme suivante:
markers = [
{ latitude: address_1.lat, longitude: address_1.lng },
{ latitude: address_2.lat, address_2.lng},
etc.
]

Depuis le controller de la vue, c'est donc ce qu'on va faire:

      
def localize_us
# On récupère les adresses
@addresses= Address.all
markers = [] # On met les coordonnées de chaque adresse dans markers
@addresses.each do |address|
markers.push({
lat: address.lat,
lng: address.lng
})
end
# Et on dit à gon de nous envoyer ça dans notre javascript
gon.markers = markers
end

Etape 4: Afficher les marqueurs

Tout d'abord, assurez-vous que nous avez ajouté gon à votre layout application dans la partie head:
     = include_gon(:init => true)

Editez ensuite votre code javascript:
$ ->
# Google Map
if gon && gon.markers
handler = Gmaps.build('Google')
handler.buildMap({
provider: {},
internal: {id: 'map'}
}, () ->
## On récupère et on affiche les marqueurs
showMarkers(handler)
)
handler.fitMapToBounds()

Et créez la fonction suivante pour récupérez vos marqueurs.
@markers = []
## showMarkers() permet de récupérer les coordonnées depuis gon.markers et de les assigner à un marqueur "Vous êtes ici"
## On centre la carte sur le premier marqueur
showMarkers = (handler) ->
for marker in gon.markers
@markers.push(handler.addMarker(marker))

if @markers.length > 0
## Show markers on the map
handler.map.centerOn _.first(@markers)

return @markers

Et le tour est joué! Vous devriez avoir un marqueur pour vois situer!

Pour aller plus loin avec la Google Map API, jetez un oeil sur les examples de Gmaps4 rails.


Index -- --

Ct2c slider fleche top
  • Aucun commentaire - Soyez le premier !

Insérez votre commentaire
  1. Min: 50 caractères, Max: 800. Actuellement: 0 caractères

  2. ne pas remplir