Google Maps Custom Marker

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.

Is there any guide on how to make a custom marker ?

i am using the following lib:

enter image description here

// 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: '<p>HTML Content</p>'
        }
    });

});


ANSWERS:


What you probably want is something like this:

var image = new google.maps.MarkerImage(
    'http://i.imgur.com/3YJ8z.png',
    new google.maps.Size(19,25),    // size of the image
    new google.maps.Point(0,0), // origin, in this case top-left corner
    new google.maps.Point(9, 25)    // anchor, i.e. the point half-way along the bottom of the image
);

map.addMarker({
    lat: 13.00487,
    lng: 77.576729,
    title: 'Lima',
    icon: image,
    infoWindow: {
        content: '<p>HTML Content</p>'
    }
});

As far as I know there are two basic ways to create a custom marker for Google Maps (API V3). The first is to use a "Custom Overlay", the second is to use a "Complex Icon". Both are explained in the official Google Maps API documentation. You can..

1.) use a "Custom Overlay" if you want to display HTML

The Google Map documentation example "Custom Overlays" shows how to create an own CustomMarker class based on the Google Maps OverlayView class

CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
  ..
}
overlay = new CustomMarker(..)
overlay.setMap(map);

2.) use a "Complex Icon" if you want to display an image

The Google Map documentation example "Complex Icons" shows how to create a Google Marker with a complex icon, i.e. an icon, a shadow image and a shape (the shape define the clickable region of the icon)

 var image = new google.maps.MarkerImage('images/flag.png', ..
 var shadow = new google.maps.MarkerImage('images/shadow.png', ..
 var marker = new google.maps.Marker({
    position: .., map: .., shadow: .., icon: image, shape: ..
   });

There's an example at and the syntax is explained at

In particular, where a custom marker is a different shape to a normal Google marker, the anchor parameter needs to be set correctly.

Following edit,

It appears that indeed you are using a small image, but everything is being treated as a normal-size Google marker. You need to make a custom marker (see above).



 MORE:


 ? Add Marker to Custom Google Map
 ? Google maps not showing marker in android
 ? Allow only a certain number of markers in google maps
 ? Saving google map markers into SharedPreferences in android studios
 ? Google Maps add new Marker and delete old Marker with one mouse click
 ? Google Maps add new Marker and delete old Marker with one mouse click
 ? Google Maps add new Marker and delete old Marker with one mouse click
 ? How do I delete a marker on Google Maps?
 ? ASP google map add marker on button click
 ? google map api: open url by clicking at marker