Google maps image marker is not placing correctly in the sprite

问题

I'm trying to use a sprite image for google map marker but it does not display. Here is the code I'm using

function setMarkers(map, markers) {

    var google_image = new google.maps.MarkerImage("http://www.mydomain.com/images/bodycss/pointer.png", new google.maps.Size(32, 32), new google.maps.Point(28, 32));

        for (var i = 0; i < markers.length; i++) {
            var sites = markers[i];
            var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
            var marker = new google.maps.Marker({
                position: siteLatLng,
                map: map,
                title: sites[0],
                zIndex: sites[3],
                html: sites[4],
                icon: google_image
            });

            var contentString = "Some content";

            google.maps.event.addListener(marker, "mouseover", function () {
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });
        }
    }

The image size I've given as 32px * 32px and the image position point I've given is 28 and 32. Only the map is displaying without the marker. Any help would be appreciated

回答1:

There may be different issues for your problem. Few things to test before going into the issue-

Test your code without using a custom marker and see whether the marker gets displayed correctly. If that doesn't work your latlng values are wrong. If it works, then check whether your sprite image is accessible by your site(see the chrome or firebug console for errors). If there are no errors, then your position point may not be adjusted properly.

Also add map.setCenter(marker.getPosition()) after creating your marker so that it is shown in the viewing area.

Update- In the below line change your size and point parameters until you find the marker if the above issues aren't the problem.

var google_image = new google.maps.MarkerImage("http://www.mydomain.com/images/bodycss/pointer.png", new google.maps.Size(32, 32), new google.maps.Point(28, 32));

回答2:

At a first glance it's probably that you've set the coordinates wrong? LatLng's are usually expressed as something like: 54.621790812770513, -3.562549943618061.

The position you've specified (28, 32) is a point in Saudi Arabia and 100 miles from anywhere, unless this was your intention?

Also you're not centering the map on the point so it could be displaying (in Saudi Arabia) while your map is centered elsewhere?

Also please accept an answer should someone solve your issue (though I may not have). Only polite.

来源：https://stackoverflow.com/questions/13741852/google-maps-image-marker-is-not-placing-correctly-in-the-sprite

标签

javascript

google-maps-api-3

sprite