IT:OpenLayers Marker Example
Questo è un semplice esempio di aggiunta di un marker a una mappa OpenLayers.
Questo è il codice richiesto (Copialo in un nuovo file HTML e visualizzalo nel browser) :
<html><body>
<div id="DivMappa"></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
// Definisco la variabilie mappa come un oggetto OpenLayers.Map utilizzando il DivMappa, poi aggiungo il Layer OSM (Open Street Map)
var Mappa = new OpenLayers.Map("DivMappa");
Mappa.addLayer(new OpenLayers.Layer.OSM());
// Creo l'oggetto contenente le coordinate (prima longitudine e poi latitudine)
var LonLat = new OpenLayers.LonLat( 12.492347, 41.890183 )
.transform(
new OpenLayers.Projection("EPSG:4326"), // Transformazione da WGS 1984..
Mappa.getProjectionObject() // .. a Spherical Mercator Projection
);
// Imposto lo zoom
var zoom=16;
// Creo una variabile contenete il layer dei marker poi collego il layer dei markers alla mappa
var LayerMarkers = new OpenLayers.Layer.Markers( "Markers" );
Mappa.addLayer(LayerMarkers);
// Aggiungo al layer dei marker un marker (utilizzando l'oggetto lonLat per le coordinate)
LayerMarkers.addMarker(new OpenLayers.Marker(LonLat));
// Imposto le coordinate di lonLat come centro della mappa di partenza
Mappa.setCenter (LonLat, zoom);
</script>
</body></html>
Questo esempio usa lo stesso oggetto "LonLat" sia per posizionare il marker che per riferimento come centro della mappa. Puoi aggiungere ulteriori markers utilizzando il metodo markers.addMarker(new OpenLayers.Marker(NuovoLonLat)); se definisci "NuovoLonLat" come nuovo oggetto "OpenLayers.LonLat"
Approccio iFrame
C'è anche un segmento HTML ulteriolmente semplice da aggiungere al tuo sito, usando un tag <iframe>. Puoi facilmente ottenere l'HTML necessario usando il tab Export, e scegliendo l'opzione "embeddable HTML". L'approccio iFrame è comunque piuttosto limitato. Se sei interessato nel proseguire la programmazione aggiungendo ulteriori funzioni tramite Javascript il codice di sopra è un punto di partenza migliore.
Esempio OpenLayers con marker e popup
Questo è un esempio OpenLayers con marker e popup. Questo può essere il tipico esempio "Puoi trovarci qui..."
http://dev.openlayers.org/examples/osm-marker-popup.html