Comment faire un Google map

datch · 21 Juin 2007

Bonjour à tous

J'utilise actuelement ce site pour faire mes maps
http://www.aardvarkmap.net/#themap

Exemple
http://www.lingostiere.fr/acces_lingostiere.php

y a t'il un moyen pour éviter de passer par ce site???

Merci d'avance

RomsIW · 21 Juin 2007

ben google map en direct, yahoo map, et yen a pas mal d'autres..

yahoo map par exemple permet de personnaliser ta carte via flash, ce qui est pas mal

mjcparis · 21 Juin 2007

Bonjour,

Il y a aussi Map24, mais effectivement, les 2 principaux sont Google et Yahoo dailleurs j'utilise pour mon site web http://www.tourisme-mobile.net
Google et pour mon site wap Yahoo

datch · 22 Juin 2007

merci de vos réponses

au niveau de google map, jarrive la:
http://maps.google.fr/?ie=UTF8&om=1&ll= ... 932617&z=7

seulement j'arrive pas à avoir l'url que je dois incruster sur mon site Internet.

Sinon pour yahoo ca a laire acces compliqué qd mm pour le faire en flash, il aurait pas un autre moyen plus simple???

Merci d'avance.

Bh@Mp0 · 22 Juin 2007

https://www.google.com/apis/maps/

datch · 22 Juin 2007

Merci, j'ai réussie à générer le code, mais je ne sais pas placer les points.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA99NOPMAQ98cwEBVJb2McbxSGxbntpcgYWvtdoJvC9MQ4Oo2yIxR7rPtbNZIAiRdfWGdFB0Xq1T-8Ig"
      type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

ca ce place manuellement avec le code ou il y a un module ou tu peux l'incruster betement???

merci d'avance

mjcparis · 22 Juin 2007

Bonjour,
si tu parle de marker, il faut inserer la fonction de création de marker juste aprés la fonction map.setCenter

tu trouvera ci-dessous le code que j'ai mis pour mon site http://www.tourisme-mobile.net pour avoir un marker au centre de ma carte

map.openInfoWindowHtml(map.getCenter(), popupcenter);
var point9 = new GLatLng(-21.115141, 55.536384);
var marker9 = createMarker(point9, iconSmallWhite, popupcenter);
map.addOverlay(marker9);

Cordialement

datch · 22 Juin 2007

Merci pour votre aide, mais ca à laire un peu compliqué
de faire ca carte directement sous google surtout tt en codant.

voici la carte que je veux faire sur le site :
http://maps.google.fr/maps?f=l&hl=fr&q= ... loc=A&om=1

j'aimerai trouver le moyen de faire juste ca,, mais je ne vois pas comment récupere l'adresse satellite et le point.

Merci d'avance

mjcparis · 22 Juin 2007

Je pense que pour toi le moyen le plus simple c'est de répertorier l'adresse des différents points que tu veux placer sur ta carte. Ci dessous un petit site qui te donnera la longitude et la latitude quand tu entrera l'adresse du lieu qui est à positionner
http://perso.orange.fr/universimmedia/geo/loc_fr.htm

Aprés avoir collecter la localisation de ces points tu génére tes markers avec le code exemple de mon site http://www.tourisme-mobile.net

map.openInfoWindowHtml(map.getCenter(), popupcenter);
var point9 = new GLatLng(-21.115141, 55.536384);
var marker9 = createMarker(point9, iconSmallWhite, popupcenter);
map.addOverlay(marker9);

datch · 22 Juin 2007

Merci, j'ai réussi mais par contre le point ne s'affiche pas et je n'ai pas les bouton de navigation.....

http://www.restaurant-asiatique.fr/map-restaurant.html

Merci d'avance pour l'aide ;-)

mjcparis · 22 Juin 2007

J'ai vu ton code il faut définir popupcenter comme ci-dessous, il faut aussi définir image icon marker, mais si on ne l'indique pas je pense qu'on prend une image icon marker par défaut. Il est préférable de définir le popupcenter qui s'affichera et précisera sur le marker

var popupcenter= "<div id='popupcenter'> <center>Ton titre</center><br> Ton commentaire (asia boutique bla bla)</div>";

