google maps api v3 display different markers

问题

I'm trying to display different markers depending the condition every time.

For example :

• If temp > 1 display "ilios"
• If humidity > 97% display "omixli"

I am trying to create inside the createmarker() function the var marker1( the code in comments ) but i cannot find the way.

Does anybody have an idea how i'm gonna do it in this or in a different way?
Any suggestion , examples , comments would be appreciated!

var infowindow;
  var map;

  function initialize() {
    var myLatlng = new google.maps.LatLng(38.822590,24.653320);
    var myOptions = {
      zoom: 5,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    downloadUrl("moredata.xml", function(data) {
      var items = data.documentElement.getElementsByTagName("item");
      for (var i = 0; i < items.length; i++) {
        var description = items[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
        var humidity    = items[i].getElementsByTagName("outsideHumidity")[0].childNodes[0].nodeValue;
        var temp        = items[i].getElementsByTagName("temp")[0].childNodes[0].nodeValue;
        var latlng = new google.maps.LatLng(parseFloat(items[i].getElementsByTagName("lat")[0].childNodes[0].nodeValue),
                                    parseFloat(items[i].getElementsByTagName("lng")[0].childNodes[0].nodeValue));

        if ( temp > "1 °C" ) {
          alert(temp);
          var marker = createMarker( description,latlng );
          }

          if (humidity > "97 %") {
          alert(humidity);
          var marker = createMarker( description,latlng );
          }

       }
     });
  }

  var iconBase = 'weather_icons/';
        var icons = {
          ilios: {
            icon: iconBase + 'ilios.png'
          },
          pagetos: {
            icon: iconBase + 'pagetos2.png'
          },
          omixli: {
          icon: iconBase + 'omixli.png'
          }
        };

  function createMarker(description, latlng) {
    var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: icons['pagetos'].icon
    });

    //var marker1 = new google.maps.Marker({
    //position: latlng,
    //map: map,
    //icon: icons['omixli'].icon
    //});

    google.maps.event.addListener(marker, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({content: description});
      infowindow.open(map, marker);
    });
    return marker;
  }

Here's the moredata.xml

<item>
<description>Thesaloniki</description>
<temp>10 °C</temp>
<outsideHumidity>98 %</outsideHumidity>
<lat>40.422726139672626</lat>
<lng>22.93392777442932</lng>
</item>
<item>
<description>Giannena</description>
<temp>14 °C</temp>
<outsideHumidity>90 %</outsideHumidity>
<lat>39.62209843837158</lat>
<lng>20.89027225971222</lng>
</item>
<item>
<description>Atiki</description>
<temp>15 °C</temp>
<outsideHumidity>65 %</outsideHumidity>
<lat>38.08469095792561</lat>
<lng>23.680233657360077</lng>
</item>

回答1:

After a lot of searching , finally i found the solution!
I have to create as many createMarker functions as the images are!I'm gonna insert the correct code and i hope in the future will help you! Here you are..

var infowindow;
  var map;

  function initialize() {
    var myLatlng = new google.maps.LatLng(38.822590,24.653320);
    var myOptions = {
      zoom: 5,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    downloadUrl("moredata.xml", function(data) {
      var items = data.documentElement.getElementsByTagName("item");
      for (var i = 0; i < items.length; i++) {
        var description = items[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
        var humidity    = items[i].getElementsByTagName("outsideHumidity")[0].childNodes[0].nodeValue;
        var temp        = items[i].getElementsByTagName("temp")[0].childNodes[0].nodeValue;
        var title       = items[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
        var latlng = new google.maps.LatLng(parseFloat(items[i].getElementsByTagName("lat")[0].childNodes[0].nodeValue),
                                    parseFloat(items[i].getElementsByTagName("lng")[0].childNodes[0].nodeValue));

        if ( temp > "38 °C" ) {
          alert(temp);
          var marker = createMarker2( description,latlng,ilios );
          }

          if ( temp < "1 °C" ) {
          alert(temp);
          var marker = createMarker( description,latlng,cold );
          }

          if ( humidity > "97%" ) {
          alert(windSpeed);
          var marker = createMarker1( description,latlng,omixli );
          }

       }
     });
  }

  var cold  = 'weather_icons/pagetos2.png';
  var omixli = 'weather_icons/omixli.gif';
  var ilios = 'weather_icons/ilios.png';

  function createMarker( description,latlng,cold ) {
    var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: cold
    });

    google.maps.event.addListener(marker, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({
      content: description
      });
      infowindow.open(map, marker);
    });
    return marker;
  }

  function createMarker1( description,latlng,omixli ) {
    var marker1 = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: omixli
    });

    google.maps.event.addListener(marker1, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({
      content: description
      });
      infowindow.open(map, marker1);
    });
    return marker1;
  }
function createMarker2( description,latlng,ilios) {
    var marker2 = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: ilios
    });

    google.maps.event.addListener(marker2, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({
      content: description
      });
      infowindow.open(map, marker2);
    });
    return marker2;
  }

Endly , I wanna say thanks a lot for everyone that commented and gave me suggestions!

来源：https://stackoverflow.com/questions/22528647/google-maps-api-v3-display-different-markers