title: How to Add Marker to Open Layer Map?
body: <p>I want to show map to my website use OpenStreetMap using library open layer.
  When I want to add marker, I want to add a marker but the marker does not show up on the map. </p>
  
  <p>I had searched on google, I had found one code as below my code.
  There are much example to add marker but its dominate for google map, I want to use opensource map</p>
  
  <pre><code> &lt;!doctype html&gt;
   &lt;html lang="en"&gt;
     &lt;head&gt;
       &lt;link rel="stylesheet" 
   href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/ css/ol.css" type="text/css"&gt;
       &lt;style&gt;
         .map {
          height: 400px;
          width: 100%;
        }
      &lt;/style&gt;
      &lt;script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"&gt;&lt;/script&gt;
      &lt;title&gt;OpenLayers example&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h2&gt;My Map&lt;/h2&gt;
      &lt;div id="map" class="map"&gt;&lt;/div&gt;
      &lt;script type="text/javascript"&gt;
  
  ///SHOW MAP
        var map = new ol.Map({
          target: 'map',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.OSM()
            })
          ],
          view: new ol.View({
            center: ol.proj.fromLonLat([106.8478695, -6.1568562]),
            zoom: 17
          })
        });
  ///ADD MARKER
      var markers = new OpenLayers.Layer.Markers( "Markers" );
      map.addLayer(markers);
  
      var size = new OpenLayers.Size(21,25);
      var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
      var icon = new OpenLayers.Icon('marker.png', size, offset);
      markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(106.8478695,-6.1568562),icon));
      markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(106.8478695,-6.1568562),icon.clone()));
  
      &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>code snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>///SHOW MAP
  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([106.8478695, -6.1568562]),
      zoom: 17
    })
  });
  ///ADD MARKER
  var markers = new OpenLayers.Layer.Markers("Markers");
  map.addLayer(markers);
  
  var size = new OpenLayers.Size(21, 25);
  var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
  var icon = new OpenLayers.Icon('marker.png', size, offset);
  markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(106.8478695, -6.1568562), icon));
  markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(106.8478695, -6.1568562), icon.clone()));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.map {
    height: 400px;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/ css/ol.css" type="text/css"&gt;
  &lt;script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"&gt;&lt;/script&gt;
  &lt;title&gt;OpenLayers example&lt;/title&gt;
  &lt;h2&gt;My Map&lt;/h2&gt;
  &lt;div id="map" class="map"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I expect the marker show up on the map, but i dont see the  marker</p>