Google Maps : seules les ombres des icones apparaissent
Google Maps : seules les ombres des icones apparaissent - HTML/CSS - Programmation
Marsh Posté le 05-09-2008 à 08:43:47
Chez moi y'a deux canons qui s'affichent : les deux aux US, celui en Europe y'a juste l'ombre effectivement. Peut-être le nom des images qui ne sont pas bons ?
Marsh Posté le 05-09-2008 à 10:00:35
Bonjour Florent,
merci pour la reponse. Je viens de trouver la solution, qui est 'bete comme chou' :
Les fichiers de definition de 'shadow' utilises par ce super site de reference sont ceux par defaut de Google Maps, alors que ceux des icones, 'colour086.png', etc... sont customises, et le fichier correspondant doit donc etre downloadees dans mon domaine. Cette petite finesse n'est malheureusement pas documentee, et je suis tombe dans le panneau.
Amicalement
Bernard
Sujets relatifs:
- pb placement infobulles dans google map
- Référencement Google
- Ombres / Empilement d'obstacles
- Macro qui 'executent toutes seules??
- Google maps "My Location" et JSR 179
- utilisation des maps
- Villes sue Google maps
- pb API google map et bdd php/sql
Marsh Posté le 05-09-2008 à 03:28:05
Bonjour
Je vous avoue que je suis un peu 'bleu' en programmation Java. Ma question est peut-être triviale, mais je suis coinçé
Pour agrémenter mon site Internet dédié à la Première Guerre Mondiale http://www.passioncompassion1418.com, je tente d'insérer une carte Google Map qui permet de repérer aisément l'emplacement de tous les canons de cette époque existant encore dans le monde. Eh oui, chacun ses goûts ;-)
J'ai un peu tatonné, mais finalement j'ai réussi a adapter un script trouvé sur le génial http://econym.googlepages.com/index.htm.
Un échantillon de 3 "canons" se trouve dans un fichier .xml que j'importe sans soucis, la carte s'affiche, mais seules les ombres des trois icones correspondantes s'affichent.
Voyez le résultat : http://www.passioncompassion1418.c [...] nonBP2.htm
Je ne comrends pas, et cela fait un bout de temps que je cherche... si près du but !
Les memes icones s'affichent pourtant sur le site de econym...
J'ai bien une clé API liée a la racine de ce site. Je travaille avec Webexpert.
Qui peut m'aider ?
Amicalement
Bernard
Code htm correspondant :
<?xml version="1.0" encoding="utf-8"?>
<!-- <?xml version="1.0" encoding="utf-8"?> -->
<!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" />
<!-- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -->
<title>Localisation des canons sur Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAx5W8EzlLm1EKMQXk5N6XkxRgAqR4dMe1_2fndeheuNzDMJJFKxQ6qmJM_7Kf5Gfi5ozDV1_nabB9JQ" type="text/javascript"></script>
</head>
<!-- DEBUT DU BODY - APPELS - LAYOUT ECRAN -->
<body onunload="GUnload()" background="../../ImagesPrincipal/Poz1-8web.jpg" bgcolor="#cca448" text="#000000" link="#66FFFF" vlink="#00FF66" alink="#FFCC00" style="background-attachment: fixed">
<!-- you can use tables or divs for the overall layout -->
<table border=1>
<tr>
<td>
<div id="map" style="width: 750px; height: 450px"></div>
</td>
<td width = 150 valign="top" style="text-decoration: underline; color: #4444ff;">
<div id="side_bar" style="font: x-small Century Gothic"></div>
</td>
</tr>
</table>
<!-- Ligne des categories clickables -->
<div><font color="#FFFFFF" size="2" face="Century Gothic">Canons Allies: <input type="checkbox" id="Canonsbox" onclick="boxclick(this,'Canons')" />
Canons Puissances Centrales: <input type="checkbox" id="Kanonenbox" onclick="boxclick(this,'Kanonen')" />
Minen Allies: <input type="checkbox" id="Mortarsbox" onclick="boxclick(this,'Mortars')" />
Minen Puissances Centrales: <input type="checkbox" id="Minenbox" onclick="boxclick(this,'Minen')" /><br></font></div>
<!-- ligne retour originale BP -->
<a href="../CanonsIndex.html"><div align="right"><font color="#ffff66"><font size="2" face="Century Gothic"><b>RETOUR A LA PAGE PRECEDENTE</b></font></font></div></a>
<!-- Message erreur si JavaScript pas enabled dans le browser -->
<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>
<!-- Debut des scripts JAVA -->
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
// ***************A SUPPRIMER ?*********************
// this variable will collect the html which will eventualkly be placed in the side_bar
// var side_bar_html = "";
// arrays to hold copies of the markers used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
// var i = 0;
// array to hold the different icons types
var gicons = [];
gicons["Canons"] = new GIcon(G_DEFAULT_ICON, "colour086.png" );
gicons["Kanonen"] = new GIcon(G_DEFAULT_ICON ,"colour108.png" );
gicons["Mortars"] = new GIcon(G_DEFAULT_ICON, "colour125.png" );
gicons["Minen"] = new GIcon(G_DEFAULT_ICON, "colour71.png" );
// A function to create the marker and set up the event window
function createMarker(point,name,html,category) {
var marker = new GMarker(point,gicons[category]);
// Store the category and name infos as marker properties
marker.mycategory = category;
marker.myname = name;
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
return marker;
// add a line to the side_bar html
// side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
// i++;
// return marker;
}
// =============Gestion des categories clickables===============
// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].show();
}
}
// == check the checkbox ==
document.getElementById(category+"box" ).checked = true;
}
// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].hide();
}
}
// == clear the checkbox ==
document.getElementById(category+"box" ).checked = false;
// == close the info window, in case its open on a marker that we just hid
map.closeInfoWindow();
}
// == a checkbox has been clicked ==
function boxclick(box,category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
// == rebuild the side bar
makeSidebar();
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
GEvent.trigger(gmarkers[i],"click" );
}
// == rebuilds the sidebar to match the markers currently displayed ==
function makeSidebar() {
var html = "";
for (var i=0; i<gmarkers.length; i++) {
if (!gmarkers[i].isHidden()) {
html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '</a><br>';
}
}
document.getElementById("side_bar" ).innerHTML = html;
}
// create the map
var map = new GMap2(document.getElementById("map" ));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(+20, +2), 1);
// alternative avec GDownloadURL
GDownloadUrl("canonbase.xml", function(doc) {
// seulement avec GXmlHttp
// var xmlDoc = GXml.parse(request.responseText);
var xmlDoc = GXml.parse(doc);
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName("marker" );
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat" ));
var lng = parseFloat(markers[i].getAttribute("lng" ));
var point = new GLatLng(lat,lng);
var name = markers[i].getAttribute("name" );
var category = markers[i].getAttribute("category" );
var nation = markers[i].getAttribute("nation" );
var typecanon = markers[i].getAttribute("typecanon" );
var html = "<b>"+name+"</b><p>"+nation;
// create the marker
var marker = createMarker(point,name,html,category);
map.addOverlay(marker);
}
// == show or hide the categories initially ==
show("Canons" );
show("Kanonen" );
show("Mortars" );
show("Minen" );
// hide("Kanonen" );
// hide("Mortars" );
// hide("Minen" );
// == create the initial sidebar ==
makeSidebar();
// put the assembled side_bar_html contents into the side_bar div
// document.getElementById("side_bar" ).innerHTML = side_bar_html;
});
}
// seulement avec GXmlHttp
// request.send(null);
// }
else {
alert("Sorry, the Google Maps API is not compatible with this browser" );
}
alert(window.location.host)
// This Javascript is based on code provided by the
// Blackpool Community Church Javascript Team
// http://www.commchurch.freeserve.co.uk/
// http://econym.googlepages.com/index.htm
//]]>
</script>
</body>
</html>
Message édité par Guns1418 le 05-09-2008 à 03:50:04