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

Question

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

Signaler

manoula - 14 août 2010 à 14:16
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

A voir également:

Comment marquer les hotels sur google map?
Comment marquer les hotels sur google map? ✓ - Forum - Programmation
Marquer plusieurs points sur google maps - Forum - Google Chrome
Comment marquer un lieu sur google map - Conseils pratiques - Google Maps
Marquer un point sur google maps - Forum - Internet / Réseaux sociaux
Zone 1 km autour de moi google maps - Guide

12 réponses

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: 3255
Date d'inscription: jeudi 27 décembre 2007
Statut: Membre
Dernière intervention: 8 février 2020

554
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

Signaler

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: 3255
Date d'inscription: jeudi 27 décembre 2007
Statut: Membre
Dernière intervention: 8 février 2020

554
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

Signaler

varfendell

Messages postés: 3255
Date d'inscription: jeudi 27 décembre 2007
Statut: Membre
Dernière intervention: 8 février 2020

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

Signaler

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: 3255
Date d'inscription: jeudi 27 décembre 2007
Statut: Membre
Dernière intervention: 8 février 2020

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

Afficher les 10 commentaires

Signaler

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

Signaler

varfendell

Messages postés: 3255
Date d'inscription: jeudi 27 décembre 2007
Statut: Membre
Dernière intervention: 8 février 2020

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

Signaler

manoula
16 août 2010 à 14:53

merci milllllllle fois :)

tt est bien ;)

Signaler

varfendell

Messages postés: 3255
Date d'inscription: jeudi 27 décembre 2007
Statut: Membre
Dernière intervention: 8 février 2020

554
16 août 2010 à 14:58

oublie pas de marquer ton sujet comme résolu

Signaler

manoula
16 août 2010 à 15:07

OK :)

Une autre chose SVP quand je clique sur les infobulle tt ils s'affichent ,or normalement l'autre se disparut quand on ou clique sur la deuxième

comme cette exemple :
https://support.google.com/mapmaker/answer/7195127

Signaler

varfendell

Messages postés: 3255
Date d'inscription: jeudi 27 décembre 2007
Statut: Membre
Dernière intervention: 8 février 2020

554
16 août 2010 à 15:11

En effet, c'est un problème que je n'ai pas encore résolu.
Je ne me suis pas vraiment intéressé a ce problème, si sa t'intéresse, voici la doc de google map API v3:
documentation
tu trouveras dedans toute les méthode et tout les attribut de chaque méthode ou objet, et donc la réponse se cache quelque part dedans. La java doc est cependant en anglais et n'existe pas encore en français.

Signaler

manoula
16 août 2010 à 15:12

Merci encore :) je vais le voire

Posez votre question

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

merci
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);
});
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
????
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.
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 });
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???
OK :)

Une autre chose SVP quand je clique sur les infobulle tt ils s'affichent ,or normalement l'autre se disparut quand on ou clique sur la deuxième

comme cette exemple :
https://support.google.com/mapmaker/answer/7195127
En effet, c'est un problème que je n'ai pas encore résolu.
Je ne me suis pas vraiment intéressé a ce problème, si sa t'intéresse, voici la doc de google map API v3:
documentation
tu trouveras dedans toute les méthode et tout les attribut de chaque méthode ou objet, et donc la réponse se cache quelque part dedans. La java doc est cependant en anglais et n'existe pas encore en français.

dorgane · Accepted Answer · 2010-08-14T14:18:59+0200

Réponse 1 / 12

dorgane

Messages postés: 17998
Date d'inscription: dimanche 29 octobre 2006
Statut: Contributeur
Dernière intervention: 7 juin 2020

3 068
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

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

12 réponses

Votre réponse

Newsletter