implémentation de l'API Google map

Version imprimable

Bonjour,

je voudrai implémenter l'api googleMap, j'ai essayé le code suivant je ne vois pas pourquoi la carte ne s'affiche pas

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
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
	<title>Google Map API V3</title>
 
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
		window.onload = function() {
			var myLatlng = new google.maps.LatLng(48.88766182, 2.34451854);	
			var myOptions = {
				zoom: 8,
				center: myLatlng,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			var myMap = new google.maps.Map(
				document.getElementById('map'),
				myOptions
				);
			var marqueur = new google.maps.Marker({
				position: new google.maps.LatLng(48.88766182, 2.34451854),
				map: myMap
			});
		};
	</script>
</head>
<body>
	<div id="map" style="width:100%; height:100%">
	</div>
</body>
</html>

02/08/2012, 16h36
NoSmoking
Bonjour,
il est IMPERATIF de mettre une hauteur à la DIV conteneur de la carte, dans ton cas le 100% ne veut rien dire son parent n'ayant pas de hauteur définie.

Mets donc à minima dans ta page le CSS suivant
Code:

1 2 3 html, body{ height:100%; }
:faq: Google Maps
02/08/2012, 16h56
julia_m

Merci super sympa de ta réponse. Est-il possible de charger directement la carte de Paris?

Il n'existe pas à proprement parler de carte de PARIS.

Il te suffit de mettre comme position du centre de la carte les coordonnées du centre de PARIS et de mettre une valeur de zoom cohérente avec ce que tu souhaites affiché et ce compte tenu de la dimension de la carte.

exemple:

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<title>Google Map API V3</title>
<style type="text/css">
html,body {
  height:100%;
  margin:0;
  padding:
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
window.onload = function(){
  var centre = new google.maps.LatLng( 48.86, 2.345);
  var myOptions = {
    'zoom': 13,
    'center': centre,
    'mapTypeId': google.maps.MapTypeId.ROADMAP
  };
  var myMap = new google.maps.Map(
    document.getElementById('map'),
    myOptions
  );
  var marqueur = new google.maps.Marker({
    'position': centre,
    'map': myMap
  });
};
</script>
</head>
<body>
  <div id="map" style="width:100%; height:100%"></div>
</body>
</html>