Question

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

Answer 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));