<!doctype html>
<html>
<head>
<title>USando OpenLayers</title>

function iniciar_mapa() {
         var map = new OpenLayers.Map('mapa');
            var proj4326 = new OpenLayers.Projection("EPSG:4326");
            var projmerc = new OpenLayers.Projection("EPSG:900913");
            var layerOSM = new OpenLayers.Layer.OSM("Street Map");
            map.addLayers([layerOSM]);
            var lonLat = new OpenLayers.LonLat( -69.2260, -51.62534 )
              .transform(
              new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
              map.getProjectionObject() // to Spherical Mercator Projection
            );

var zoom=13;

var markers = new OpenLayers.Layer.Markers( "Markers" );
            map.addLayer(markers);
            markers.addMarker(new OpenLayers.Marker(lonLat));
            map.setCenter (lonLat, zoom);

var capa_de_marcadores;
            var marcador;
            var contador_clics = 0;

map.events.register("click", map, function(e) {
                markers.destroy();
              if(contador_clics>0){
                capa_de_marcadores.removeMarker(marcador);
              };
                var position = this.events.getMousePosition(e);
                var lonlat = map.getLonLatFromPixel(position);
                var lonlatTransf = lonlat.transform(map.getProjectionObject(), proj4326);
                OpenLayers.Util.getElement("lat").innerHTML = lonlatTransf.lat;
                OpenLayers.Util.getElement("lng").innerHTML = lonlatTransf.lon;
                var lonlat = lonlatTransf.transform(proj4326, map.getProjectionObject());
                capa_de_marcadores = new OpenLayers.Layer.Markers( "Markers" );
                marcador = new OpenLayers.Marker(lonlat);

capa_de_marcadores.addMarker(marcador);
                map.addLayer(capa_de_marcadores);
                contador_clics++;
            });
            map.addControl(new OpenLayers.Control.LayerSwitcher());
          };

</script>

</head>
<body onload="iniciar_mapa();">
<div id="mapa" style="width:250px;height:250px"></div>
  Latitud: <span id="lat"> </span><br>
  Longitud: <span id="lng"> </span><br>
</body>
</html>

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground