implémentation de l'API Google map

**julia_m** · 02/08/2012, 16h49

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 javascript :

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
<%@ 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>

**NoSmoking** · 02/08/2012, 17h36

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 css :

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

1
2
3
html, body{
  height:100%;
}

Google Maps

**julia_m** · 02/08/2012, 17h56

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

**NoSmoking** · 02/08/2012, 23h37

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 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
<!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>

implémentation de l'API Google map [Google Maps]

APIs Google

Discussions similaires

Partager

Partager