This automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch:
If you're using the GitHub for Mac, simply sync your repository and you'll see the new branch.
+
+
Designer Templates
+
+
We've crafted some handsome templates for you to use. Go ahead and continue to layouts to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved if it remained markdown format.
+
+
Rather Drive Stick?
+
+
If you prefer to not use the automatic generator, push a branch named gh-pages to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator written by our own Tom Preston-Werner. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.
+
+
Authors and Contributors
+
+
You can @mention a GitHub username to generate a link to their profile. The resulting <a> element will link to the contributor's GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.
Plugin jQuery : Create your own complet Google Map
-
Welcome to GitHub Pages.
-
-
This automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch:
If you're using the GitHub for Mac, simply sync your repository and you'll see the new branch.
-
-
Designer Templates
-
-
We've crafted some handsome templates for you to use. Go ahead and continue to layouts to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved if it remained markdown format.
-
-
Rather Drive Stick?
-
-
If you prefer to not use the automatic generator, push a branch named gh-pages to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator written by our own Tom Preston-Werner. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.
-
-
Authors and Contributors
-
-
You can @mention a GitHub username to generate a link to their profile. The resulting <a> element will link to the contributor's GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.
jQuery Google Map est un plugin jQuery vous permettant de manipuler l'API Google Map sans aucune difficulté. Vous avez ainsi la possibilité de créer des cartes, d'y intégrer des points et de créer des itinéraires.
+
+
Installation
+
Pour installer jQuery Google Map, plusieurs propositions s'offrent à vous :
+
+
Utilisation du CDN Google
+
+
+
+
+
+
+
Appel simple de l'API
+
+
+
+
+
Il vous faudra alors créer votre clef API directement sur le site de google dans la console API.
+
+
Utilisation
+
Créer une carte
+
Sur votre fichier HTML, créez le conteneur de votre carte. N'oubliez pas de lui préciser une largeur et une hauteur fixe (en CSS ou en dur)
+
+
+
+
+
Vous n'avez plus qu'à appeler utiliser la methode googleMap(). Vous pouvez lui indiquer les coordonnées de départ ainsi que le zoom initial. Si vous ne le faites pas, la carte sera automatiquement centrée sur Levallois-Perret (oui, c'est là où je travaille).
+
+
+
+
+
Rendu :
+
+
+
+
+
Il existe 4 types de cartes disponibles chez google :
+
+
ROADMAP : La carte par défaut, qui affiche les rues, les villes, etc.
+
SATELLITE : Affichage de la vue satellite de google.
+
HYBRID : Affichage de la vue satellite avec, en superposition, le nom des villes, les villes, etc ...
+
TERRAIN : Cette carte n'est pas disponible pour toutes les zones géorgraphique mais représente le relief de la région.
+
+
+
Ajouter un point
+
Une fois votre carte créée, vous pouvez lui ajouter des points (appelées des markers) et leur assigner plusieurs actions.
jQuery Google Map est un plugin jQuery vous permettant de manipuler l'API Google Map sans aucune difficulté. Vous avez ainsi la possibilité de créer des cartes, d'y intégrer des points et de créer des itinéraires.
Installation
+<<<<<<< HEAD
Pour installer jQuery Google Map, plusieurs propositions s'offrent à vous :
Utilisation du CDN Google
@@ -57,6 +64,15 @@
Appel simple de l'API
+=======
+
Pour l'installation du plugin, vous devez faire appel à jQuery, google Api et le fichier contenant le plugin :
+
+
+
+
+
+
+>>>>>>> Update index.html
Il vous faudra alors créer votre clef API directement sur le site de google dans la console API.
diff --git a/javascripts/jquery.googlemap.js b/javascripts/jquery.googlemap.js
new file mode 100644
index 0000000..5c92c39
--- /dev/null
+++ b/javascripts/jquery.googlemap.js
@@ -0,0 +1,224 @@
+$(function() {
+ /*
+ * Initialisation de la Map
+ */
+
+ $.fn.googleMap = function(params) {
+ params = $.extend( {
+ zoom: 10,
+ coords: [48.895651, 2.290569],
+ type: "ROADMAP"
+ }, params);
+
+ // Vérification du type de la carte
+ switch(params.type) {
+ case 'ROADMAP':
+ case 'SATELLITE':
+ case 'HYBRID':
+ case 'TERRAIN':
+ params.type = google.maps.MapTypeId[params.type];
+ break;
+ default:
+ params.type = google.maps.MapTypeId.ROADMAP;
+ break;
+ }
+
+ // Vérification des coordonnées du centre de la carte
+
+ this.each(function() {
+
+ var map = new google.maps.Map(this, {
+ zoom: params.zoom,
+ center: new google.maps.LatLng(params.coords[0], params.coords[1]),
+ mapTypeId: params.type
+ });
+
+ $(this).data('googleMap', map);
+ $(this).data('googleMarker', new Array());
+ $(this).data('googleBound', new google.maps.LatLngBounds());
+ });
+
+ return this;
+ }
+
+ /*
+ * Ajouter un point
+ */
+ $.fn.addMarker = function(params) {
+ params = $.extend( {
+ coords : false,
+ adress : false,
+ url : false,
+ id : false,
+ title : "",
+ text : ""
+ }, params);
+
+ this.each(function() {
+ if(!$(this).data('googleMap')) {
+ console.log("jQuery googleMap : Unable to add a marker where there is no map !");
+ return false;
+ }
+
+ if(!params.coords && !params.adress) {
+ console.log("jQuery googleMap : Unable to add a marker if you don't tell us where !");
+ return false;
+ }
+
+ if(params.adress && typeof params.adress == "string") {
+ geocoder = new google.maps.Geocoder();
+
+ geocoder.geocode({
+ address : params.adress,
+ bounds : $(this).data('googleBound'),
+ language : 'french'
+ }, function(results, status) {
+ if (status == google.maps.GeocoderStatus.OK) {
+
+ $(this).data('googleBound').extend(results[0].geometry.location);
+
+ var marker = new google.maps.Marker({
+ map: $(this).data('googleMap'),
+ position: results[0].geometry.location
+ });
+
+ if(params.title != "" && params.text != "" && !params.url) {
+ var infowindow = new google.maps.InfoWindow({
+ content: "