Je voudrai savoir si vous pouvez m'aider à résoudre un problème.
Voilà je me sert depuis quelques temps déjà de google map pour afficher les adhérents de notre association sur notre site et depuis quelques jours sur 150 inscrits il n'y en à qu'une dizaine qui s'affiche et pour voir le reste il faut faire F5 autant de fois que nécessaire pour actualiser la page et voir apparaître les autres membres.
Vous pouvez voir la page ICI
ma page map est celle ci:
CODE
<html>
<head>
<title>Localisation des Adhérents de l'ADGCP-63</title>
</head>
<body>
<div id="map" style="border: 1px solid #979797; background-color: #e5e3df; width: 560px; height: 500px; margin: auto; margin-top: 2em; margin-bottom: 2em"><div style="padding: 1em; color: gray">Chargement en cours, patientez SVP...</div></div>
<script src="http://maps.google.com/maps?file=api&v=2&key=****" type="text/javascript"></script>
<script src="https://www.adgcp-63.com/map/javascript.js" type="text/javascript"></script>
<script type="text/javascript">
gmap = new gMap3rd("map");
gmap.addLargeMapControl();
gmap.enableScrollWheelZoom();
gmap.centerMapToFrance(9);
gmap.loadMarkersFromXml("https://www.adgcp-63.com/map/listing_adherents_map_par_lieu_de_garderie_regroupe.xml", true);
</script>
<font size="2" color="#0000FF">Si il y a moins de 100 markers </font><font color="#0000FF"><img src="/map/images/mm_20_red.png" width="12" height="20" align="absmiddle"><font size="2">
d'affichés, appuyer sur<font color="#FF0000"> F5</font> pour actualiser
la page</font>.</font>
</body>
</html>
<head>
<title>Localisation des Adhérents de l'ADGCP-63</title>
</head>
<body>
<div id="map" style="border: 1px solid #979797; background-color: #e5e3df; width: 560px; height: 500px; margin: auto; margin-top: 2em; margin-bottom: 2em"><div style="padding: 1em; color: gray">Chargement en cours, patientez SVP...</div></div>
<script src="http://maps.google.com/maps?file=api&v=2&key=****" type="text/javascript"></script>
<script src="https://www.adgcp-63.com/map/javascript.js" type="text/javascript"></script>
<script type="text/javascript">
gmap = new gMap3rd("map");
gmap.addLargeMapControl();
gmap.enableScrollWheelZoom();
gmap.centerMapToFrance(9);
gmap.loadMarkersFromXml("https://www.adgcp-63.com/map/listing_adherents_map_par_lieu_de_garderie_regroupe.xml", true);
</script>
<font size="2" color="#0000FF">Si il y a moins de 100 markers </font><font color="#0000FF"><img src="/map/images/mm_20_red.png" width="12" height="20" align="absmiddle"><font size="2">
d'affichés, appuyer sur<font color="#FF0000"> F5</font> pour actualiser
la page</font>.</font>
</body>
</html>
La carte est renseignée par un fichier xml dont voici un extrait:
CODE
<data>
<markers>
<marker>
<name>Franck</name>
<locality>63 xxxxx</locality>
</marker>
<marker>
<name>Patrick</name>
<locality>63 Royat</locality>
</marker>
<marker>
<name>Philippe</name>
<locality>63 Le-Vernet-Sainte-Marguerite</locality>
</marker>
</markers>
</data>
<markers>
<marker>
<name>Franck</name>
<locality>63 xxxxx</locality>
</marker>
<marker>
<name>Patrick</name>
<locality>63 Royat</locality>
</marker>
<marker>
<name>Philippe</name>
<locality>63 Le-Vernet-Sainte-Marguerite</locality>
</marker>
</markers>
</data>
Et le fichier javascript inclu:
CODE
var geocoder = new GClientGeocoder();
var defaultIcon = "mini";
function gMap3rd (idDiv) {
var map = null;
var cleanMarkersOnNewLoading = true;
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById(idDiv));
}
else
{
alert("Your browser is not compatible with Google MAP");
}
/**********************************************
* some stuff to add controls to the map
***********************************************/
this.addLargeMapControl = function ()
{
map.addControl(new GLargeMapControl());
}
this.addSmallMapControl = function ()
{
map.addControl(new GSmallMapControl());
}
this.addMapTypeControl = function ()
{
map.addControl(new GMapTypeControl());
}
this.enableScrollWheelZoom = function ()
{
map.enableScrollWheelZoom();
}
this.disableScrollWheelZoom = function ()
{
map.disableScrollWheelZoom();
}
this.addScaleControl = function ()
{
map.addControl(new GScaleControl());
}
this.addOverviewControl = function ()
{
map.addControl(new GOverviewMapControl());
}
/**********************************************
* centering Map to predefined point
* and for selected zoom
***********************************************/
this.centerMapToFrance = function (zoom)
{
var centerPoint = new GLatLng(45.7833333, 3.0833333);
map.setCenter(centerPoint, zoom);
}
this.centerMapToCrimea = function (zoom)
{
var centerPoint = new GLatLng(44.57873024377564, 37.15576171875);
map.setCenter(centerPoint, zoom);
}
/**********************************************
* setting type of the map
***********************************************/
this.setNormalView = function () {
map.setMapType(G_NORMAL_MAP);
}
this.setSatelliteView = function () {
map.setMapType(G_SATELLITE_MAP);
}
/**********************************************
* Other map stuff
***********************************************/
this.cleanMap = function ()
{
map.clearOverlays();
}
this.setAutoRefreshTime = function (time)
{
autoRefresh = time;
}
/**********************************************
* load markers from XML Files
***********************************************/
this.loadMarkersFromXml = function (url)
{
// prepare ajax stuff
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// ajax callback
xhr.onreadystatechange = function () { displayMarkersFromXmlAjaxResult(xhr, map, cleanMarkersOnNewLoading) };
// get XML Content
xhr.open("GET", url, true);
xhr.send(null);
}
/**********************************************
* XML cleaner
***********************************************/
go = function ©
{
if(!c.data.replace(/\s/g,''))
{
c.parentNode.removeChild©;
}
}
clean = function (d)
{
var bal=d.getElementsByTagName('*');
for(i=0;i<bal.length;i++){
a=bal[i].previousSibling;
if(a && a.nodeType==3)
go(a);
b=bal[i].nextSibling;
if(b && b.nodeType==3)
go(b);
}
return d;
}
/**********************************************
* return formated string for marker message box
***********************************************/
getMarkerMessage = function(message, lat, lng, search)
{
var htmlMessage = '';
htmlMessage += '<span style="color: #0000FF;">';
htmlMessage += message;
if (search != "")
{
htmlMessage += '<br />'+search;
}
if (lat != "")
{
htmlMessage += '<br /><strong>Latitude:</strong> '+lat;
}
if (lng != "")
{
htmlMessage += '<br /><strong>Longitude:</strong> '+lng;
}
htmlMessage += '</span>';
return htmlMessage;
}
/**********************************************
* create & display default marker to the map
* for specified location or coordinates
***********************************************/
this.addMarker = function (markerName, search, lat, lng)
{
//alert(search);
if (search != "") {
geocoder.getLatLng(search,
function(point) {
if (point) {
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(marker, "click",
function() {
marker.openInfoWindowHtml( getMarkerMessage(markerName, point.x, point.y, search) );
});
}
});
} else {
var point = new GLatLng(lat, lng);
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(marker, "click",
function() {
marker.openInfoWindowHtml( getMarkerMessage(markerName, lat, lng, "") );
});
}
}
/**********************************************
* get/create icon by name
***********************************************/
getIconByName = function (iconName)
{
if (iconName == "default")
{
return G_DEFAULT_ICON;
}
else if (iconName == "mini")
{
// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "https://www.adgcp-63.com/map/images/mm_20_red.png";
icon.shadow = "https://www.adgcp-63.com/map/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
return icon;
}
else if (iconName == "aircraft_red")
{
// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "https://www.adgcp-63.com/map/images/aircraft_red.png";
icon.shadow = "https://www.adgcp-63.com/map/images/mm_20_shadow.png";
icon.iconSize = new GSize(11, 14);
icon.shadowSize = new GSize(22, 15);
icon.iconAnchor = new GPoint(11, 14);
icon.infoWindowAnchor = new GPoint(5, 1);
return icon;
}
else if (iconName == "aircraft_blue")
{
// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "https://www.adgcp-63.com/map/images/aircraft_blue.png";
icon.shadow = "https://www.adgcp-63.com/map/images/mm_20_shadow.png";
icon.iconSize = new GSize(11, 14);
icon.shadowSize = new GSize(22, 15);
icon.iconAnchor = new GPoint(11, 14);
icon.infoWindowAnchor = new GPoint(5, 1);
return icon;
}
else
{
return G_DEFAULT_ICON;
}
}
/**********************************************
* create & display default marker to the map
* for specified location or coordinates
* do not call directly
***********************************************/
createMarker = function (map, markerMessage, search, lat, lng, iconName)
{
//alert(search);
var icon = getIconByName(iconName);
if (search != "") {
geocoder.getLatLng(search,
function(point) {
if (point) {
var marker = new GMarker(point, icon);
map.addOverlay(marker);
GEvent.addListener(marker, "click",
function() {
marker.openInfoWindowHtml( getMarkerMessage(markerMessage, point.x, point.y, search) );
});
}
});
} else {
var point = new GLatLng(lat, lng);
var marker = new GMarker(point, icon);
map.addOverlay(marker);
GEvent.addListener(marker, "click",
function() {
marker.openInfoWindowHtml( getMarkerMessage(markerMessage, lat, lng, "") );
});
}
}
/**********************************************
* display markers from ajax xml result
***********************************************/
displayMarkersFromXmlAjaxResult = function (xhr, map, clearMarkers)
{
// display only when ready
if (xhr.readyState==4 && xhr.status == 200)
{
// shall we clean map from markers ?
if (clearMarkers == true)
{
map.clearOverlays();
}
// load & clean XML
var docXML = clean(xhr.responseXML.documentElement);
var markers = docXML.getElementsByTagName("markers");
// loop markers
for (var i = 0; i < markers.length; i++)
{
var markerList = markers.item(i).childNodes;
// loop marker
for (var j = 0; j < markerList.length; j++)
{
// get childNodes of marker
var marker = markerList.item(j);
if (marker.nodeName == "marker")
{
var nodeList = markerList.item(j).childNodes;
var locality = "";
var markerName = "";
var lat = null;
var lng = null;
var iconName = defaultIcon;
var alt = "";
var country = "";
var heading = "";
// parse all childNodes and add marker
for (var k = 0; k < nodeList.length; k++)
{
var node = nodeList.item(k);
// Name of the member
if (node.nodeName == "name") {
markerName = node.firstChild.nodeValue;
}
// Lat position
if (node.nodeName == "lat") {
lat = node.firstChild.nodeValue;
}
// Long position
if (node.nodeName == "long") {
lng = node.firstChild.nodeValue;
}
// Get latlng by locality ?
if (node.nodeName == "locality") {
locality = node.firstChild.nodeValue;
}
// Icon Name
if (node.nodeName == "icon") {
iconName = node.firstChild.nodeValue;
}
// Lockon stuff: altitude
if (node.nodeName == "alt") {
alt = node.firstChild.nodeValue;
}
// Lockon stuff: country
if (node.nodeName == "country") {
country = node.firstChild.nodeValue;
}
// Lockon stuff: heading
if (node.nodeName == "heading") {
heading = node.firstChild.nodeValue;
}
}
var message = '<strong>' + markerName+ '</strong>';
if (country != "") { message += '<br /><strong>Country:</strong> '+country+' <img src="https://www.www.adgcp-63.com/map/images/'+country+'.gif" />'; }
if (alt != "") { message += '<br /><strong>Altitude:</strong> '+alt+'m'; }
if (heading != "") { message += '<br /><strong>Heading:</strong> '+heading+'°'; }
createMarker(map, message, locality, lat, lng, iconName);
}
} // loop marker
} // lopp markers
}
}
}
var defaultIcon = "mini";
function gMap3rd (idDiv) {
var map = null;
var cleanMarkersOnNewLoading = true;
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById(idDiv));
}
else
{
alert("Your browser is not compatible with Google MAP");
}
/**********************************************
* some stuff to add controls to the map
***********************************************/
this.addLargeMapControl = function ()
{
map.addControl(new GLargeMapControl());
}
this.addSmallMapControl = function ()
{
map.addControl(new GSmallMapControl());
}
this.addMapTypeControl = function ()
{
map.addControl(new GMapTypeControl());
}
this.enableScrollWheelZoom = function ()
{
map.enableScrollWheelZoom();
}
this.disableScrollWheelZoom = function ()
{
map.disableScrollWheelZoom();
}
this.addScaleControl = function ()
{
map.addControl(new GScaleControl());
}
this.addOverviewControl = function ()
{
map.addControl(new GOverviewMapControl());
}
/**********************************************
* centering Map to predefined point
* and for selected zoom
***********************************************/
this.centerMapToFrance = function (zoom)
{
var centerPoint = new GLatLng(45.7833333, 3.0833333);
map.setCenter(centerPoint, zoom);
}
this.centerMapToCrimea = function (zoom)
{
var centerPoint = new GLatLng(44.57873024377564, 37.15576171875);
map.setCenter(centerPoint, zoom);
}
/**********************************************
* setting type of the map
***********************************************/
this.setNormalView = function () {
map.setMapType(G_NORMAL_MAP);
}
this.setSatelliteView = function () {
map.setMapType(G_SATELLITE_MAP);
}
/**********************************************
* Other map stuff
***********************************************/
this.cleanMap = function ()
{
map.clearOverlays();
}
this.setAutoRefreshTime = function (time)
{
autoRefresh = time;
}
/**********************************************
* load markers from XML Files
***********************************************/
this.loadMarkersFromXml = function (url)
{
// prepare ajax stuff
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// ajax callback
xhr.onreadystatechange = function () { displayMarkersFromXmlAjaxResult(xhr, map, cleanMarkersOnNewLoading) };
// get XML Content
xhr.open("GET", url, true);
xhr.send(null);
}
/**********************************************
* XML cleaner
***********************************************/
go = function ©
{
if(!c.data.replace(/\s/g,''))
{
c.parentNode.removeChild©;
}
}
clean = function (d)
{
var bal=d.getElementsByTagName('*');
for(i=0;i<bal.length;i++){
a=bal[i].previousSibling;
if(a && a.nodeType==3)
go(a);
b=bal[i].nextSibling;
if(b && b.nodeType==3)
go(b);
}
return d;
}
/**********************************************
* return formated string for marker message box
***********************************************/
getMarkerMessage = function(message, lat, lng, search)
{
var htmlMessage = '';
htmlMessage += '<span style="color: #0000FF;">';
htmlMessage += message;
if (search != "")
{
htmlMessage += '<br />'+search;
}
if (lat != "")
{
htmlMessage += '<br /><strong>Latitude:</strong> '+lat;
}
if (lng != "")
{
htmlMessage += '<br /><strong>Longitude:</strong> '+lng;
}
htmlMessage += '</span>';
return htmlMessage;
}
/**********************************************
* create & display default marker to the map
* for specified location or coordinates
***********************************************/
this.addMarker = function (markerName, search, lat, lng)
{
//alert(search);
if (search != "") {
geocoder.getLatLng(search,
function(point) {
if (point) {
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(marker, "click",
function() {
marker.openInfoWindowHtml( getMarkerMessage(markerName, point.x, point.y, search) );
});
}
});
} else {
var point = new GLatLng(lat, lng);
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(marker, "click",
function() {
marker.openInfoWindowHtml( getMarkerMessage(markerName, lat, lng, "") );
});
}
}
/**********************************************
* get/create icon by name
***********************************************/
getIconByName = function (iconName)
{
if (iconName == "default")
{
return G_DEFAULT_ICON;
}
else if (iconName == "mini")
{
// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "https://www.adgcp-63.com/map/images/mm_20_red.png";
icon.shadow = "https://www.adgcp-63.com/map/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
return icon;
}
else if (iconName == "aircraft_red")
{
// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "https://www.adgcp-63.com/map/images/aircraft_red.png";
icon.shadow = "https://www.adgcp-63.com/map/images/mm_20_shadow.png";
icon.iconSize = new GSize(11, 14);
icon.shadowSize = new GSize(22, 15);
icon.iconAnchor = new GPoint(11, 14);
icon.infoWindowAnchor = new GPoint(5, 1);
return icon;
}
else if (iconName == "aircraft_blue")
{
// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "https://www.adgcp-63.com/map/images/aircraft_blue.png";
icon.shadow = "https://www.adgcp-63.com/map/images/mm_20_shadow.png";
icon.iconSize = new GSize(11, 14);
icon.shadowSize = new GSize(22, 15);
icon.iconAnchor = new GPoint(11, 14);
icon.infoWindowAnchor = new GPoint(5, 1);
return icon;
}
else
{
return G_DEFAULT_ICON;
}
}
/**********************************************
* create & display default marker to the map
* for specified location or coordinates
* do not call directly
***********************************************/
createMarker = function (map, markerMessage, search, lat, lng, iconName)
{
//alert(search);
var icon = getIconByName(iconName);
if (search != "") {
geocoder.getLatLng(search,
function(point) {
if (point) {
var marker = new GMarker(point, icon);
map.addOverlay(marker);
GEvent.addListener(marker, "click",
function() {
marker.openInfoWindowHtml( getMarkerMessage(markerMessage, point.x, point.y, search) );
});
}
});
} else {
var point = new GLatLng(lat, lng);
var marker = new GMarker(point, icon);
map.addOverlay(marker);
GEvent.addListener(marker, "click",
function() {
marker.openInfoWindowHtml( getMarkerMessage(markerMessage, lat, lng, "") );
});
}
}
/**********************************************
* display markers from ajax xml result
***********************************************/
displayMarkersFromXmlAjaxResult = function (xhr, map, clearMarkers)
{
// display only when ready
if (xhr.readyState==4 && xhr.status == 200)
{
// shall we clean map from markers ?
if (clearMarkers == true)
{
map.clearOverlays();
}
// load & clean XML
var docXML = clean(xhr.responseXML.documentElement);
var markers = docXML.getElementsByTagName("markers");
// loop markers
for (var i = 0; i < markers.length; i++)
{
var markerList = markers.item(i).childNodes;
// loop marker
for (var j = 0; j < markerList.length; j++)
{
// get childNodes of marker
var marker = markerList.item(j);
if (marker.nodeName == "marker")
{
var nodeList = markerList.item(j).childNodes;
var locality = "";
var markerName = "";
var lat = null;
var lng = null;
var iconName = defaultIcon;
var alt = "";
var country = "";
var heading = "";
// parse all childNodes and add marker
for (var k = 0; k < nodeList.length; k++)
{
var node = nodeList.item(k);
// Name of the member
if (node.nodeName == "name") {
markerName = node.firstChild.nodeValue;
}
// Lat position
if (node.nodeName == "lat") {
lat = node.firstChild.nodeValue;
}
// Long position
if (node.nodeName == "long") {
lng = node.firstChild.nodeValue;
}
// Get latlng by locality ?
if (node.nodeName == "locality") {
locality = node.firstChild.nodeValue;
}
// Icon Name
if (node.nodeName == "icon") {
iconName = node.firstChild.nodeValue;
}
// Lockon stuff: altitude
if (node.nodeName == "alt") {
alt = node.firstChild.nodeValue;
}
// Lockon stuff: country
if (node.nodeName == "country") {
country = node.firstChild.nodeValue;
}
// Lockon stuff: heading
if (node.nodeName == "heading") {
heading = node.firstChild.nodeValue;
}
}
var message = '<strong>' + markerName+ '</strong>';
if (country != "") { message += '<br /><strong>Country:</strong> '+country+' <img src="https://www.www.adgcp-63.com/map/images/'+country+'.gif" />'; }
if (alt != "") { message += '<br /><strong>Altitude:</strong> '+alt+'m'; }
if (heading != "") { message += '<br /><strong>Heading:</strong> '+heading+'°'; }
createMarker(map, message, locality, lat, lng, iconName);
}
} // loop marker
} // lopp markers
}
}
}
Pouvez vous m'aider?
Je vous en remercie par avance
