11548 sujets

JavaScript, DOM et API Web HTML5

Aide pour migrer de googlemapAPIV2 à googlemapAPIV3

Bonjour
j'ai une petite problème et j’espère que quelqu’un m'aider,
mon code permet de faire apparaitre la position du marqueur chaque 5 secondes , et tout ça est développer en APIV2 et je veux le rendre en APIV3
j'essaye plusieurs fois mais malheureusement pas de résultat :s
et je suis bloquée depuis un long temps voilà le code originale qui est développé en API V2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Map test</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAv4Q1uOL3I9E3TMXuNfqmXBRRw9x0kUfjFXPT2tErDgxsEiV9kBTnoBxFJsfq0eepyG_GRzWVf7HqTg"
      type="text/javascript"></script> 
    <script type="text/javascript"> 
 
    //<![CDATA[
 
 	<?php
//ouverture de la connexion à la base de données
$connexion=mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("markers",$connexion) or die(mysql_error());

//la requête pour obtenir la liste des points
$result = mysql_query("SELECT lattitude ,longitude FROM listePoints order by id");

//récupération de tous les points pour les mettre dans une table façon JavaScript
$listeDesPoints='';
while($row = mysql_fetch_array($result)){
  if($listeDesPoints!='') $listeDesPoints.=','; //ajoute la virgule de séparation des points
  $listeDesPoints.='{ lat:'.$row{'lattitude'}.', lng:'.$row['longitude'].'}';
}
//et voilà $listeDesPoints est prêt à être affiché dans le script

//on ferme la connexion à la base de données
mysql_close($connexion);
?>
 
 
 
// Bus locations
var data = [
<?php echo $listeDesPoints; ?>
];
 
var map = null;
var route = null;
var busMarker = null;
var point = null;
var count = 0;
var delay = 2000;
var loops = 5;


 

 
function load() {
  if (GBrowserIsCompatible()) {
  map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(-41.217573, 174.831952), 15);
 
  addBusStops();
 
  var point = new GLatLng(data[count].lat, data[count].lng);
  busMarker = new GMarker(point);
  map.addOverlay(busMarker);
//GLog.write("load " + busMarker.GetLatLng);
 

 
 
 
  route = setTimeout("moveTheBus()", 5000);
  }
 }
 
function addBusStops() {
<?php
$listeDesPoints='';
while($row = mysql_fetch_array($result))
{
  if($listeDesPoints!='') $listeDesPoints.=','; 
  $listeDesPoints='['.$row['lattitude'].', '.$row['longitude'].']';
}
?>


 }
 
 function moveTheBus() {
  count++;
  if(count > data.length - 1) {
  
  
	count = 0;
	loops--;
  }
 
 
 
 
//GLog.write("move the marker to " + data[count].lat + ", " + data[count].lng);
//GLog.write("busMarker before move = " + busMarker.getLatLng());
  point = new GLatLng(data[count].lat, data[count].lng);

  busMarker.setLatLng(point); 
//GLog.write("busMarker after move = " + busMarker.getLatLng());
 
  if (loops > 0)
  {
	route = setTimeout("moveTheBus()", delay);
  }
}	
		
	//]]>
    </script> 
  </head> 
  <body onload="load()" onunload="GUnload()"> 
    <div id="map" style="width: 800px; height: 800px"></div> 
  </body> 
</html>


et voilà mon code que j'ai tester :


<html lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>Google Map API V3</title>
	<link type="text/css" href="style.css" rel="stylesheet" />
	
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
	

		<?php
//ouverture de la connexion à la base de données
$connexion=mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("markers",$connexion) or die(mysql_error());

//la requête pour obtenir la liste des points
$result = mysql_query("SELECT lattitude ,longitude FROM listePoints order by id");

//récupération de tous les points pour les mettre dans une table façon JavaScript
$listeDesPoints='';
while($row = mysql_fetch_array($result)){
  if($listeDesPoints!='') $listeDesPoints.=','; //ajoute la virgule de séparation des points
  $listeDesPoints.='{ lat:'.$row{'lattitude'}.', lng:'.$row['longitude'].'}';
}
//et voilà $listeDesPoints est prêt à être affiché dans le script

