Bonjour à toutes et à tous
Voilà , j'ai un souci pour mettre en place googlemap sur mon site je travail déjà avec google map, en version 2 qui fonctionne et voudrais passer à la version 3, la carte s'affiche sans souci mais les markers eux ne s'affiche pas .
J'utilise comme base ceci qui fonctionne très bien chez google
Mon niveau langage web , eh bien ça dépasse pas
Et mon Anglais est un peu rouillé .
J'ai mis en ligne les trois fichiers que voici , ceci pour étudier le fonctionnement chez mon hébergeur ici , sans modifier quoique ce soit:
moredata.xml
util.js
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7 <?xml version="1.0" encoding="UTF-8"?> -<markers> <marker lng="-122.144841" lat="37.427770" name="Jackie"/> <marker lng="-122.125604" lat="37.413320" name="Peter"/> <marker lng="-122.139062" lat="37.433480" name="Mary"/> <marker lng="-122.162307" lat="37.445427" name="Puff"/> </markers>
et le fichier url_info.html
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84 /** * Returns an XMLHttp instance to use for asynchronous * downloading. This method will never throw an exception, but will * return NULL if the browser does not support XmlHttp for any reason. * @return {XMLHttpRequest|Null} */ 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; }; /** * This functions wraps XMLHttpRequest open/send function. * It lets you specify a URL and will call the callback if * it gets a status code of 200. * @param {String} url The URL to retrieve * @param {Function} callback The function to call once retrieved. */ 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) { // Usually indicates request timed out in FF. } if (status == 200) { callback(request.responseXML, request.status); request.onreadystatechange = function() {}; } } } request.open('GET', url, true); try { request.send(null); } catch (e) { changeStatus(e); } }; /** * Parses the given XML string and returns the parsed document in a * DOM data structure. This function will return an empty DOM node if * XML parsing is not supported in this browser. * @param {string} str XML string. * @return {Element|Document} DOM. */ 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); } /** * Appends a JavaScript file to the page. * @param {string} url */ function downloadScript(url) { var script = document.createElement('script'); script.src = url; document.body.appendChild(script); }
Tous ses fichiers sont dans le même répertoire ici.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46 <!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>Google Maps JavaScript API v3 Example: Common Loader</title> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="util.js"></script> <script type="text/javascript" > var infowindow; var map; function initialize() { var myLatlng = new google.maps.LatLng(37.4419, -122.1419); var myOptions = { zoom: 13, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); downloadUrl("moredata.xml", function(data) { var markers = data.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var marker = createMarker(markers[i].getAttribute("name"), latlng); } }); } function createMarker(name, latlng) { var marker = new google.maps.Marker({position: latlng, map: map}); google.maps.event.addListener(marker, "click", function() { if (infowindow) infowindow.close(); infowindow = new google.maps.InfoWindow({content: name}); infowindow.open(map, marker); }); return marker; } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:400px; height:300px"></div> </body> </html>
Quelqu'un a t'il une idée , pour commencer a réaliser les modifs pour mon propre usage il faut que je fasse fonctionner ce qui marche déjà .
J'ai déjà eu quleques difficulté à faire fonctionner la version 2
Merci dores et déjà pour votre aide
Souhaitant que cela possible
Salutations
Philippe
PJ: les 3 fichiers concernés
Partager