insertion d'une carte et point "photo"

**Berno** · 16/03/2011, 11h03

Salut à vous,

J'ai créer avec le peu de connaissance que j'ai un site pour un ami coutelier.

J' aimerai intégrer une carte sur lequel je placerai différents points qui donneraient accès à une photo.

J'ai trouvé chez google quelque chose qui me permettrais d'y travailler, mais je me retrouve avec des infos sans intérêts.

Je n'ai pas trouvé de Logitech qui puisse faire ce genre de chose, et mon cerveau me dit que le code est un truc pas fait pour lui, même si je m'y met par la force des choses...

Voila si vous pouvez m'aider...

Voici le lien de la carte : http://maps.google.com/maps/ms?ie=UT...527344&t=p&z=3

Et celui de mon site : http://www.samuel-lurquin.com/

**NoSmoking** · 21/03/2011, 20h19

Bonjour,
je te mets un code minimaliste pour l'affichage d'une carte avec un marqueur et un affichage d'une info bulle sur le click de celui ci.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Google Maps API V3] Ins&eacute;rer une carte</title>
<style type="text/css">
* {
  font-family : Verdana, Arial;
  font-size : 1em;
}
html, body {
  margin : 0;
  padding : 0;
  height : 100%;
}
h1 {
  color : #4488bb;
  font-size : 1.3em;
  border : 1px solid #c0c0c0;
  padding : 10px;
  margin : 10px;
}
#map_canvas{
  margin : auto;
  width : 500px;
  height: 500px;
  border : 1px solid #c0c0c0;
}
#content {
  font-size : 0.8em; 
  width : 300px;
  min-height : 50px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize(){
  // centre de la carte
  var oCentre = new google.maps.LatLng( 47.988635, -2.552033);
  // les options
  var mapOptions = {
    zoom : 10,
    center : oCentre,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  // creation de la carte
  var oMap = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  // creation du marqueur
  var oMarker = new google.maps.Marker({
    position : oCentre,
    map : oMap,
    title : 'Titre du marqueur'
  });
  // creation bulle
  var oBulle = new google.maps.InfoWindow({
    content : '<div id="content"><b>Samuel Lurquin<\/b><br><a href="http://www.samuel-lurquin.com/">http://www.samuel-lurquin.com/<\/a><\/div>'
  });
  // ajout apparition bulle sur le click du marqueur
  google.maps.event.addListener( oMarker, 'click', function() {
    oBulle.open( oMap, this);
  });
}
</script>
</head>
<body onload="initialize();">
<h1>[Google Maps API V3] Ins&eacute;rer une carte</h1>
  <div id="map_canvas"></div>
</body>
</html>

la trame est là, à toi d'affiner

insertion d'une carte et point "photo"

APIs Google

Discussions similaires

Partager

Partager