//on ferme la connexion à la base de données
mysql_close($connexion);
?>
		
		
		
		var liste_des_points=[
 <?php echo $listeDesPoints; ?>];
 
 
 var map = null;
var route = null;
var busMarker = null;
var point = null;
var count = 0;
var delay = 2000;
var loops = 5;
		
		
	
	window.onload = function() {
		// Cinéma Pathé Bellecour
		var myLatlng = new google.maps.LatLng(-41.217678,174.832596);
		
		// Carte centrée sur le cinéma
		var myMapOptions = {
			zoom: 16,
			center: myLatlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};

		// Création de la carte
		var myMap = new google.maps.Map(
			document.getElementById('map'),
			myMapOptions
			);
		
		
		
		 addBusStops();
 
  var point = new google.maps.LatLng(liste_des_points[count].lat, liste_des_points[count].lng);
  busMarker = new google.maps.Marker(point);
  map.addOverlay(busMarker);
//GLog.write("load " + busMarker.GetLatLng);
 

 
 
 
  route = setTimeout("moveTheBus()", 5000);
  }
		
 
  
function addBusStops() {
<?php
$listeDesPoints='';
while($row = mysql_fetch_array($result))
{
  if($listeDesPoints!='') $listeDesPoints.=','; 
  $listeDesPoints='['.$row['lattitude'].', '.$row['longitude'].']';
}
?>


 }
		
		// Création de l'icône
		var myMarkerImage = new google.maps.MarkerImage('map-marker.png');
		
		
		
		var i=0,
            li=liste_des_points.length;
while(i<li){ 
  new google.maps.Marker({
          position: new google.maps.LatLng(liste_des_points[i][0], liste_des_points[i][1]),
          map: myMap,
          title: "Marqueur-"+i,
          icon: myMarkerImage
     });
  i++;
}
		
		
	 
 function moveTheBus() {
  count++;
  if(count > liste_des_points.length - 1) {
  
  
	count = 0;
	loops--;
  }
 
 
 
 
//GLog.write("move the marker to " + data[count].lat + ", " + data[count].lng);
//GLog.write("busMarker before move = " + busMarker.getLatLng());
  point = new google.maps.LatLng(liste_des_points[count].lat, liste_des_points[count].lng);

  busMarker.setLatLng(point); 
//GLog.write("busMarker after move = " + busMarker.getLatLng());
 
  if (loops > 0)
  {
	route = setTimeout("moveTheBus()", delay);
  }
	
	
	}
	</script>
</head>
<body>
	<div id="map">
	</div>
</body>
</html>

et voilà mon fichier sql :
-- phpMyAdmin SQL Dump
-- version 3.3.9
--  http://www.phpmyadmin.net
 
--
-- Serveur: localhost
-- Généré le : Jeu 19 Avril 2012 à 11:57
-- Version du serveur: 5.5.8
-- Version de PHP: 5.3.5

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Base de données: `markers`
--

-- --------------------------------------------------------

--
-- Structure de la table `listepoints`
--

CREATE TABLE IF NOT EXISTS `listepoints` (
  `id` int(111) NOT NULL,
  `lattitude` varchar(111) NOT NULL,
  `longitude` varchar(111) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Contenu de la table `listepoints`
--

INSERT INTO `listepoints` (`id`, `lattitude`, `longitude`) VALUES
(2, '-41.217678', '174.832596 '),
(3, '-41.217177', '174.832939'),
(4, '-41.216669', '174.832209'),
(5, '-41.215636', '174.831887'),
(6, '-41.214667', '174.832124'),
(7, '-41.214094', '174.831930'),
(8, '-41.214490', '174.830793'),
(9, '-41.215023', '174.829999');



Merci de votre aide. [/i][/i]
Modifié par mreiwa (21 Apr 2012 - 09:53)
mreiwa,

juste une idée : peux-tu te suffire à rédiger en long dans ton <head> le script que tu appelles auprès de Google ?
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>


En fait, que vient y faire la mention ?sensor=false et n'est-elle pas une contradiction avec ce que tu espères ?
Sujet clos
Aller à