Search code examples
javascriptgoogle-mapsgoogle-maps-api-3embedding

Google Maps default Marker uses wrong anchor Point?

I have the following simple map with one marker:

function initialize() {
            var myLocation = new google.maps.LatLng(57.781920, -152.396120);

            var mapOptions = {
                center: new google.maps.LatLng(33, -70),
                zoom: 2
            };

            // make map
            var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);

            // place marker
            var myMarker = new google.maps.Marker({
                position: myLocation,
                map: map,
                title:"Here"

            });
}

The map shows up correctly, but the marker is not in the right place, it is placed as if its anchor were in the bottom right, instead of the bottom center, as the default behavior is supposed to be (see https://developers.google.com/maps/documentation/javascript/reference#Icon).

Here's how the above looks in my embedded map,

wrong

and here's where it should be (screenshot taken on google maps site just entering in the lat, long exactly the same)

right

Clearly, this is not usable as is... I see that for custom marker icons, the anchor Point can be specified, and if this were a custom icon, I would play around with that, but since it is the default icon, I don't know how to edit the anchor Point, and I shouldn't have to anyway.

I'd appreciate any help!

Solution

  • I found the problem. But I think I'd call it a bug if I knew what I was talking about.

    In the div in which I had embedded the map, I had a text indent of fifteen pixels. I deleted the following line of CSS:

    text-indent: 15px;

    And the problem went away (a bit of a bother, because I was using that id elsewhere too, but at least the problem is solved).