map.openInfoWindowHtml(map.getCenter(), popupcenter);
var point9 = new GLatLng(43.65216,7.15236);
var marker9 = createMarker(point9, popupcenter);
map.addOverlay(marker9);

mjcparis · 22 Juin 2007

Ci-dessous le code pour la navigation juste avant map.setCenter( ---):

map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

datch · 22 Juin 2007

:wink: au top mec, je pensais que j'allais jamais arrivé

cependant je n'est pas l'icon, pourrais tu me donner la marche à suivre, en cas je le fais sous photoshop l'icon.

il me manque aussi la petite barre pour mieux naviger avec l'altitude, c pas tres grave mais si tu vois une solution rapide je prends
cf: au lien d'avant.

merci d'avance.

mjcparis · 22 Juin 2007

C'est l'icon défini chez google mais formaté sur mon serveur
mais tu peux aussi définir et formaté l'icon sur ton serveur

var iconSmallWhite = new GIcon();
iconSmallWhite.image = "http://labs.google.com/ridefinder/images/mm_20_white.png";
iconSmallWhite.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
iconSmallWhite.iconSize = new GSize(20, 25);
iconSmallWhite.shadowSize = new GSize(22, 27);
iconSmallWhite.iconAnchor = new GPoint(6, 20);
iconSmallWhite.infoWindowAnchor = new GPoint(9, 2);
iconSmallWhite.infoShadowAnchor = new GPoint(18, 25);

Ci-dessous l'appel du marker avec l'icon

var marker9 = createMarker(point9, iconSmallWhite, popupcenter);

Bon courage

datch · 23 Juin 2007

merci

bon j ai cherché 2 heures pour incruster le point j ai pas réussie

pourrais tu me donner un coup de pousse encore car je sais pas ou le placer

merci d'avance.

mjcparis · 23 Juin 2007

******ICON*********
var iconSmallWhite = new GIcon();
iconSmallWhite.image = "http://labs.google.com/ridefinder/images/mm_20_white.png";
iconSmallWhite.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
iconSmallWhite.iconSize = new GSize(20, 25);
iconSmallWhite.shadowSize = new GSize(22, 27);
iconSmallWhite.iconAnchor = new GPoint(6, 20);
iconSmallWhite.infoWindowAnchor = new GPoint(9, 2);
iconSmallWhite.infoShadowAnchor = new GPoint(18, 25);

*******POPUP*******
var popupcenter= "<div id='popupcenter'> <center>l'ile de la Reunion</center><br> Au coeur de l'océan Indien, du battant des lames aux sommets des montagnes. Visite vidéo en cliquant sur les icones, le zoom(+ -) donnera une vue aèrienne détaillée de la région.</div>";

****Affiche Carte, Icon au centre de la carte et Popup sur l'Icon********
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
// map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(-21.115141, 55.536384), 10, G_SATELLITE_MAP);
map.openInfoWindowHtml(map.getCenter(), popupcenter);
var point9 = new GLatLng(-21.115141, 55.536384);
var marker9 = createMarker(point9, iconSmallWhite, popupcenter);
map.addOverlay(marker9);

Bon courage

mjcparis · 24 Juin 2007

Ci-dessous le code complet pour la carte de la lingostiere, il fonctionne, j'ai testé
Bon courage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA99NOPMAQ98cwEBVJb2McbxSGxbntpcgYWvtdoJvC9MQ4Oo2yIxR7rPtbNZIAiRdfWGdFB0Xq1T-8Ig"
type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[
var popupcenter= "<div id='popupcenter'> <center>La lingoustiere</center><br> Tes Commentaires</div>";
var popuphtml=null;
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(43.72091, 7.18752), 11);
map.openInfoWindowHtml(map.getCenter(), popupcenter);
var point9 = new GLatLng(43.72091, 7.18752);
var marker9 = createMarker(point9, popupcenter);
map.addOverlay(marker9);

}
}

function createMarker(point, popuphtml) {
var marker = new GMarker(point);

GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(popuphtml);
map.setCenter(point, 11);
});

return marker;
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 550px; height: 450px"></div>
</body>
</html>

mjcparis · 24 Juin 2007

Ps n'oublie pas de mettre ta clé de map api google

datch · 24 Juin 2007

Merci bcp, je vais sur ce pat tester :wink: