Ejemplo sencillo de openstreetmap + openlayers

Es usual ver muchos mapas de Google incrustados en cientos de sitios web, pero para aquellos que no quieran caer en las garras de este gigante (o por cualquier otra razón) es posible utilizar la alternativa libre y colaborativa Openstreetmap junto con la librería javascript para visualizar mapas Openlayers.

Y para que se vea lo bien que funciona esta combinación aquí os dejo un ejemplo al que le sigue el código que lo hace funcionar:



CREAR MAPA Mostrar LA PILARICA

El código que muestra el mapa y ejecuta las acciones de los botones es el siguiente:

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>  
  var map;
  function crearMapa() {
  if (document.getElementById('basicMap').innerHTML == ""){
    // apaño para modificar el estilo de texto de la atribución
    var S = document.createElement('style');
    S.type = 'text/css';
    var T = '.olControlAttribution {bottom: 0 !important;}';
    T = document.createTextNode(T)
    S.appendChild(T);
    document.body.appendChild(S);
    // Creación de un mapa
    map = new OpenLayers.Map("basicMap");
    // Creación de la capa que muestra el mapa de openstreetmap
    var mapnik = new OpenLayers.Layer.OSM();
    // Muestra imagenes pixeladas mientras se hace zum
    mapnik.transitionEffect = "resize";
    // Añadir la capa al mapa
    map.addLayer(mapnik);
    //web para sacar coordenadas
    //http://www.gorissen.info/Pierre/maps/googleMapLocationv3.php
    // Centrar el mapa transformando las coordenadas
    map.setCenter(new OpenLayers.LonLat(-0.878563,41.652603)
      .transform(
        new OpenLayers.Projection("EPSG:4326"), // de WGS 1984
        new OpenLayers.Projection("EPSG:900913") // a Proyección Esférica Mercator
      ), 13 // Nivel de zum
    );
  }else{
    alert("¡El mapa ya ha sido creado!");
  }
  }
  function mostrarPopup() {
    map.addPopup(new  OpenLayers.Popup.FramedCloud(
                            "La pilarica",
                             new OpenLayers.LonLat(-0.878756,41.656717)
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // de WGS 1984
            new OpenLayers.Projection("EPSG:900913")),
          null,
          "<img src=\"http://t1.gstatic.com/images?q=tbn:KWchVEJywTCKcM:http://upload.wikimedia.org/wikipedia/commons/5/58/Basilica_del_Pilar_ZaragozaAragon%28Spain%29.jpg\" alt=\"pilarica\" />",
          null,
          true
    ));
  }
</script>
<button onclick="crearMapa();"> CREAR MAPA </button> <button onclick="mostrarPopup();"> Mostrar LA PILARICA </button>
<div style="width: 550px;height: 300px;margin: 0;" id="basicMap"></div>

Fuente: openstreetmap.org wiki