title: Different Style Markers On Google Map
body: <p>I have the following script that populates a map with markers when a user clicks a link.</p>
  
  <p>There can be from 1 to 12 individual markers and what I would like to do is use a different marker if the variable favourite equals 1.</p>
  
  <p>There can be multiple favourites on the same map.</p>
  
  <p>I'm assuming that there needs to be an 'if favourite == 1' piece added during the 'new google.maps.Marker' section, but can't get my head around it!</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
  $("#map").css({
      height: 900,
      width: 1400
  });
  var myLatLng = new google.maps.LatLng(&lt;%=dcLatLng%&gt;); //Query database for map center
  MYMAP.init('#map', myLatLng, 12);
  
  $("#showmarkers").click(function(e){
      MYMAP.placeMarkers('markers.asp?WisperID=&lt;%=sWisperID%&gt;');
  });
  });
  
  var MYMAP = {
  map: null,
  bounds: null
  }
  
  MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
  zoom:zoom,
  center: latLng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map($(selector)[0], myOptions);
  this.bounds = new google.maps.LatLngBounds();
  }
  
  MYMAP.placeMarkers = function(filename) {
  $.get(filename, function(xml){
      $(xml).find("marker").each(function(){
          var name = $(this).find('name').text();
          var address = $(this).find('address').text();
          var postcode = $(this).find('postcode').text();
          var favourite = $(this).find('favourite').text();
          // create a new LatLng point for the marker
          var lat = $(this).find('lat').text();
          var lng = $(this).find('lng').text();
          var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
  
          // extend the bounds to include the new point
          MYMAP.bounds.extend(point);
  
  
  
          var marker = new google.maps.Marker({
              position: point,
              map: MYMAP.map,
              icon: new google.maps.MarkerImage(
              '/images/int.png',
              new google.maps.Size(93, 63),
              new google.maps.Point(0, 0),
              new google.maps.Point(0, 63)
    )
          });
  
  
  
  
          var infoWindow = new google.maps.InfoWindow();
          var html='&lt;strong&gt;'+name+'&lt;/strong.&gt;&lt;br /&gt;'+address+'&lt;br  /&gt;'+postcode+'&lt;br /&gt;&lt;p&gt;'+favourite+'&lt;/p&gt;';
          google.maps.event.addListener(marker, 'mouseover', function() {
              infoWindow.setContent(html);
              infoWindow.open(MYMAP.map, marker);
          });
          google.maps.event.addListener(marker, 'mouseout', function() {
              infoWindow.setContent(html);
              infoWindow.close(MYMAP.map, marker);
          });
          MYMAP.map.fitBounds(MYMAP.bounds);
      });
  });
  }
  &lt;/script&gt;
  </code></pre>