L'API Google Maps est sans doute l'une des API les plus populaires disponibles sur le web aujourd'hui. Il offre webmasters la possibilité d'ajouter des fonctionnalités de cartographie, semblable à maps.google.com, à leurs sites Web. Toutes les fonctionnalités de Google Maps, y compris les marqueurs, les orientations, options de zoom et vue satellite ne sont que quelques lignes de code de suite. Mais avant de commencer à utiliser la portion de code, vous aurez besoin d'une clé API Google Maps. Obtenir une clé API Google Maps prend une minute et ne coûte rien. Connectez-vous à votre compte Google (je suis sûr que vous en avez un) et la tête aux http://code.google.com/apis/maps. Sur le côté droit vous verrez un lien
"Sign up for a Google Maps API key", où vous pourrez tout simplement cliquer sur l'étape 1 «Inscrivez-vous pour un" Google Maps API clés.
Ensuite, entrez le nom domaine de votre site (ça peut être localhost aussi :) ), acceptez les termes et cliquez sur le bouton"Générer API Key" .
Sur la page suivante votre clé API unique apparaîtra. Assurez-vous que vous la copiez et collez la dans un endroit sûr (lol). Tout juste en bas de votre clé il y aura des exemples en JavaScript pour vous aider à démarrer rapidement.
Dans ce tutoriel, nous allons générer un code similaire à l'utilisation de certains plugins Ruby que l'on va utiliser avec Rails. Le plus populaire plug-in est le "Cartes Jaunes" pour Ruby, également connu sous le nom YM4R. Comme il existe d'autres API de cartographie écrites en Ruby.
1. Créons notre application rails :
rails map_example -d mysql
2. Créez la base de données 'map_example_development' et supprimez le "public/index.html"
(rake db:create)
3. Ajoutons un controller et l'action index
ruby script/generate controller location index (pour rails <= 2.3.8) rails generate controller location index (pour rails >= 3)
4. Installez le plugin YM4R/GM ruby script/plugin install git://github.com/queso/ym4r-gm.git rails plugin install git://github.com/queso/ym4r-gm.git 5. Ajouter une vue frontend.html.erb dans app/views/layouts contenant ce code:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> < html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> < head> < title>Google Maps Rails Exampletitle> < /head> < body> < /body> < /html>
Notez que nous avons inclus deux lignes YM4R/GM dans la section head. Le GMap.header comprendra les fichiers JavaScript nécessaire tout en ligne the@map.to_html génère JavaScript basés sur les paramètres passés dans l'objet de la carte. Nous allons créer l'objet de la carte @map dans notre contrôleur location. 6. Ajouter cette ligne dans le app/views/location_controller: layout "frontend" 7. Et mettre ce code dans la méthode (action) index du controller location:
coordinates = [41.8921254,-87.6096669] @map = GMap.new("map") @map.control_init(:large_map => true, :map_type => true) @map.center_zoom_init(coordinates,14) @map.overlay_init(GMarker.new(coordinates,:title => "Navy Pier", :info_window => "Navy Pier")) Premièrement, nous positionnerons notre carte coordonnées dans un tableau. Le premier nombre est la latitude et la seconde est la longitude. Ces coordonnées point de Navy Pier à Chicago, Illinois. Si vous voulez essayer une autre région pour cet exemple, cet outil facile (http://stevemorse.org/jcal/latlon.php) vous offre la latitude et la longitude de n'importe quelle adresse vous souhaitez utiliser .. Ensuite, nous avons mis l'objet de la carte @ passer dans notre avis. L'objet de la carte @ contient une nouvelle instance de la classe GMap, la «carte» de chaîne est l'id de la div qui contiendra la carte. La ligne suivante active contrôles pour notre carte. La grande carte active l'option de zoom alors que le type de carte active différents points de vue comme une carte ordinaire, le satellite ou le relief. Ensuite, nous configurons le centre de la carte par défaut et le zoom. Nous avons d'abord passer les coordonnées de tableau afin de notre emplacement sera centré, puis nous passons dans un entier pour déterminer le niveau de zoom. Cet entier peut être comprise entre 0 et 22, plus le nombre plus le zoom de la carte sera. Enfin, on ajoute un marqueur de superposition. Le premier argument est le coordonne et c'est le seul argument requis besoin d'ajouter un marqueur. Le titre et info_window sont tous deux en option, le titre est le texte qui s'affiche lorsque la souris est inactive sur le marqueur. 8. le code de la vue app/views/location/index.html.erb :
<h1>Google Maps Rails Exampleh1>
9. Un peu de routing dans config/routes.rb: map.root :controller => "location", :action => "index" 10. Lancez votre application Rails et une carte devrait apparaître. Actuellement, notre carte est statique et l'emplacement ne peut pas changer. Il serait agréable d'avoir une option pour modifier l'emplacement par un champ de texte. Comme il est un champ de texte, l'utilisateur sera en mesure de taper n'importe quel endroit possible et attendons de nos applications pour le Plan. Nous allons avoir à convertir le texte entré par l'utilisateur en coordonnées géographiques. Semble compliqué, heureusement il ya une autre rails plug-in qui peut être utile ici et que plug-in Google est-Geocoder. Google Geocoder trouverez 11. Installez le plugin Google-Geocoder: ruby script/plugin install git://github.com/tobstarr/google-geocoder.git
<br /> >Enter a new Location to map:label> /> <% end %> Ajouter ce formulaire à toutes les deux vues que vous avez créées. 13. Et maintenant ajoutons la méthode create au location controller:
def create new_location = params[:new_location] gg = GoogleGeocode.new("Your API Key Here") gg_locate = gg.locate(new_location) coordinates = [gg_locate.latitude, gg_locate.longitude] @map = GMap.new("map") @map.control_init(:large_map => true, :map_type => true) @map.center_zoom_init(coordinates,14) @map.overlay_init(GMarker.new(coordinates, :title => new_location, :info_window => new_location)) render :action => "index" end Nous avons d'abord défini la variable new_location à la valeur du paramètre new_location. Puis nous passons la clé API Google Maps à une nouvelle instance de la classe GoogleGeocode, cela nous permettra d'exécuter des méthodes telles que «location», qui reviendra avec les coordonnées de l'information. Ensuite, nous configurons les coordonnées du tableau et le reste est en terrain connu. La seule différence, c'est que nous établissons le titre et le texte de la fenêtre d'info à l'entrée de l'utilisateur et, enfin, nous réutilisons l'indice modèle. Nous avons pu obtenir une carte fonctionne en utilisant le plug-in YM4R. Puis nous avons été en mesure de localiser des lieux sur la carte saisis par l'utilisateur en utilisant la Geocoder plug-in Google. Vous pouvez facilement étendre cet exemple en donnant aux utilisateurs la capacité de mettre sur la carte plusieurs endroits à la fois.
L'article d'origine : GoogleMaps
Il existe déjà une multitude de techniques différentes afin d'afficher une carte Google Map dans votre page web. Voyons en une de plus aujourd'hui grâce à l'utilisation de jQuery et des API googles. Voyons donc comment faire interagir les 2 ensembles.
