Probleme d'affichage de code html

Fermé
eleveing Messages postés 73 Date d'inscription jeudi 30 août 2012 Statut Membre Dernière intervention 27 février 2014 - 12 juil. 2013 à 14:42
eleveing Messages postés 73 Date d'inscription jeudi 30 août 2012 Statut Membre Dernière intervention 27 février 2014 - 13 juil. 2013 à 01:52
Bonjour tout le monde,

svp, j ai besoin de votre aide dans ce code !!quand je lance la page index.html suivante :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Google Map Api v3</title>
<link rel="stylesheet" href="jquery-ui-1.8.12.custom.css" type="text/css" />
</head>
<style type="text/css">
#container{position:relative;width:990px;margin:auto;}
#container #map{width:500px;height:500px;margin:auto;}
</style>
<body>
<div id="container">
<div id="map">
<p>Veuillez patienter pendant le chargement de la carte...</p>
</div>
</div>

<!-- Include Javascript -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="functions.js"></script>
</body>
</html>

ca m'affiche juste le phrase:Veuillez patienter pendant le chargement de la carte...

pour la fonction "functions.js":
var map;
var initialize;

initialize = function(){
var latLng1 = new google.maps.LatLng1(50.6371834, 3.063017400000035); // Correspond au coordonnées de Lille
var latLng2 = new google.maps.LatLng2(50.6371850, 3.063017400000011); // Correspond au coordonnées de Lille
var myOptions1 = {
zoom : 14, // Zoom par défaut
center : latLng1, // Coordonnées de départ de la carte de type latLng
mapTypeId : google.maps.MapTypeId.TERRAIN, // Type de carte, différentes valeurs possible HYBRID, ROADMAP, SATELLITE, TERRAIN
maxZoom : 20
};
var myOptions2 = {
zoom : 14, // Zoom par défaut
center : latLng2, // Coordonnées de départ de la carte de type latLng
mapTypeId : google.maps.MapTypeId.TERRAIN, // Type de carte, différentes valeurs possible HYBRID, ROADMAP, SATELLITE, TERRAIN
maxZoom : 20
};

map = new google.maps.Map(document.getElementById('map'), myOptions1);
map = new google.maps.Map(document.getElementById('map'), myOptions2);

var marker1 = new google.maps.Marker1({
position : latLng1,
map : map,
title : "Lille"
//icon : "marker_lille.gif" // Chemin de l'image du marqueur pour surcharger celui par défaut
});
var marker2 = new google.maps.Marker2({
position : latLng2,
map : map,
title : "Lille2"
//icon : "marker_lille.gif" // Chemin de l'image du marqueur pour surcharger celui par défaut
});


var contentMarker1 = [
'<div id="containerTabs">',
'<div id="tabs">',
'<ul>',
'<li><a href="#tab-1"><span>Lorem</span></a></li>',
'<li><a href="#tab-2"><span>Ipsum</span></a></li>',
'<li><a href="#tab-3"><span>Dolor</span></a></li>',
'</ul>',
'<div id="tab-1">',
'<h3>Lille</h3><p>Suspendisse quis magna dapibus orci porta varius sed sit amet purus. Ut eu justo dictum elit malesuada facilisis. Proin ipsum ligula, feugiat sed faucibus a, <a href="https://www.google.fr/?gws_rd=ssl">google</a> sit amet mauris. In sit amet nisi mauris. Aliquam vestibulum quam et ligula pretium suscipit ullamcorper metus accumsan.</p>',
'</div>',
'<div id="tab-2">',
'<h3>Aliquam vestibulum</h3><p>Aliquam vestibulum quam et ligula pretium suscipit ullamcorper metus accumsan.</p>',
'</div>',
'<div id="tab-3">',
'<h3>Pretium suscipit</h3><ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li><li>Amectus</li></ul>',
'</div>',
'</div>',
'</div>'
].join('');
var contentMarker2 = [
'<div id="containerTabs">',
'<div id="tabs">',
'<ul>',
'<li><a href="#tab-1"><span>Lorem</span></a></li>',
'<li><a href="#tab-2"><span>Ipsum</span></a></li>',
'<li><a href="#tab-3"><span>Dolor</span></a></li>',
'</ul>',
'<div id="tab-1">',
'<h3>Lille</h3><p>Suspendisse quis magna dapibus orci porta varius sed sit amet purus. Ut eu justo dictum elit malesuada facilisis. Proin ipsum ligula, feugiat sed faucibus a, <a href="https://www.google.fr/?gws_rd=ssl">google</a> sit amet mauris. In sit amet nisi mauris. Aliquam vestibulum quam et ligula pretium suscipit ullamcorper metus accumsan.</p>',
'</div>',
'<div id="tab-2">',
'<h3>Aliquam vestibulum</h3><p>Aliquam vestibulum quam et ligula pretium suscipit ullamcorper metus accumsan.</p>',
'</div>',
'<div id="tab-3">',
'<h3>Pretium suscipit</h3><ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li><li>Amectus</li></ul>',
'</div>',
'</div>',
'</div>'
].join('');

var infoWindow1 = new google.maps.InfoWindow1({
content : contentMarker1,
position : latLng1
});
var infoWindow2 = new google.maps.InfoWindow2({
content : contentMarker2,
position : latLng2
});
google.maps.event.addListener(marker1, 'click', function() {
infoWindow1.open(map,marker1);
});
google.maps.event.addListener(marker2, 'click', function() {
infoWindow2.open(map,marker2);
});
google.maps.event.addListener(infoWindow1, 'domready', function(){ // infoWindow est biensûr notre info-bulle
jQuery("#tabs").tabs();
});
};

initialize();
A voir également:

1 réponse

Thorak83 Messages postés 1051 Date d'inscription jeudi 20 juin 2013 Statut Membre Dernière intervention 22 décembre 2017 156
12 juil. 2013 à 15:10
Bonjour,
l'erreur est dans le fichier fonction.js
var latLng1 = new google.maps.LatLng1(...
c'est plutot :
var latLng1 = new google.maps.LatLng(...

Cordialement
1
eleveing Messages postés 73 Date d'inscription jeudi 30 août 2012 Statut Membre Dernière intervention 27 février 2014 1
13 juil. 2013 à 01:52
Merci pour votre reponse !!
0