title: Custom Icons not showing up on google maps
body: <p>The problem I am having is only that I cannot get the custom icons to load. The markers themselves load but just with the default icon. I can get the custom icons to load if I set the icon: type manually in the marker object like this:</p>
  
  <pre><code>        var marker = new google.maps.Marker({
              position: places[i],
              map: map,
              icon: sizeIcons['one']
          })
  </code></pre>
  
  <p>Then they all load just fine. But I wanted to set the size so I added the code below which works in my KML generator but for some reason will not work to produce my custom icons. Any ideas why? I did not post all the code but the value of $content[1] is a number between 50 and 450.</p>
  
  <p>index.html</p>
  
  <pre><code>$sizeFloat = (int) $content[1];
                      if($sizeFloat  &lt; 50){
                          ?&gt;
                          &lt;script type="text/javascript"&gt;
                              markerType.push(sizeIcons['one']);
                          &lt;/script&gt;
                          &lt;?php
                      }
                      if($sizeFloat &gt;= 50 &amp;&amp; $sizeFloat &lt; 70){
                          ?&gt;
                          &lt;script type="text/javascript"&gt;
                              markerType.push(sizeIcons['two']);
                          &lt;/script&gt;
                          &lt;?php
                      }
                      if($sizeFloat &gt;= 70 &amp;&amp; $sizeFloat &lt; 75){
                          ?&gt;
                          &lt;script type="text/javascript"&gt;
                              markerType.push(sizeIcons['three']);
                          &lt;/script&gt;
                          &lt;?php
                      }
                      if($sizeFloat &gt;= 75 &amp;&amp; $sizeFloat &lt; 88){
                          ?&gt;
                          &lt;script type="text/javascript"&gt;
                              markerType.push(sizeIcons['four']);
                          &lt;/script&gt;
                          &lt;?php
                      }
                      if($sizeFloat &gt;= 88 &amp;&amp; $sizeFloat &lt; 100){
                          ?&gt;
                          &lt;script type="text/javascript"&gt;
                              markerType.push(sizeIcons['five']);
                          &lt;/script&gt;
                          &lt;?php
                      }
                      if($sizeFloat &gt;= 100 &amp;&amp; $sizeFloat &lt; 125){
                          ?&gt;
                          &lt;script type="text/javascript"&gt;
                              markerType.push(sizeIcons['six']);
                          &lt;/script&gt;
                          &lt;?php
                      }
                      if($sizeFloat &gt;= 125 &amp;&amp; $sizeFloat &lt; 150){
                          ?&gt;
                          &lt;script type="text/javascript"&gt;
                              markerType.push(sizeIcons['seven']);
                          &lt;/script&gt;
                          &lt;?php
  
                      }
                      if($sizeFloat &gt;= 150 &amp;&amp; $sizeFloat &lt; 175){
                          ?&gt;
                          &lt;script type="text/javascript"&gt;
                              markerType.push(sizeIcons['eight']);
                          &lt;/script&gt;
                          &lt;?php
  
                      }
                      if($sizeFloat &gt;= 175 &amp;&amp; $sizeFloat &lt; 200){
                          ?&gt;
                          &lt;script type="text/javascript"&gt;
                              markerType.push(sizeIcons['nine']);
                          &lt;/script&gt;
                          &lt;?php
                      }
                      if($sizeFloat &gt;= 200 &amp;&amp; $sizeFloat &lt; 250){
                          ?&gt;
                          &lt;script type="text/javascript"&gt;
                              markerType.push(sizeIcons['ten']);
                          &lt;/script&gt;
                          &lt;?php
                      }
                      if($sizeFloat &gt;= 250 &amp;&amp; $sizeFloat &lt; 275){
                          ?&gt;
                          &lt;script type="text/javascript"&gt;
                              markerType.push(sizeIcons['eleven']);
                          &lt;/script&gt;
                          &lt;?php
                      }
                      if($sizeFloat &gt;= 275 &amp;&amp; $sizeFloat &lt; 350){
                          ?&gt;
                          &lt;script type="text/javascript"&gt;
                              markerType.push(sizeIcons['twelve']);
                          &lt;/script&gt;
                          &lt;?php
                      }
                      if($sizeFloat &gt;= 350){
                          ?&gt;
                          &lt;script type="text/javascript"&gt;
                              markerType.push(sizeIcons['thirteen']);
                          &lt;/script&gt;
                          &lt;?php
                      }
  
                      if ($content !== false) {
                      ?&gt;
                          &lt;script type="text/javascript"&gt;                             
                              places.push(new google.maps.LatLng(&lt;?php echo json_encode($content[5]); ?&gt;, &lt;?php echo json_encode($content[6]); ?&gt;));  
                          &lt;/script&gt;
                      &lt;?php           
                      }
                      $id = $id + 1;
                  }       
                  fclose($file);
              }
          ?&gt;
      &lt;script type="text/javascript" src="js/map.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>map.js</p>
  
  <pre><code>(function() {
      // Creating a variable that will hold the InfoWindow object
      var infowindow;
      // Creating an array that will contain all the size icons
      var sizeIcons = [];
      sizeIcons['one'] = new google.maps.MarkerImage(
          'images/25.png',
          new google.maps.Size(48, 48),
          null,
          new google.maps.Point(24, 24)
      );
      sizeIcons['two'] = new google.maps.MarkerImage(
          'images/50.png',
          new google.maps.Size(48, 48),
          null,
          new google.maps.Point(24, 24)
      );
      sizeIcons['three'] = new google.maps.MarkerImage(
          'images/70.png',
          new google.maps.Size(48, 48),
          null,
          new google.maps.Point(24, 24)
      );
      sizeIcons['four'] = new google.maps.MarkerImage(
          'images/75.png',
          new google.maps.Size(48, 48),
          null,
          new google.maps.Point(24, 24)
      );
      sizeIcons['five'] = new google.maps.MarkerImage(
          'images/88.png',
          new google.maps.Size(48, 48),
          null,
          new google.maps.Point(24, 24)
      );
      sizeIcons['six'] = new google.maps.MarkerImage(
          'images/100.png',
          new google.maps.Size(48, 48),
          null,
          new google.maps.Point(24, 24)
      );
      sizeIcons['seven'] = new google.maps.MarkerImage(
          'images/125.png',
          new google.maps.Size(48, 48),
          null,
          new google.maps.Point(24, 24)
      );
      sizeIcons['eight'] = new google.maps.MarkerImage(
          'images/150.png',
          new google.maps.Size(48, 48),
          null,
          new google.maps.Point(24, 24)
      );
      sizeIcons['nine'] = new google.maps.MarkerImage(
          'images/175.png',
          new google.maps.Size(48, 48),
          null,
          new google.maps.Point(24, 24)
      );
      sizeIcons['ten'] = new google.maps.MarkerImage(
          'images/200.png',
          new google.maps.Size(48, 48),
          null,
          new google.maps.Point(24, 24)
      );
      sizeIcons['eleven'] = new google.maps.MarkerImage(
          'images/250.png',
          new google.maps.Size(48, 48),
          null,
          new google.maps.Point(24, 24)
      );
      sizeIcons['twelve'] = new google.maps.MarkerImage(
          'images/275.png',
          new google.maps.Size(48, 48),
          null,
          new google.maps.Point(24, 24)
      );
      sizeIcons['thirteen'] = new google.maps.MarkerImage(
          'images/425.png',
          new google.maps.Size(48, 48),
          null,
          new google.maps.Point(24, 24)
      );
  
      window.onload = function() {
          // Creating an object literal containing the properties
          // we want to pass to the map
          var options = {
              zoom: 5,
              center: new google.maps.LatLng(39.09, -95.71),
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          // Creating the map
          var map = new google.maps.Map(document.getElementById('map'), options);
          // Creating a LatLngBounds object
          var bounds = new google.maps.LatLngBounds();
  
          // Creating a variable that will hold
          // the InfoWindow object
          var infowindow;
          // Looping through the places array
          for (var i = 0; i &lt; places.length; i++) {
              // Adding the markers
              var marker = new google.maps.Marker({
                  position: places[i],
                  map: map,
                  icon: markerType[i]
              });
              // Wrapping the event listener inside an anonymous function
              // that we immediately invoke and passes the variable i to.
              (function(i, marker) {
                  // Creating the event listener. It now has access to the values of
                  // i and marker as they were during its creation
                  google.maps.event.addListener(marker, 'click', function() {
                  // Check to see if we already have an InfoWindow
                  if (!infowindow) {
                      infowindow = new google.maps.InfoWindow();
                  }
                  // Setting the content of the InfoWindow
                  infowindow.setContent('Place number ' + i);
                  // Tying the InfoWindow to the marker
                  infowindow.open(map, marker);
                  });
              })(i, marker);
              // Extending the bounds object with each LatLng
              bounds.extend(places[i]);
          }
          // Adjusting the map to new bounding box
          map.fitBounds(bounds)
      };
  })();
  </code></pre>