Question

I am trying to create a map with custom markers.

When heights and widths are all the same, everything works fine. If I change one of them to be bigger (2x), that marker starts to behave funny – it’s partially rendered on map, it disappears and reappears when zooming in/out, on some zoom levels it looks ok. Input images are all 128×128, I am scaling them to 32×32 but i would like some of them to be 64×32

Here’s main function for adding markers (I commented out things that I tried before):

jQuery(xml).find("marker").each(function(){
var name = jQuery(this).find('name').text();
var address = jQuery(this).find('address').text();

// create a new LatLng point for the marker
var lat = jQuery(this).find('lat').text();
var lng = jQuery(this).find('lng').text();
var twidth = jQuery(this).find('width').text();
var theight = jQuery(this).find('height').text();
var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
var imgPath = jQuery(this).find('icon').text();

var hw = twidth/2;
var hh = theight/2;
var imageForMarker = new google.maps.MarkerImage(
    imgPath,
    null,     //new google.maps.Size(128, 128),
    // The origin for this image is 0,0.
    null,     //new google.maps.Point(0,0),
    // The anchor for this image is at the centre
    null,    //new google.maps.Point(hw, hh),
    // Scaled size
    new google.maps.Size(twidth, theight));

    // extend the bounds to include the new point
    MYMAP.bounds.extend(point);

    var marker = new google.maps.Marker({
            position: point,
            map: MYMAP.map,
            icon: imageForMarker,
            zIndex:0
        });

        citiesArray.push(marker);

        var html='<strong>'+name+'</strong.><br />'+address+'<br><img src="http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=http%3A//maps.google.com/maps%3Fq=%26ll%3D'+lat+'%2C'+lng+'%26z%3D14&chld=H|0">';

        google.maps.event.addListener(marker, 'click', function() {

        if(infoWindow)
            infoWindow.close();
        infoWindow = new google.maps.InfoWindow();

            infoWindow.setContent(html);

            infoWindow.open(MYMAP.map, marker);


        });

        MYMAP.map.fitBounds(MYMAP.bounds);

    });

xml is this:

<?xml version="1.0"?>
<markers>

<marker>
<name>name1</name>
<address></address>
<lat>54.721844</lat>
<lng>17.41024</lng>
<width>32</width>
<height>32</height>
<icon>park2.png</icon>
</marker>

( ...)

<marker>
<name>name2</name>
<address></address>
<lat>50.417408112618686</lat>
<lng>23.491015625</lng>
<width>32</width>
<height>32</height>
<icon>park.png</icon>
</marker>

</markers>

here’s MYEDIT definition + initialization:

var infoWindow;
var MYMAP = {
map: null,
bounds: null,
iWindow: null
}

MYMAP.init = function(selector, latLng, zoom) {
var myOptions = {
zoom:zoom,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(jQuery(selector)[0], myOptions);
this.bounds = new google.maps.LatLngBounds();
}

test bed is at:

http://null-zero.com/test/markers/markers.html

IMPORTANT: you have to scroll down, tick CITIES, then at the top of the map near GDANSK a castle should appear – it’s broken (top part of the castle is visible), strange things happen when you zoom in/out.

There are two PlaceMarkers functions – the bottom one uses different width/height and is broken (placeMarkersCities)

Any ideas what causes it and how to fix it?

Answer 1

Your current code is

var twidth = jQuery(this).find('width').text();
var theight = jQuery(this).find('height').text();
...
new google.maps.Size(twidth, theight));

But Size takes two Numbers. Odd things have been known to happen when maps objects are fed the wrong parameter type. In this case, you only convert some data from Strings to Numbers. You don’t convert twidth and theight.

I suggest converting the data when you read it

var lat = parseFloat(jQuery(this).find('lat').text());
var lng = parseFloat(jQuery(this).find('lng').text());
var twidth = parseInt(jQuery(this).find('width').text());
var theight = praseInt(jQuery(this).find('height').text()); 

rather than when you use it (as in your current code)

var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));

because then it’s done once and you don’t have to remember it.