title: Openlayers: markers disappear when zoomming
body: <p>I'm new with Openlayers, so not sure what is wrong. I can add markers when I change a select drop down and when I click the map. The issue comes when I zoom the map, the markers disappear. </p>
  
  <p>I realised that markers don't disappear, they just move to another place, to the point 0,0.</p>
  
  <p>This is the code</p>
  
  <pre><code>(function($) {
  $().ready(function() {        
      var ZOOM_LEVEL_PROVINCE = 12;
  
      var projection = new OpenLayers.Projection("EPSG:4326");
  
      var map;
      var markerLayer;
  
      var initMap = function() {
  
          map = new OpenLayers.Map ("map", {
              controls:[
                  new OpenLayers.Control.Navigation(),
                  new OpenLayers.Control.PanZoomBar(),
                  new OpenLayers.Control.Permalink(),
                  new OpenLayers.Control.ScaleLine({geodesic: true}),
                  new OpenLayers.Control.Permalink('permalink'),
                  new OpenLayers.Control.MousePosition(),                    
                  new OpenLayers.Control.Attribution()],
              //maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
              maxResolution: 156543.0339,
              numZoomLevels: 19,
              units: 'm',
              projection: new OpenLayers.Projection("EPSG:4326"),
              displayProjection: new OpenLayers.Projection("EPSG:4326")
          } );
  
          layer = new OpenLayers.Layer.OSM("Simple OSM Map");
          map.addLayer(layer);
  
          var point = getLonLatProvince('san-jose');
          map.setCenter(point.transform(projection, map.getProjectionObject()), ZOOM_LEVEL_PROVINCE);
      }
  
      var initMakerLayer = function(){
          markerLayer = new OpenLayers.Layer.Markers( "MarkerLayer" );
          markerLayer.id = "MarkerLayer";
          map.addLayer(markerLayer);
      }
  
      var showMarker = function( province ){
          var point = getLonLatProvince(province);
          var location = point.transform(projection, map.getProjectionObject());
          showMarkerPosition(location);
      }
  
      var showMarkerPosition = function( location ){
          markerLayer.clearMarkers(); 
          var size = new OpenLayers.Size(21,25);
          var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
          var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);
  
          markerLayer.addMarker(new OpenLayers.Marker(location,icon.clone()));
  
          var newPoint = location.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
  
          $("#edit-plonlat").val( newPoint );
      }
  
      var getLonLatProvince = function( province ){
          ...
      }
  
      initMap();
      initMakerLayer();
      showMarker('san-jose');
  
      map.events.register("click", map, function(e) {
          var location = map.getLonLatFromPixel(e.xy);
          showMarkerPosition(location);
      });
  
  
      $('#edit-pprovinces').change(function() {
          var selectedPronvince = $(this).val();
          var point = getLonLatProvince(selectedPronvince);
          showMarker(selectedPronvince);
          map.setCenter(point.transform(projection, map.getProjectionObject()), ZOOM_LEVEL_PROVINCE);
      });
  });
  </code></pre>
  
  <p>})(jQuery);</p>