Comment marquer les hotels sur google map? [Résolu]

Réponse 1 / 12

Utilisateur anonyme
14 août 2010 à 14:18

lu,

ben tu mets en recherche hotels + ville
ou code postale

exemple : hotels paris
https://www.google.fr/maps?hl=fr&tab=wl

Réponse 2 / 12

Utilisateur anonyme
14 août 2010 à 14:21

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

Réponse 3 / 12

manoula
14 août 2010 à 14:22

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 .

Réponse 4 / 12

manoula
14 août 2010 à 14:26

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??

Réponse 5 / 12

manoula
16 août 2010 à 09:37

Bonjour mes amis ,

Alors pas de solution ???

Réponse 6 / 12

varfendell Messages postés 3256 Date d'inscription jeudi 27 décembre 2007 Statut Membre Dernière intervention 8 février 2020 699
16 août 2010 à 09:52

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
16 août 2010 à 09:56

Merciiiiiiii de votre aide varfendell je vais tester selon ma carte :)

Réponse 8 / 12

manoula
16 août 2010 à 10:23

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

manoula
16 août 2010 à 10:36

Bon je croit que je vais utiliser google erth pour les trouver

merci

Réponse 9 / 12

varfendell Messages postés 3256 Date d'inscription jeudi 27 décembre 2007 Statut Membre Dernière intervention 8 février 2020 699
16 août 2010 à 10:37

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

Réponse 10 / 12

manoula
16 août 2010 à 11:55

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

varfendell Messages postés 3256 Date d'inscription jeudi 27 décembre 2007 Statut Membre Dernière intervention 8 février 2020 699
16 août 2010 à 12:34

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);
});

manoula
16 août 2010 à 12:54

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
????

Réponse 11 / 12

varfendell Messages postés 3256 Date d'inscription jeudi 27 décembre 2007 Statut Membre Dernière intervention 8 février 2020 699
16 août 2010 à 13:00

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).

Réponse 12 / 12

manoula
16 août 2010 à 13:19

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 3256 Date d'inscription jeudi 27 décembre 2007 Statut Membre Dernière intervention 8 février 2020 699
16 août 2010 à 13:36

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.

manoula
16 août 2010 à 14:06

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 3256 Date d'inscription jeudi 27 décembre 2007 Statut Membre Dernière intervention 8 février 2020 699
16 août 2010 à 14:16

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
		});

manoula
Modifié par manoula le 16/08/2010 à 14:25

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???

varfendell Messages postés 3256 Date d'inscription jeudi 27 décembre 2007 Statut Membre Dernière intervention 8 février 2020 699
16 août 2010 à 14:26

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>

Comment marquer les hotels sur google map?

12 réponses

Newsletters