Bonjour à tous.
J'ai un problème fort embêtant que je n'arrive vraiment pas à résoudre :
En effet, je dois utiliser OpenLayers pour réaliser une carte sur laquelle je dois mettre des picto (des markers en fait) dans quelques différents endroits et lorsqu'on passe la souris sur ces pictos ça doit générer un pop up avec un url cliquable.
Le problème c'est que je voudrais mettre un Google Map Background dans mon OpenLayers et quand je fais ça, tant que j'ai pas ajouté mes markers avec leur fenêtre pop up, ça va. Mais dès que je crée une instance de layers, que j'y colle des markers et que j'attache le layer à ma carte, eh bien rien n’apparaît J'ai passée énormément de temps dessus à regarder partout dans tous les forums, mais sans résultat satisfaisant et j'en a vraiment besoin en plus!!
Quelqu’un sur ce forum aurait-il une idée?
Merci d'avance.
PS : Voici mon code :
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<html>

    <head>
        <!-- OpenLayers core js -->
        <script
        src="http://www.openlayers.org/dev/OpenLayers.js"></script>
		
		<script src="http://openlayers.org/api/OpenLayers.js"></script>
		

        <!-- OpenStreetMap base layer js -->
        <script
		src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
 
        <!-- Google Maps -->
        <script src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
 
        <script type="text/javascript">
        function init() {
            //set up projections
 
            // World Geodetic System 1984 projection
            var WGS84 = new OpenLayers.Projection("EPSG:4326");
            
            // WGS84 Google Mercator projection
            var WGS84_google_mercator = new OpenLayers.Projection("EPSG:900913");
 
            //Initialize the map
            //creates a new openlayers map in the <div> html element id map
            var map = new OpenLayers.Map ("map", {
                controls:[
                    //allows the user pan ability
                    new OpenLayers.Control.Navigation(),
                    //displays the pan/zoom tools
                    new OpenLayers.Control.PanZoom(),
                    //displays a layer switcher
                    new OpenLayers.Control.LayerSwitcher(),
                    //displays the mouse position's coordinates in a <div> html element with
                    new OpenLayers.Control.MousePosition({
                        div:document.getElementById("coordinates")
                    })
                ],
                    projection: WGS84_google_mercator,
                    displayProjection: WGS84
            } );
 
            //base layers
            var openstreetmap = new OpenLayers.Layer.OSM();
            var google_maps = new OpenLayers.Layer.Google(
                "Google Maps", {
                    numZoomLevels: 20
                }
            );
            var google_satellite = new OpenLayers.Layer.Google(
                "Google Satellite", {
                    type: google.maps.MapTypeId.SATELLITE,
                    numZoomLevels: 20
                }
            );
 
            //wfs overlay
            var wfs_layer = new OpenLayers.Layer.Vector("Blocks", {
                strategies: [new OpenLayers.Strategy.BBOX()],
                projection: WGS84,
                protocol: new OpenLayers.Protocol.WFS({
                    version: "1.1.0",
                    url: "http://hazardmapping.com/geoserver/wfs",
                    featureNS :  "http://www.opengeospatial.net/cite",
                    featureType: "testblocks",
                })
            });
			map.addLayers([openstreetmap, google_maps, google_satellite, wfs_layer]);
            
			
			//add markers
			var couche_markers = new OpenLayers.Layer.Markers("Markers");
			var dimension_icon = new OpenLayers.Size(24,24);
			var offset_icon = new OpenLayers.Pixel(-(dimension_icon.w/2), -dimension_icon.h);
			var icon = new OpenLayers.Icon('10.jpg', size, offset);
			lonlat=new OpenLayers.LonLat(2.44834,48.87729).transform(
			new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
			new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
			);
			var mon_marker=new OpenLayers.Marker(lonlat, icon);
			markers.addMarker(mon_marker);
			map.addLayer(markers);
			
            // map extent
            var mapextent = new OpenLayers.Bounds(-123.17341, 49.24343, -123.06183, 49.29899).transform(WGS84, map.getProjectionObject());
            map.zoomToExtent(mapextent);
        }
        </script>
    </head>
    <body onload="init()">
        <div id="map" style="width:500px; height:500px;"></div>
        <div id="coordinates"></div>
    </body>
</html>