[Google Maps] insertion d'une carte et point "photo"

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:

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