Comment marquer les hotels sur google map?

Résolu

manoula -
manoula - 16 août 2010 à 15:12

Bonjour, à vous tous

j'ai un petit problème et je veux que quelqu'un puisse m'aider. en faite je veux mettre sur la carte de ma ville tous les hôtels, sur google map est ce qu'il existe un scripte ???

merci de votre aide

Afficher la suite

12 réponses

Réponse 1 / 12
Utilisateur anonyme

lu,

ben tu mets en recherche hotels + ville
ou code postale

exemple : hotels paris
https://www.google.fr/maps?hl=fr&tab=wl
1
Réponse 2 / 12
Utilisateur anonyme

il suffit de taper hotels puis une ville

ca donne ceci
https://www.google.fr/maps?hl=fr&um=1&ie=UTF-8&q=hotels+toulouse&fb=1&gl=fr&hq=hotels&hnear=Toulouse&view=text&ei=6olmTMb8M8aoOPGLvLgF&sa=X&oi=local_group&ct=more-results&resnum=1&ved=0CDwQtQMwAA
1
Réponse 3 / 12
manoula

merci pour votre réponse mais je connais ce lien c pas ca , je veux savoire comment identifier mes hôtels sur la carte en suite remporter le script pour le mettre sur le site que je suis entrain de le faire .
1
Réponse 4 / 12
manoula

voila le site: http://www.commune-sousse.gov.tn/fr/festivite.php
j'ai crée cette carte de ma ville avec les hôtels mais non dynamique je veux mettre une autre comme celle de google map

est ce que il y quelqu'un qui peut m'aidez??
1
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 12
manoula

Bonjour mes amis ,

Alors pas de solution ???
1

varfendell Messages postés 3259 Date d'inscription Statut Membre Dernière intervention 707

Salut,

Il va te falloir prendre les coordonnées géographique de chacun de tes hotel, et les ajouter manuellement un par un sur ta carte.

Voici un exemple:

fichier carte.html

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr'>
	<head>
		<title>cartographie Orange</title>
		<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
		<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true'></script>
		<script type='text/javascript' src='carte.js'></script>
	</head>
	<body>
		<script>
			window.onload = function() {
				var maCarte = new Carte(19, 3, 3, 'ROADMAP');
				maCarte.addMarker('titre1', 'nom1', 2.281124, 30.8139);
				maCarte.addMarker('titre2', 'nom2', 2.268911, 33.1888);
				maCarte.addMarker('titre3', 'nom3', 22.68911, 331888);
				maCarte.addMarker('titre4', 'nom4', 2.258455, 30.9690);
				}
		</script>
			<h1>Carte:</h1>
		<br/>
		<div id='map' class='map' style='width:85%; height:75%' >
		</div>
		<noscript>
			<p>Attention : </p>
			<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
			<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
			<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
		</noscript>
	</body>
</html>

fichier carte.js

var carte;	//declaration de la carte
var bounds;	//limite de la carte en fonciton des marqueurs

function Carte	(
					optZoom,
					Lattitude,
					Longitude,
					optMapTypeId
				)
{
	var optCenterMap = new google.maps.LatLng(Lattitude, Longitude);
	var mapType = google.maps.MapTypeId[optMapTypeId];
	var options =
		{
			center: 				optCenterMap, 		//LatLng(lat:number, lng:number) 		obligatoire
			mapTypeId: 				mapType,			//HYBRID, ROADMAP, SATELLITE, TERRAIN 	obligatoire
			zoom: 					optZoom				//number 								obligatoire
		};
	carte = new google.maps.Map(document.getElementById("map"), options);
	bounds = new google.maps.LatLngBounds();
}

Carte.prototype.addMarker = function 	(
											Window,
											Nom,
											Lattitude,
											Longitude
										)
{
	var info = new google.maps.InfoWindow(
		{
			content: Window
		});
	var optCenterMarker = new google.maps.LatLng(Lattitude, Longitude);
	bounds.extend(optCenterMarker);
	var marker = new google.maps.Marker(
		{
			position : 	optCenterMarker,
			title : 	Nom,
			map : 		carte
		});
	google.maps.event.addListener(marker, 'click', function()
		{
			info.open(carte, marker);
		});
	carte.fitBounds(bounds);
};

Réponse 7 / 12
manoula

Merciiiiiiii de votre aide varfendell je vais tester selon ma carte :)
0
Réponse 8 / 12
manoula

Désolé j'ai une aitre question : comment peut-on avoir les coordonnées géographique car j'ai utilisé ce lien:

https://support.google.com/mapmaker/answer/7195127

Merci encore
0
1. manoula
  
  Bon je croit que je vais utiliser google erth pour les trouver
  
  merci
  
  0
Réponse 9 / 12
varfendell Messages postés 3259 Date d'inscription Statut Membre Dernière intervention 707
La encore fait ça manuellement:

Fait une carte test sur laquelle tu affichera un marqueur.
Tu rend ce marqueur déplaçable, avec un event qui t'affiche la nouvelle position du marqueur a chaque fois que tu déplaces.
Déplace ce marqueur sur tout les hôtel dont tu veut les coordonnées géographique et le tour est joué :)

