CODEWITHSUNDEEP
google-mapsmarker
Xtian
Xtian

Reputation: 3587

Google Maps Marker off center

I have a google maps with a circle at a specific Lat and Lng. I am also using a Marker that I want displayed in the center of the circle, which should be the Lat and Lng the circle is set to.

Here is a screen shot of what I am talking about: enter image description here

You can see the "6" and "7" are not in the center of the circle. I am not sure how to fix this?

Here is the Marker code:

var markerIcon = [
                "img/marker-icon-1.png",
                "img/marker-icon-2.png",
                "img/marker-icon-3.png",
                "img/marker-icon-4.png",
                "img/marker-icon-5.png",
                "img/marker-icon-6.png",
                "img/marker-icon-7.png",
                "img/marker-icon-8.png",
                "img/marker-icon-9.png",
                "img/marker-icon-10.png"
            ];


var marker = new google.maps.Marker({
    position:new google.maps.LatLng(mapDataTrending[i].lat, mapDataTrending[i].lng),
    icon: markerIcon[i],
    map: map
});

I am setting the Lat and Lng from a JSON file, but I am using the same Lat and Lng to set the center of my circles.

Upvotes: 3

Views: 3618

Answers (2)

ruralcoder
ruralcoder

Reputation: 1020

Hopefully someone will find this helpful that is looking for a more copy paste answer. ICON_BASE allows you to replicate it across multiple icons of the same size.

const ICON_BASE = {
    size: new google.maps.Size(16, 16), 
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(8, 8)),
};

const ICON_1 = {
    ...ICON_BASE,
    url: "img/marker-icon-1.png",
};

Upvotes: 0

Nick Andriopoulos
Nick Andriopoulos

Reputation: 10643

Do note that when you place an image as a marker, the bottom center of the image goes to the latlng selected. you need to adjust for your image size via the Icon.anchor property (assuming you're talking about google maps Javascript v3 since you're using icon )

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

Upvotes: 4

Related Questions