title: Disappearing custom markers - google maps v3
body: <p>I am trying to create a map with custom markers.</p>
  
  <p>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 128x128, I am scaling them to 32x32 but i would like some of them to be 64x32</p>
  
  <p>Here's main function for adding markers (I commented out things that I tried before):</p>
  
  <pre><code>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='&lt;strong&gt;'+name+'&lt;/strong.&gt;&lt;br /&gt;'+address+'&lt;br&gt;&lt;img src="http://chart.apis.google.com/chart?cht=qr&amp;chs=200x200&amp;chl=http%3A//maps.google.com/maps%3Fq=%26ll%3D'+lat+'%2C'+lng+'%26z%3D14&amp;chld=H|0"&gt;';
  
          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);
  
      });
  </code></pre>
  
  <p>xml is this:</p>
  
  <pre><code>&lt;?xml version="1.0"?&gt;
  &lt;markers&gt;
  
  &lt;marker&gt;
  &lt;name&gt;name1&lt;/name&gt;
  &lt;address&gt;&lt;/address&gt;
  &lt;lat&gt;54.721844&lt;/lat&gt;
  &lt;lng&gt;17.41024&lt;/lng&gt;
  &lt;width&gt;32&lt;/width&gt;
  &lt;height&gt;32&lt;/height&gt;
  &lt;icon&gt;park2.png&lt;/icon&gt;
  &lt;/marker&gt;
  
  ( ...)
  
  &lt;marker&gt;
  &lt;name&gt;name2&lt;/name&gt;
  &lt;address&gt;&lt;/address&gt;
  &lt;lat&gt;50.417408112618686&lt;/lat&gt;
  &lt;lng&gt;23.491015625&lt;/lng&gt;
  &lt;width&gt;32&lt;/width&gt;
  &lt;height&gt;32&lt;/height&gt;
  &lt;icon&gt;park.png&lt;/icon&gt;
  &lt;/marker&gt;
  
  &lt;/markers&gt;
  </code></pre>
  
  <p>here's MYEDIT definition + initialization:</p>
  
  <p>var infoWindow;
     var MYMAP = {
      map: null,
      bounds: null,
      iWindow: null
     }</p>
  
  <pre><code>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();
  }
  </code></pre>
  
  <p>test bed is at:</p>
  
  <p><a href="http://null-zero.com/test/markers/markers.html" rel="nofollow">http://null-zero.com/test/markers/markers.html</a></p>
  
  <p>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.</p>
  
  <p>There are two PlaceMarkers functions - the bottom one uses different width/height and is broken (placeMarkersCities)</p>
  
  <p>Any ideas what causes it and how to fix it?</p>