Le portail francophone de la géomatique

vince240986 · Wed 16 March 2011 18:41

Bonjour,

Voilà plusieurs jours que je bloque sur la création d'une fonction.

L'idée est la suivante, j'ai crée une appli avec une base de données et back office pour alimenter cette dernière.

En front office tout va bien, les marqueurs apparaissent correctement et le contenu de l'infobulle est présent aussi.

Toutefois, je souhaiterais qu'à la place de cette infobulle, au clic sur le marqueur, apparaisse le contenu sous la carte en Ajax (pour pouvoir recharger les informations dynamiquement en cliquant sur chaque marqueur).

Alors j'ai lu des quantités de posts, des bouquins mais je ne parviens pas au résultat escompté.

Voici un exemple sous cakephp de ce que je souhaite faire, sans passer pour autant par ce framework: (http://www.grafikart.fr/tutoriels/google-maps-api-141), et un autre utilisant l'API V2 (http://www.dougv.com/demo/ajax_google_maps_detaildiv).

Merci par avance à quiconque m'apportera son aide, parceque le javascript me pose quelques soucis quand même !

Voici le code source de mon fichier index.php:

Code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="admin/style.css" />
<title>Test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

function createXmlHttpRequest() {
try {
if (typeof ActiveXObject != 'undefined') {
return new ActiveXObject('Microsoft.XMLHTTP');
} else if (window["XMLHttpRequest"]) {
return new XMLHttpRequest();
}
} catch (e) {
changeStatus(e);
}
return null;
};

function downloadUrl(url, callback) {
var status = -1;
var request = createXmlHttpRequest();
if (!request) {
return false;
}

request.onreadystatechange = function() {
if (request.readyState == 4) {
try {
status = request.status;
} catch (e) {
}
if (status == 200) {
callback(request.responseText, request.status);
request.onreadystatechange = function() {};
}
}
}
request.open('GET', url, true);
try {
request.send(null);
} catch (e) {
changeStatus(e);
}
};

function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}

var map;

function initialize() {
  var latlng = new google.maps.LatLng(46.7, 2.5);
  var myOptions = {
   zoom: 5,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

  downloadUrl("getPoi.php", function(data) {

   var xml = xmlParse(data);
   var markers = xml.documentElement.getElementsByTagName("marker");
  
   for (var i = 0; i < markers.length; i++) {
    createMarker(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")), markers[i].getAttribute('titre'), markers[i].getAttribute('description'));
   }
  });

}

function createMarker(lat, lng, titre, description){
  var latlng = new google.maps.LatLng(lat, lng);
  var marker = new google.maps.Marker({
   position: latlng,
   map: map,
   title: titre
  });
 
  var infobulle = new google.maps.InfoWindow({
   content: description
  });

  google.maps.event.addListener(marker, 'click', function(){
   infobulle.open(map, marker);
  });

}

</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<div id="content_map">
Ici le contenu dynamique doit apparaitre
</div>
</body>
</html>

vince240986 · Sat 19 March 2011 11:43

Problème résolu:

Code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<title>Test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

function createXmlHttpRequest() {
    try {
        if (typeof ActiveXObject != 'undefined') {
            return new ActiveXObject('Microsoft.XMLHTTP');
        } else if (window["XMLHttpRequest"]) {
            return new XMLHttpRequest();
        }
    } catch (e) {
        changeStatus(e);
    }
    return null;
};

function downloadUrl(url, callback) {
    var status = -1;
    var request = createXmlHttpRequest();
    if (!request) {
        return false;
    }

    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            try {
                status = request.status;
            } catch (e) {
            }
            if (status == 200) {
                callback(request.responseText, request.status);
                request.onreadystatechange = function() {};
            }
        }
    }
    request.open('GET', url, true);
    try {
        request.send(null);
    } catch (e) {
        changeStatus(e);
    }
};

