Afficher une carte google map sur rails 4

Catégories:

Ruby On Rails

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 -- Article précédent: Déployer application Ruby On Rails de A à Z - Partie 2 -- Article suivant: Tester son application rails

Le blog de la CT2C

Article précédent : Déployer application Ruby On Rails de A à Z - Partie 2

Article suivant : Tester son application rails