PS:

Pour rendre une marqueur déplaçable et ajouter l'event, ajoute ce code apres
```
carte.fitBounds(bounds);
```
==>
```
marker.setDraggable(true);
	
	google.maps.event.addListener(marker, 'dragend', function(event) {
		//message d'alerte affichant la nouvelle position du marqueur
		alert("La nouvelle coordonnée du marqueur est : "+event.latLng);
	});
```
Sinon pour plus d'info sur l'API v3 de google map, tu peut te rendre:

- sur le site du zero (tutoriel)
- sur le site de google map documentation
0
Réponse 10 / 12
manoula

Merci varfendell ca c bien passer mais j'ai un autre petit problème :
Quand on met le curseur sur l'hôtel je veux que des infos sur cet hôtel soient afficher par exemple: l'adresse , tel, nombre des étoiles, phots de l'hôtel .

Est ce que je peux ajouter ses données dans le script ???

Merci
0
1. varfendell Messages postés 3259 Date d'inscription Statut Membre Dernière intervention 707
  
  alors il y a deux possibilité:
  
  Soit tu parle de l'infobulle quand on clique sur le marqueur
  soit une info juste quand on passe la marqueur dessus.
  
  Pour cela le script que je t'ai donné en premier lieu se charge des deux possibilité:
  
  var optCenterMarker = new google.maps.LatLng(Lattitude, Longitude);
  bounds.extend(optCenterMarker);
  var marker = new google.maps.Marker(
  {
  position : optCenterMarker,
  title : Nom,=============> nom est ici une variable qui contient la deusxieme possibilité. Tu peut remplacer par "hotel mercury" par exemple
  map : carte
  });
  créer le contenu de l'info bulle:
  var info = new google.maps.InfoWindow(
  {
  content: //ici tu met ce que tu veut affiché, en html. Par exemple <h1>nom de l'hotel</h1>. Tu peut meme mettre plusieur ligne
  });
  créer l'evenement "quand on cilque, on affiche l'inffobulle"
  google.maps.event.addListener(marker, 'click', function()
  {
  info.open(carte, marker);
  });
  
  0
2. manoula
  
  merciiiiiii très gentil de ta part :)
  les données que tu m'a données de changer sur la page carte.js
  et l'affichage de l'infobull sur la page html
  ????
  
  0
Réponse 11 / 12
varfendell Messages postés 3259 Date d'inscription Statut Membre Dernière intervention 707
En effet, les lignes
```
maCarte.addMarker('titre1', 'nom1', 2.281124, 30.8139);
```
contiennent ces informations:

Dans titre1 tu met le contenu de la fenetre (windows) qui s'affichera lors du clic (essaye de cliquer et tu verra s'afficher titre1)
et dans nom1 tu met le nom du marqueur qui s'affichera quand la souris passera dessus (passe ta souris sur un marqueurs et tu verra nom1 s'afficher).
0

manoula

vraiment je suis très désolé :/

voila mon script après le changement mais en testant la carte ne s'affiche pas :(

