How to align the icon of a marker in google map

In google map usually the center bottom of the image of the marker is the lat lng of a point that it has to mark.

Imagine my marker icon is a circle, I would like the center of it to be at the lat-lng of the given point...

Code:

var image_hotspot = 'img/icons/bank_euro.png';
var marker = new google.maps.Marker({
      map: map,
      position: placeLoc,
      icon: image_hotspot
    });

Answers


What You need is to create a MarkerImage object, for example:

var markerImage = new google.maps.MarkerImage('img/icons/bank_euro.png',
                new google.maps.Size(30, 30),
                new google.maps.Point(0, 0),
                new google.maps.Point(15, 15));

Where first parameter is an image url, second is image size, third is origin point of image, and fourth is position on the image where marker should point. If your marker is a circle then set fourth parameter to center of the image. And create your marker passing markerImage to icon property:

var marker = new google.maps.Marker({
  map: map,
  position: placeLoc,
  icon: markerImage
});

From the docs:

Converting MarkerImage objects to type Icon

var image = new google.maps.MarkerImage(
    place.icon,
    new google.maps.Size(71, 71),
    new google.maps.Point(0, 0),
    new google.maps.Point(17, 34),
    new google.maps.Size(25, 25));

becomes

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

https://developers.google.com/maps/documentation/javascript/markers


With v3 of google Maps you could / should use:

new maps.Marker({
            ...
            icon: {
                url: '.../myimage.png',
                scaledSize: new maps.Size(60, 30),
                anchor: new maps.Point(30, 30),
            },
        });

https://developers.google.com/maps/documentation/javascript/reference#Icon


If you are using addMarker and need set the x,y coordinates using Point(x, y)

let markerInstance = mapInstance.addMarker({
            lat : _lat,
            lng : _lng,
            label: '8',
            icon : {
              url :  'url_image.png',
              origin:  new google.maps.Point(0, 0),
            }
        });

Need Your Help

How to open browser to localhost through npm scripts

npm-start npm-scripts

I've been trying to figure out how to write a npm script that will culminate with the application being launched in the user's browser without them having to manually open the browser and go to loc...

How to avoid "The job exceeded the maximum time limit for jobs, and has been terminated." when accessing mvnsearch.org on Travis CI?

java maven travis-ci connectivity

Since approx. 72h I'm getting The job exceeded the maximum time limit for jobs, and has been terminated. on TravisCI which seems to be related requesting artifacts from mvnsearch.org, e.g. https://...