Affichage de la carte avec l'api google maps
Résolu
zeO_34
Messages postés
6
Date d'inscription
Statut
Membre
Dernière intervention
-
zeO_34 Messages postés 6 Date d'inscription Statut Membre Dernière intervention -
zeO_34 Messages postés 6 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
je créer actuellement un site web pour la location d'un appartement. Je souhaite afficher une carte avec la localisation de l'appartement en question grâce a l'api google map. Jusque la pas de problème je récupère bien la carte. Mon problème est que je n'arrive pas à l'affichée ou je voudrais. voici le code que j'utilise :
HTML:
<body >
<div class="header">
<div class="formConnect">
s'identifier
</div>
<div class="htPage">
autre info
</div>
</div><br/>
<div class="erreurCont"><?php
//include('message.inc.php');
?></div><br/>
<div class="conteneur">
<div class="menu">
<?php
include 'menu.php';
?>
</div><br/>
<div id="map_canvas">
</div>
</div><br/>
<div class="footer">
<?php
?>
pied de page
</div>
</body>
JavaScript :
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 17,
center: new google.maps.LatLng(34.023685, -5.016778),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.panTo(new google.maps.LatLng(34.023685, -5.016778));
var marker = new google.maps.Marker({
position: new google.maps.LatLng(34.023685, -5.016778),
map: map,
title: 'appartement'
});
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(34.023286, -5.015911),
map: map,
title: 'Nausikaa-Spa'
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(34.026060, -5.013983),
map: map,
title: 'La Villa'
});
merci d'avance pour votre aide
je créer actuellement un site web pour la location d'un appartement. Je souhaite afficher une carte avec la localisation de l'appartement en question grâce a l'api google map. Jusque la pas de problème je récupère bien la carte. Mon problème est que je n'arrive pas à l'affichée ou je voudrais. voici le code que j'utilise :
HTML:
<body >
<div class="header">
<div class="formConnect">
s'identifier
</div>
<div class="htPage">
autre info
</div>
</div><br/>
<div class="erreurCont"><?php
//include('message.inc.php');
?></div><br/>
<div class="conteneur">
<div class="menu">
<?php
include 'menu.php';
?>
</div><br/>
<div id="map_canvas">
</div>
</div><br/>
<div class="footer">
<?php
?>
pied de page
</div>
</body>
JavaScript :
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 17,
center: new google.maps.LatLng(34.023685, -5.016778),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.panTo(new google.maps.LatLng(34.023685, -5.016778));
var marker = new google.maps.Marker({
position: new google.maps.LatLng(34.023685, -5.016778),
map: map,
title: 'appartement'
});
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(34.023286, -5.015911),
map: map,
title: 'Nausikaa-Spa'
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(34.026060, -5.013983),
map: map,
title: 'La Villa'
});
merci d'avance pour votre aide
A voir également:
- Affichage de la carte avec l'api google maps
- Google maps satellite - Guide
- Google maps - Guide
- Carte d'identité - Accueil - Services publics
- Dns google - Guide
- Telecharger google maps pc - Télécharger - Téléchargement & Transfert
10 réponses
je te remercie de ton aide l'ami j'ai suivie tn conseil avec le css ca avance un peu :) il fallait mettre la div map canvas en position absolute en css
Quand tu dit afficher ?? Tu veu parler de ta carte google ou de ton marker contenu dans ta carte google ???
je veux parlé de ma carte google. le problème que je rencontre c'est que dans mon code html si je sors ma div "map_canvas" de la div"conteneur" ca marche nikel or je voudrais que ma carte s'affiche dans le conteneur
Joue avec le css dans ta div map_canvas
<div style="margin:?px ?px ?px ?px; position:relative ou absolute;" id="map_canvas"></div>
OU
Met ta <div id="map_canvas"></div> dans une autre
<div style="margin ou padding:?px ?px ?px ?px; position:relative ou absolute;">
<div id="map_canvas"></div>
</div>
<div style="margin:?px ?px ?px ?px; position:relative ou absolute;" id="map_canvas"></div>
OU
Met ta <div id="map_canvas"></div> dans une autre
<div style="margin ou padding:?px ?px ?px ?px; position:relative ou absolute;">
<div id="map_canvas"></div>
</div>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
ma div <div id="map_canvas" ></div> ce trouve déjà dans une autre <div class = "conteneur"></div>
je pense que le problème vient de mon js je pense que lorsque je fait
map = new google.maps.Map(document.getElementById("map_canvas") le getElementById ne trouve pas l'id map_canvas alors que lorsque la div map_canvas ne se trouve pas dans une autre ca marche
je pense que le problème vient de mon js je pense que lorsque je fait
map = new google.maps.Map(document.getElementById("map_canvas") le getElementById ne trouve pas l'id map_canvas alors que lorsque la div map_canvas ne se trouve pas dans une autre ca marche
lol tu peu me shooter ton url j'ai une tête de cochon et j'ai du en plugué une centaine de carte google comme sa lol
bah je code en locale pr le moment il n'est pas encore en ligne ca m'enerve je suis pas loin mais bon je debute donc ca doit etre un truc bete
D'accord je te laisse aller bonne chance l'ami sinon voici un lien très utile pour google map.. du geocoding etc...
http://labs.mario.ec/jquery-gmap/
http://labs.mario.ec/jquery-gmap/