function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') { 
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}

 var map;

 function initialize() {
  var latlng = new google.maps.LatLng(46.7, 2.5);
  var myOptions = {
   zoom: 5,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

  downloadUrl("getPoi.php", function(data) { 

   var xml = xmlParse(data);
   var markers = xml.documentElement.getElementsByTagName("marker");
   
   for (var i = 0; i < markers.length; i++) {
    createMarker(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")), markers[i].getAttribute('titre'), markers[i].getAttribute('description'));
   }
  });

 }

 function createMarker(lat, lng, titre, description){
  var latlng = new google.maps.LatLng(lat, lng);
  var marker = new google.maps.Marker({
   position: latlng,
   map: map,
   title: titre
  });
  
  var infobulle = new google.maps.InfoWindow({
   content: titre
  });

google.maps.event.addListener(marker, 'click', function(event) {
$('#content_map').html(<?php echo 'description' ?>);
   infobulle.open(map, marker);
});

 }

</script>
</head>
<body onload="initialize()">
 <div id="page">
 <div id="dpt">
 contenu left
 </div>
 <div id="map_canvas"></div>
 <div id="content_map">
Détails
 </div>
 </div>
</body>
</html>

Bruno · Sat 19 March 2011 14:19

Bonjour Vincent,

Merci pour le suivi.
Je note que tu n'as pas eu plus de succès sur le forum dédié de Google Maps (en français).
http://www.google.com/support/forum/p/m … &hl=fr

Bruno

vince240986 · Sat 19 March 2011 18:44

Exact mais bon ayant trouvé une solution grâce à une piste fournie ailleurs je partage le résultat, si cela peut aider...

gotcha · Fri 09 December 2011 19:49

Bonjour,

Je parcoure ce forum et d'autres de long en large ainsi que geotribu.net.

J'ai un soucis avec ce code qui est le meme que Vince est qui est tiré du livre de Dunod:

Code:

<!DOCTYPE html>
<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>Développez avec les API Google Maps</title>
<style type="text/css">
 html {
  height: 100%;
 }
 body {
  height: 100%;
  margin: 0px;
  padding: 0px;
 }
 #map_canvas {
  height: 100%;
 }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

function createXmlHttpRequest() {
    try {
        if (typeof ActiveXObject != 'undefined') {
            return new ActiveXObject('Microsoft.XMLHTTP');
        } else if (window["XMLHttpRequest"]) {
            return new XMLHttpRequest();
        }
    } catch (e) {
        changeStatus(e);
    }
    return null;
};

function downloadUrl(url, callback) {
    var status = -1;
    var request = createXmlHttpRequest();
    if (!request) {
        return false;
    }

    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            try {
                status = request.status;
            } catch (e) {
            }
            if (status == 200) {
                callback(request.responseText, request.status);
                request.onreadystatechange = function() {};
            }
        }
    }
    request.open('GET', url, true);
    try {
        request.send(null);
    } catch (e) {
        changeStatus(e);
    }
};

