title: Google Maps API V3 Markers Not Showing
body: <p>I have used Version 2 for quite some time and decided it was time to go to Version 3 as part of a major site update. I based all my code on "<a href="http://www.geocodezip.com/v3_MW_example_map3.html" rel="nofollow">Mike Williams' tutorial The Basics - Part 3: Loading the data from an XML file translated to v3</a>". After hours of fine-tuning I had it all working, including clustering and custom markers.</p>
  
  <p>I was a very happy bunny and keen to show it off. Then to my disappointment I discovered that it didn't work in either IE or Firefox (I had been testing it in Chrome).</p>
  
  <p>I'm well aware that Google Maps API is not an easy thing to work with, but is there any reason why I should get this behaviour with different browsers? The map can be seen by going to <a href="http://www.littlehotels.co.uk/new/" rel="nofollow">www.littlehotels.co.uk/new/</a> and clicking on "Map Search". The code is here:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt; 
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt; 
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt; 
      &lt;title&gt;Little Hotels of Spain - Google Map&lt;/title&gt;
  &lt;meta name="description" content="Little Hotels provides maps showing the location of hotels, using Google Maps to create both a street/road map and a satellite image."&gt;
  &lt;meta name="keywords" content="Little Hotels, Little Hotels of Spain, Spain, mainland spain, balearic, balearics, canary, canaries, small, hotel, hotels, map, google map, holiday, holidays"&gt;
  &lt;style type="text/css"&gt;
  html { height: 100% }
  body{ height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#333333;}
  a:link, a:visited, a:hover {color: #FF6600; text-decoration: none; font-weight: bold;}
  h1{font-size: 16px; color: #2B8CB9; font-weight: bold;}
  #content{padding: 0 5px 0; width: 640px;}
  #map_canvas { height: 100% }
  .verdana{font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #666666;}
  &lt;/style&gt;
  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../js/downloadxml.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt; 
  //&lt;![CDATA[
        var gmarkers = []; 
  
       // global "map" variable
        var map = null;
        var markerclusterer = null;
  
    var image = new google.maps.MarkerImage('../images/hotel_icon.png',
        new google.maps.Size(32, 37),
        new google.maps.Point(0,0),
        new google.maps.Point(16, 35));
    var shadow = new google.maps.MarkerImage('../images/hotel_shadow.png',
        new google.maps.Size(51, 37),
        new google.maps.Point(0,0),
        new google.maps.Point(16, 35));
  
  // A function to create the marker and set up the event window function 
  function createMarker(latlng, name, html) {
      var contentString = html;
      var marker = new google.maps.Marker({
          position: latlng,
          icon: image,
          shadow: shadow
          });
  
      google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(contentString); 
          infowindow.open(map,marker);
          });
  
      // save the info we need to use later for the side_bar
      gmarkers.push(marker);
  }
  
  // This function picks up the click and opens the corresponding info window
  function myclick(i) {
    google.maps.event.trigger(gmarkers[i], "click");
  }
  
  function initialize() {
        var lat = 0;
        var lng = 0;
        var zoomzoom = 0;
        var query = location.search.substring(1);
        var pairs = query.split("&amp;");
        for (var i=0; i&lt;pairs.length; i++) {
      var pos = pairs[i].indexOf("=");
      var argname = pairs[i].substring(0,pos).toLowerCase();
      var value = pairs[i].substring(pos+1).toLowerCase();
          if (argname == "lat") {lat = parseFloat(value);}
          if (argname == "lng") {lng = parseFloat(value);}
          if (argname == "zoom") {zoomzoom = parseInt(value);}
        }
   var thisLatlng = new google.maps.LatLng(lat, lng);
    var myOptions = {
  center: thisLatlng,
  zoom: zoomzoom,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
     streetViewControl: false,
     zoomControl: true,
     zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
     }
     }
  
    map = new google.maps.Map(document.getElementById("map_canvas"),
                                  myOptions);
  
    google.maps.event.addListener(map, 'click', function() {
          infowindow.close();
          });
  
        downloadUrl("php-to-xml.php", function(doc) {
          var xmlDoc = xmlParse(doc);
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          for (var i = 0; i &lt; markers.length; i++) {
  
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new google.maps.LatLng(lat,lng);
            var html=markers[i].getAttribute("html");
            var hotel=markers[i].getAttribute("hotel");
  
            var marker = createMarker(point,hotel,html);
          }
  
  var clusterStyles = [
    {
      opt_textColor: '#5a7aba',
      url: '../images/cluster_icon.png',
      height: 40,
      width: 40
    }
  ];
          var mcOptions = {gridSize: 35, maxZoom: 8, styles: clusterStyles};
          markerCluster = new MarkerClusterer(map, gmarkers,mcOptions);
        });
      }
  
  var infowindow = new google.maps.InfoWindow(
    { 
      size: new google.maps.Size(300,50)
    });
  
  //]]&gt;
  &lt;/script&gt; 
  &lt;/head&gt; 
  
  &lt;body onload="initialize()"&gt; 
  &lt;div id="content"&gt;
  &lt;h1&gt;Little Hotels Map Search&lt;/h1&gt;
  &lt;span class="verdana"&gt;Click on the icons for more information or use the Google controls to zoom, scroll, pan and change view.&lt;br /&gt;&lt;br /&gt;&lt;/span&gt;
  &lt;table border=1 bordercolor="#666666"&gt;
        &lt;tr&gt;
          &lt;td&gt;
  &lt;div id="map_canvas" style="width: 640px; height: 450px"&gt;&lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
  &lt;/table&gt;
  &lt;br /&gt;
  &lt;/div&gt;
  &lt;/body&gt; 
  &lt;/html&gt; 
  </code></pre>
  
  <p>Thanks for any advice anyone can offer.</p>