title: custom google map marker - javascript & php
body: <p>here is my code - I've tried using the google maps api and other tutorials, but I can't seem to get the code right. It either displays the default icon or no icon at all.</p>
  
  <p>Here is the unaltered code -</p>
  
  <pre><code>                        &lt;script type="text/javascript"&gt;
                      //&lt;![CDATA[
  
                      &lt;?php if ($er_imglayout == 4 &amp;&amp; $row-&gt;image2) { ?&gt;
                          function domap()
                      &lt;?php } else { ?&gt;
                          function ezrealtymap()
                      &lt;?php } ?&gt;
                      {
                          // Check to see if this browser can run the Google API
                          if (GBrowserIsCompatible()) {
  
                              gmarkers = [];
                              htmls = [];
                              to_htmls = [];
                              from_htmls = [];
                              i=0;
  
  
                              // Display the map, with some controls and set the initial location 
                              var map = new GMap2(document.getElementById("map"));
                              map.addControl(new GLargeMapControl());
                              map.addControl(new GMapTypeControl());
                              map.setCenter(new GLatLng( &lt;?php echo $row-&gt;declat;?&gt;,&lt;?php echo $row-&gt;declong;?&gt;), &lt;?php echo $er_mapres;?&gt;);
                              map.setMapType(&lt;?php echo $er_mapview;?&gt;);
  
                              // Set up three markers with info windows 
  
                              var point = new GLatLng( &lt;?php echo $row-&gt;declat;?&gt;,&lt;?php echo $row-&gt;declong;?&gt;);
                              var marker = createMarker(point,"&lt;?php echo stripslashes($row-&gt;adline);?&gt;","&lt;?php echo stripslashes($row-&gt;adline);?&gt;")
                              map.addOverlay(marker);
  
                          } else {
  
                              // display a warning if the browser was not compatible
  
                              alert("&lt;?php echo _EZREALTY_MAPPING_INCOMPATIBLE;?&gt;");
                          }
                      }
  
                      // This Javascript is based on code provided by the
                      // Blackpool Community Church Javascript Team
                      // http://www.commchurch.freeserve.co.uk/   
                      // http://www.econym.demon.co.uk/googlemaps/
  
                      //]]&gt;
  
                      // A function to create the marker and set up the event window
  
                      function createMarker(point,name,html) {
                          var marker = new GMarker(point);
  
                          // The info window version with the "to here" form open
  
                          to_htmls[i] = html + '&lt;br /&gt;&lt;?php echo _EZREALTY_MAP_DIRECTIONS;?&gt;: &lt;strong&gt;&lt;?php echo _EZREALTY_MAP_TOHERE;?&gt;&lt;/strong&gt; - &lt;a href="javascript:fromhere(' + i + ')"&gt;&lt;?php echo _EZREALTY_MAP_FROMHERE;?&gt;&lt;/a&gt;' +
                          '&lt;br /&gt;&lt;?php echo _EZREALTY_MAP_START;?&gt;:&lt;form action="http://maps.google.com/maps" method="get" target="_blank"&gt;' +
                          '&lt;input type="text" size="40" maxlength="40" name="saddr" id="saddr" value="" /&gt;&lt;br /&gt;' +
                          '&lt;input value="&lt;?php echo _EZREALTY_MAP_DIRECTIONS;?&gt;" type="submit"&gt;' +
                          '&lt;input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() + 
                          // "(" + name + ")" + 
                          '"/&gt;';
  
                          // The info window version with the "to here" form open
  
                          from_htmls[i] = html + '&lt;br /&gt;&lt;?php echo _EZREALTY_MAP_DIRECTIONS;?&gt;: &lt;a href="javascript:tohere(' + i + ')"&gt;&lt;?php echo _EZREALTY_MAP_TOHERE;?&gt;&lt;/a&gt; - &lt;strong&gt;&lt;?php echo _EZREALTY_MAP_FROMHERE;?&gt;&lt;/strong&gt;' +
                          '&lt;br /&gt;&lt;?php echo _EZREALTY_MAP_END;?&gt;:&lt;form action="http://maps.google.com/maps" method="get"" target="_blank"&gt;' +
                          '&lt;input type="text" size="40" maxlength="40" name="daddr" id="daddr" value="" /&gt;&lt;br /&gt;' +
                          '&lt;input value="&lt;?php echo _EZREALTY_MAP_DIRECTIONS;?&gt;" type="submit"&gt;' +
                          '&lt;input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
                          // "(" + name + ")" + 
                          '"/&gt;';
  
                          // The inactive version of the direction info
  
                          html = html + '&lt;br /&gt;&lt;?php echo _EZREALTY_MAP_DIRECTIONS;?&gt;: &lt;a href="javascript:tohere('+i+')"&gt;&lt;?php echo _EZREALTY_MAP_TOHERE;?&gt;&lt;/a&gt; - &lt;a href="javascript:fromhere('+i+')"&gt;&lt;?php echo _EZREALTY_MAP_FROMHERE;?&gt;&lt;/a&gt;';
  
                          GEvent.addListener(marker, "click", function() {
                              marker.openInfoWindowHtml(html);
                          });
                          gmarkers[i] = marker;
                          htmls[i] = html;
                          i++;
                          return marker;
                      }
  
                      // functions that open the directions forms
                      function tohere(i) {
                          gmarkers[i].openInfoWindowHtml(to_htmls[i]);
                      }
                      function fromhere(i) {
                          gmarkers[i].openInfoWindowHtml(from_htmls[i]);
                      }
  
                      &lt;/script&gt;
  </code></pre>