mousescroll dans iframe pour kml

**loic_nantais** · 02/01/2013, 19h21

Bonjour et bonne année à tous

j'ai créé une carte sur google map , j'ai copie le lien dans la balise iframe fournit par google.

lorsque je colle ce lien j ai bien ma carte qui apparait , mais par contre le zoom ne marche plus avec la souris, et dans iframe apparemment scrollwheel ne marche pas

du coup j'ai essaye de me passer d'iframe en suivant la FAQ ici même , par contre je ne sais pas ou incorporer le lien de ma carte dans le code ci dessous,

donc ma question est comment avoir le scrollwheel dans l'iframe ou bien comment faire charger mon lien de ma carte dans le code ci dessous, vu que dans celle la le zoom fonctionne,

j’espère être clair ,

merci

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta name="viewport"
 content="initial-scale=1.0, user-scalable=no">
  <meta http-equiv="Content-Type"
 content="text/html; charset=UTF-8">
  <title>[GoogleMaps API V3] Insertion d'une Carte</title>
  <style type="text/css">
#div_carte {
height : 700px; /* IMPERATIF */
width : 1100px;
margin : auto;
border : 1px solid #888;
}
  </style>
  <script type="text/javascript"
 src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
function initCarte(){
// cr�ation de la carte
var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
'center' : new google.maps.LatLng( 46.80, 1.70),
'zoom' : 2,
'mapTypeId' : google.maps.MapTypeId.SATELLITE
});
}
// init lorsque la page est charg�e
google.maps.event.addDomListener( window, 'load', initCarte);
  </script>
</head>
<body>
<h1>Titre de la carte</h1>
<div id="div_carte"></div>
</body>
</html>

**NoSmoking** · 02/01/2013, 20h18

Bonjour et bienvenue sur DVP.

L'iframe et la carte contenue mise à disposition par Google est visiblement "bridée" et plus proche de la version 2 qu'autre chose.

Dans le code de l'IFRAME que tu as récupéré il te faut mettre les informations de latLng et zoom à minima dans le code.

- récupération latLng : ll=48.856614,2.352222.
- récupération du zoom : z=12.

ce qui donnes

Code :

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

1
2
3
4
5
var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
    'center' : new google.maps.LatLng( 48.856614,2.352222),
    'zoom' : 12,
    'mapTypeId' : google.maps.MapTypeId.SATELLITE
  });

**loic_nantais** · 02/01/2013, 20h59

merci , mais c est moi qui est regle le zoom à 2,

j ai une carte avec de multiples marques dessus , mais je ne sais pas ou incorporer l adresse de cette carte , pour l instant j ai une carte vierge

**NoSmoking** · 02/01/2013, 21h36

Je crois que le plus simple serait que tu nous fournisses le code, l’adresse, que tu as récupérée, pour que l'on se fasse une idée un peu plus précise.

**loic_nantais** · 02/01/2013, 22h03

oui c est clair j aurais du le faire

donc ma page avec la carte : ici

le lien de la carte là

le scrollwheel disparait une fois que c est insere dans la page c est pour ca que je voulais utiliser le code de mon premier message pour inserer la carte

merci en tout cas de l aide

**NoSmoking** · 02/01/2013, 22h38

Compris ton soucis, tu veux afficher un fichier KML qui se trouve chez Google.

cela pourrait donner ceci

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport"
content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<title>Itinéraire d'un enfant gâté ;O)</title>
<style type="text/css">
#div_carte {
  height : 700px; /* IMPERATIF */
  width : 1100px;
  margin : auto;
  border : 1px solid #888;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initCarte(){
  // la référence de ton fichier
  var refKML = 'https://maps.google.fr/maps/ms?ie=UTF8&t=h&source=embed)&msa=0&output=kml&msid=213707154236818715845.0004cac24297b00d9fd71';
  // création de la carte
  var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
      'center' : new google.maps.LatLng( 48.856614,2.352222),
      'zoom' : 2,
      'mapTypeId' : google.maps.MapTypeId.SATELLITE
    });
  // création du layer
  var oKmlLayer = new google.maps.KmlLayer( refKML,{
      'map': oMap
    });
}
// init lorsque la page est chargée
google.maps.event.addDomListener( window, 'load', initCarte);
</script>
</head>
<body>
  <h1>Itinéraire d'un enfant gâté ;O)</h1>
  <div id="div_carte"></div>
</body>
</html>

**loic_nantais** · 03/01/2013, 22h44

oui desole pour la faute de langage entre kml et carte lol , je fais l essai et je mettrai le résultat

merci

**loic_nantais** · 04/01/2013, 09h42

Merci ca fonctionne tres bien ,tu me pardonnes si j ai enlevé ton petit clin d oeil dans le titre

mousescroll dans iframe pour kml [Google Maps]

APIs Google

Discussions similaires

Partager

Partager