Aller au contenu

google Map

DCO

Par DCO
dans Le salon de Webmaster Hub

 Partager

Sujets conseillés

DCO

DCO

Posté
Posté

Bonjour,

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=&quot;http://maps.google.com/maps?file=api&v=2&key=****" type="text/javascript"></script>

<script src=&quot;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(&quot;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>

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.previousSibling;

if(a && a.nodeType==3)

go(a);

b=bal.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 = &quot;https://www.adgcp-63.com/map/images/mm_20_red.png";

icon.shadow = &quot;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 = &quot;https://www.adgcp-63.com/map/images/aircraft_red.png";

icon.shadow = &quot;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 = &quot;https://www.adgcp-63.com/map/images/aircraft_blue.png";

icon.shadow = &quot;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=&quot;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

Cleden

Cleden

Posté
Posté

N'est ce pas du au fait que le nombre maximal de marqueurs soit atteint ?

J'ai une carte avec 90 marqueurs qui fonctionne parfaitement mais au delà, je ne sais pas.

Loïc

DCO

DCO

Posté
  • Auteur
Posté

Bonjour et merci pour cette réponse.

Peut être est-ce dû au nombre de marker, mais cela fonctionné bien avant. et pourtant je n'ai pas fait de modif sur ces fichiers.

Dan

Dan

Posté
Posté
N'est ce pas du au fait que le nombre maximal de marqueurs soit atteint ?

On a plus de 200 marqueurs sur la carte des membres du Hub, et cela s'affiche bien.

DCO

DCO

Posté
  • Auteur
Posté

Je viens de faire un essai avec 50 membres et j'ai le même problème il n'y a qu'une partie de markers d'affichés.

Je ne vois pas d'où cela peut venir. Les sont affichés alléatoirement sans que cela soit toujours les mêmes.

Cleden

Cleden

Posté
Posté
On a plus de 200 marqueurs sur la carte des membres du Hub, et cela s'affiche bien.

A ce propos Dan, comment accède-t-on à la carte des membres du hub ? Je l'ai déjà vue mais je ne trouve plus le lien.

Loïc

Bigb06

Bigb06

Posté
Posté

Bonjour,

Concernant votre problème:

- Vous utilisez le geocoder pour géolocaliser vos 100 points à chaque chargement de la page, soit 100 requêtes HTTP. Une solution qui peut accélerer le chargement de la page est de géolocaliser une fois chaque adresse, puis de stocker la latitude/longitude du point. Le gain sera d'un facteur 50 au minimum.

De plus il n'est pas préconisé de faire beaucoup d'appels successifs, qui peuvent aboutir sur des erreurs 403 car les serveurs google peuvent croire à une attaque s'il y a trop de requêtes. Et les requêtes sont limitées à 50 000 par jour.

Bonne courage!

I believe that if you are doing batch geocoding, you should put a delay

into your program of the 1.725 seconds or you will get the 403

Forbidden code after about 1000 or so hits, as Bo indicates.

DCO

DCO

Posté
  • Auteur
Posté
Vous utilisez le geocoder pour géolocaliser vos 100 points à chaque chargement de la page, soit 100 requêtes HTTP. Une solution qui peut accélerer le chargement de la page est de géolocaliser une fois chaque adresse, puis de stocker la latitude/longitude du point. Le gain sera d'un facteur 50 au minimum.

Merci pour cette réponse et votre aide.

Mais pouvez-vous m'en dire plus?

DCO

DCO

Posté
  • Auteur
Posté
On a plus de 200 marqueurs sur la carte des membres du Hub, et cela s'affiche bien.

Et comment avez-vous fait? quel est la source qui affiche ces markers? Google?

Bigb06

Bigb06

Posté
Posté
Merci pour cette réponse et votre aide.

Mais pouvez-vous m'en dire plus?

Il faut faire un programme, ou utiliser un utilitaire online type geobatch. Ensuite soit stocker les coordonnées dans votre fichier xml (en ajoutant des noeuds à votre arbre XML), soit créer/modifier une base de données.

Je ne sais pas si c'est clair pour vous (si vous êtes développeur ou non, j'imagine que oui car le code source est bien écrit).

N'hésitez pas si vous avez besoin d'aide sur un point précis.

Dan

Dan

Posté
Posté

La meilleure manière (à mon avis) d'utiliser GoogleMap est encore de se baser sur une des classes existantes.

Pour le Hub j'utilise la classe GoogleMapAPI.class.php que tu peux trouver sur http://www.phpinsider.com/php/code/GoogleMapAPI/

Je l'ai modifiée légèrement et y ai ajouté quelques fonctions, mais elles ne s'appliquent pas à toi.

Dan

DCO

DCO

Posté
  • Auteur
Posté

Bonjour et merci pour ce lien.

J'ai téléchargé l'archive mais un petit problème je lis peu l'anglais.

Existe il une traduction?

Merci d'avance pour ton aide.

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...