<script>
			window.onload = function() {
				var maCarte = new Carte(19, 3, 3, 'ROADMAP');
				maCarte.addMarker('var info = new google.maps.InfoWindow(
				{ <h1>hôtel sousse palace</h1>}); ', 'google.maps.event.addListener(marker, 'click', function(){info.open(carte, marker);});', 35.83097051764975, 10.641005467796303);
				
		</script>

varfendell Messages postés 3259 Date d'inscription Statut Membre Dernière intervention 707

lol, c'est normal, faut pas ré-ecrire entierement les fonctions:

maCarte.addMarker('<h1>hôtel sousse palace</h1>', 'nom du marker', 35.83097051764975, 10.641005467796303);

en gros tu met juste ce que tu veut voir afficher dasn l'info bulle, pas toute la methode vu que je l'ai deja implementer dans le javascript.
Et le second parametre c'est juste pour donner un titre au marker.
0

manoula

Alors voila mon script :
carte.js

// JavaScript Document
var carte;	//declaration de la carte
var bounds;	//limite de la carte en fonciton des marqueurs

function Carte	(
					optZoom,
					Lattitude,
					Longitude,
					optMapTypeId
				)
{
	var optCenterMap = new google.maps.LatLng(Lattitude, Longitude);
	var mapType = google.maps.MapTypeId[optMapTypeId];
	var options =
		{
			center: 				optCenterMap, 		//LatLng(lat:number, lng:number) 		obligatoire
			mapTypeId: 				mapType,			//HYBRID, ROADMAP, SATELLITE, TERRAIN 	obligatoire
			zoom: 					optZoom				//number 								obligatoire
		};
	carte = new google.maps.Map(document.getElementById("map"), options);
	bounds = new google.maps.LatLngBounds();
}

Carte.prototype.addMarker = function 	(
											Window,
											Nom,
											Lattitude,
											Longitude
										)
{
	var info = new google.maps.InfoWindow(
		{
		content: //ici tu met ce que tu veut affiché, en html. Par exemple <h1>nom de l'hotel</h1>. Tu peut meme mettre plusieur ligne
		}); 

    var optCenterMarker = new google.maps.LatLng(Lattitude, Longitude);
		bounds.extend(optCenterMarker);
	var marker = new google.maps.Marker(
	{
	position : optCenterMarker,
	title : Nom
	 map : carte
	}); 
		google.maps.event.addListener(marker, 'click', function()
	{
	info.open(carte, marker);
	});
	carte.fitBounds(bounds);
	marker.setDraggable(true);
	
	google.maps.event.addListener(marker, 'dragend', function(event) {
		//message d'alerte affichant la nouvelle position du marqueur
		alert("La nouvelle coordonnée du marqueur est : "+event.latLng);
	});

};

carte.html

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr'>
	<head>
		<title>cartographie Orange</title>
		<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
		<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true'></script>
		<script type='text/javascript' src='carte.js'></script>
	</head>
	<body>
		<script>
			window.onload = function() {
				var maCarte = new Carte(19, 3, 3, 'ROADMAP');
				maCarte.addMarker('<h1>hôtel sousse palace</h1>', 'Sousse Palace', 35.83097051764975, 10.641005467796303); 
				
				}
		</script>
			<h1>Carte:</h1>
		<br/>
		<div id='map' class='map' style='width:85%; height:75%' >
		</div>
		<noscript>
			<p>Attention : </p>
			<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
			<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
			<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
		</noscript>
	</body>
</html>

mais la carte ne s'affiche pas

varfendell Messages postés 3259 Date d'inscription Statut Membre Dernière intervention 707
bon, alors vérifie bien que ton fichier qui contient le script soit dans le meme dossier (au meme endroit) que ton fichier html, puis verifie bien les nom (carte.js et carte.html

puis remplace
```
var info = new google.maps.InfoWindow(
		{
		content: //ici tu met ce que tu veut affiché, en html. Par exemple <h1>nom de l'hotel</h1>. Tu peut meme mettre plusieur ligne
		}); 
```
par
```
var info = new google.maps.InfoWindow(
		{
		content: Window
		}); 
```
0
manoula
désolé une autre fois,
j'ai bien vérifié les deux page se trouvent dans le mm dossier
et j'ai bien remplacé
```
var info = new google.maps.InfoWindow( 
  { 
  content: Window 
  });  
```
c quoi le problème???
0

varfendell Messages postés 3259 Date d'inscription Statut Membre Dernière intervention 707

tu as mal placé l'evenement dragend pour deplacer le marqueur.

Je te met le code complet qui fonctionne:

carte.js (javascript):

var carte;	//declaration de la carte
var bounds;	//limite de la carte en fonciton des marqueurs

function Carte	(
					optZoom,
					Lattitude,
					Longitude,
					optMapTypeId
				)
{
	var optCenterMap = new google.maps.LatLng(Lattitude, Longitude);
	var mapType = google.maps.MapTypeId[optMapTypeId];
	var options =
		{
			center: 				optCenterMap, 		//LatLng(lat:number, lng:number) 		obligatoire
			mapTypeId: 				mapType,			//HYBRID, ROADMAP, SATELLITE, TERRAIN 	obligatoire
			zoom: 					optZoom				//number 								obligatoire
		};
	carte = new google.maps.Map(document.getElementById("map"), options);
	bounds = new google.maps.LatLngBounds();
}

Carte.prototype.addMarker = function 	(
											Window,
											Nom,
											Lattitude,
											Longitude
										)
{
	var info = new google.maps.InfoWindow(
		{
			content: Window
		});
	var optCenterMarker = new google.maps.LatLng(Lattitude, Longitude);
	bounds.extend(optCenterMarker);
	var marker = new google.maps.Marker(
		{
			position : 	optCenterMarker,
			title : 	Nom,
			map : 		carte
		});
	marker.setDraggable(true);
	google.maps.event.addListener(marker, 'dragend', function(event) {
		alert("La nouvelle coordonnée du marqueur est : "+event.latLng);
	});

	google.maps.event.addListener(marker, 'click', function()
		{
			info.open(carte, marker);
		});
	carte.fitBounds(bounds);
	
};

carte.html (fichier html)

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr'>
	<head>
		<title>cartographie Orange</title>
		<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
		<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true'></script>
		<script type='text/javascript' src='carte.js'></script>
	</head>
	<body>
		<script>
			window.onload = function() {
				var maCarte = new Carte(19, 3, 3, 'ROADMAP');
				maCarte.addMarker('<h1>hôtel sousse palace</h1>', 'Sousse Palace', 35.83097051764975, 10.641005467796303); 
				
				}
		</script>
			<h1>Carte:</h1>
		<br/>
		<div id='map' class='map' style='width:85%; height:75%' >
		</div>
		<noscript>
			<p>Attention : </p>
			<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
			<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
			<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
		</noscript>
	</body>
</html>

Newsletters