title: Google Maps Custom Marker
body: <p>I am inserting a custom marker in Google Maps and its not pointing accurately on the map. I Think its mainly because of the design of the pointing edge of the marker. </p>
  
  <p>Is there any guide on how to make a custom marker ?</p>
  
  <p>i am using the following lib: <a href="http://hpneo.github.com/gmaps/" rel="nofollow noreferrer">http://hpneo.github.com/gmaps/</a></p>
  
  <p><img src="https://i.stack.imgur.com/JWM0W.png" alt="enter image description here"></p>
  
  <pre><code>// JavaScript Document
  $(document).ready(function () {
      var map = new GMaps({
          div: '#map',
          lat: 13.00487,
          lng: 77.576729,
          zoom: 13,
      });
  
      map.addControl({
          position: 'top_right',
          text: 'Geolocate',
          style: {
              margin: '5px',
              padding: '1px 6px',
              border: 'solid 1px #717B87',
              background: '#fff'
          },
          events: {
              click: function () {
                  GMaps.geolocate({
                      success: function (position) {
                          map.setCenter(position.coords.latitude, position.coords.longitude);
                      },
                      error: function (error) {
                          alert('Geolocation failed: ' + error.message);
                      },
                      not_supported: function () {
                          alert("Your browser does not support geolocation");
                      }
                  });
              }
          }
      });
  
      map.addMarker({
          lat: 13.00487,
          lng: 77.576729,
          title: 'Lima',
          icon: "http://i.imgur.com/3YJ8z.png",
          infoWindow: {
              content: '&lt;p&gt;HTML Content&lt;/p&gt;'
          }
      });
  
  });
  </code></pre>