function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') { 
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}

 var map;

 function initialize() {
  var latlng = new google.maps.LatLng(46.7, 2.5);
  var myOptions = {
   zoom: 6,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

  downloadUrl("getPoi.php", function(data) { 

   var xml = xmlParse(data);
   var markers = xml.documentElement.getElementsByTagName("marker");
   
   for (var i = 0; i < markers.length; i++) {
    createMarker(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")), markers[i].getAttribute('titre'), markers[i].getAttribute('description'));
   }
  });

 }

 function createMarker(lat, lng, titre, description){
  var latlng = new google.maps.LatLng(lat, lng);
  var marker = new google.maps.Marker({
   position: latlng,
   map: map,
   title: titre
  });

  var infobulle = new google.maps.InfoWindow({
   content: description
  });

  google.maps.event.addListener(marker, 'click', function(){
   infobulle.open(map, marker);
  });

 }

</script>
</head>
<body onload="initialize()">
 <div id="map_canvas" style="width: 100%; height: 100%;"></div>

</body>
</html>

J'ai creer ma table, mon getPoi.php etc.. j'ai tout comme il faut mais les marjers ne s'affichent pas .. je suis en local.

quelqu'un aurait il une idée ?

En vous remerciant

J.

gobbaf · Sat 10 December 2011 10:46

Bonjour,
peut-on avoir le code du fichier getPoi.php et un export de la table qui contient les données ?
Que dit Firebug ou l'outil d'inspection de Chrome : notamment dans la partie réseau (pour voir les liaisons avec le serveur : getPoi.php et le SGBD) ?

L'url de la page : http://www.geotribu.net/dunod/gmaps/dis … index.html

Fabien Goblet
GeoTribu

gotcha · Sat 10 December 2011 10:54

bonjour,
Merci de votre reponse.

Voici le code de getPoi.php:

Code:

<?php
$user = "root";
$password = "xxxx";
$host = "localhost";
$bdd = "geoloc";
mysql_connect($host,$user,$password);
mysql_select_db($bdd) or die("erreur de connexion à la base
de données");
$sql = "SELECT * FROM poi";
$res = mysql_query($sql) or die(mysql_error());
$dom = new DomDocument(’1.0’, ’utf-8’);
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
while ($result = mysql_fetch_array($res)){
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("titre", $result[’titre’]);
$newnode->setAttribute("lat", $result[’latitude’]);
$newnode->setAttribute("lng", $result[’longitude’]);
$newnode->setAttribute("description",
utf8_encode($result[’description’]));
}
$xmlfile = $dom->saveXML();
echo $xmlfile;
?>

et voici ce que contient la table :

Code:

-- phpMyAdmin SQL Dump
-- version 3.4.5
-- http://www.phpmyadmin.net
--
-- Client: 127.0.0.1
-- Généré le : Sam 10 Décembre 2011 à 10:52
-- Version du serveur: 5.5.16
-- Version de PHP: 5.3.8

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!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: `geoloc`
--

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

--
-- Structure de la table `poi`
--

CREATE TABLE IF NOT EXISTS `poi` (
  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `titre` varchar(100) NOT NULL,
  `latitude` double NOT NULL,
  `longitude` double NOT NULL,
  `description` text NOT NULL,
  UNIQUE KEY `id` (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;

--
-- Contenu de la table `poi`
--

INSERT INTO `poi` (`id`, `titre`, `latitude`, `longitude`, `description`) VALUES
(1, 'Mont Saint-Michel', 48.6362, -1.51137, 'Deuxième site touristique\r\nde France'),
(2, 'Le Capitole', 43.60449, 1.44349, 'autre plus belle place du\r\nmonde');

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

J'ai repris exactement les memes données.

en vous remerciant.

gotcha · Sat 10 December 2011 11:10

Quand a firebug, je ne sais que regarder, mais j'ai remarquer cela:

Code:

<br />
<b>Parse error</b>:  syntax error, unexpected T_DNUMBER in <b>C:\Program Files (x86)\EasyPHP-5.3.8.1\www\geoloc\getPoi.php</b> on line <b>11</b><br />

dans firebug

gotcha · Sat 10 December 2011 11:36

J'ai trouvé mon erreur...
Toute bête comme d'habitude..problème de cote...

Utilisations de ` à la place de '........

Désolé pour cette erreur de débutant.. mais quand on a la tête ds le guidon voici ce qui arrive...

En tout cas merci pour la reponse rapide !!!

bon week end

Communauté	Ressources	L'emploi	Le marché	L'association	Fils RSS
Forum Blogs Wiki Planet Sites amis	Agenda Biblio Fiches AMO-CNIG Paris PCGIS Téléchargements	Offres d'emploi Banque de CV Formations Démarche Métiers	Geo-Entreprises Geo-Communiqué Appels d'offres	L'association Qui sommes-nous ? Nous aider Bienfaiteurs Partenaires Historique Statuts	Tout le site Job Géomatique Services GeoBlogs ...	Faire un don Mentions légales

Le portail francophone de la géomatique

#1 Wed 16 March 2011 18:41

Google Maps API V3 - Chargement ajax du contenu d'une DIV click marker

Code:

#2 Sat 19 March 2011 11:43

Re: Google Maps API V3 - Chargement ajax du contenu d'une DIV click marker

Code:

#3 Sat 19 March 2011 14:19

Re: Google Maps API V3 - Chargement ajax du contenu d'une DIV click marker

#4 Sat 19 March 2011 18:44

Re: Google Maps API V3 - Chargement ajax du contenu d'une DIV click marker

#5 Fri 09 December 2011 19:49

Re: Google Maps API V3 - Chargement ajax du contenu d'une DIV click marker

Code:

#6 Sat 10 December 2011 10:46

Re: Google Maps API V3 - Chargement ajax du contenu d'une DIV click marker

#7 Sat 10 December 2011 10:54

Re: Google Maps API V3 - Chargement ajax du contenu d'une DIV click marker

Code:

Code:

#8 Sat 10 December 2011 11:10

Re: Google Maps API V3 - Chargement ajax du contenu d'une DIV click marker

Code:

#9 Sat 10 December 2011 11:36

Re: Google Maps API V3 - Chargement ajax du contenu d'une DIV click marker

Pied de page des forums