google maps api v3 display different markers

Question

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>

you're treating strings like "1 °C" as if it's a numeric value. Instead what you want to do is probably use a regex to parse just the numeric part out of your temp and humidity values, so you can do a true numeric comparison. — duncan, Mar 20 '14 at 10:40
@ duncan . The if conditions run both great! The problem is how i can call the createMarker function in different way each time.Specifically i'm talking for this line : var marker = createMarker( description,latlng ); — marYOs, Mar 20 '14 at 11:00
@marYOs surely you have a flaw... what does this do for you? `console.log("2 °C" > "10 °C");` — duncan, Mar 20 '14 at 11:41
possible duplicate of [Link Multiple Markers from XML on Google Maps](http://stackoverflow.com/questions/16654375/link-multiple-markers-from-xml-on-google-maps) — geocodezip, Mar 20 '14 at 12:43
@ geocodezip . I cannot dublicate any of the code from the link you sent me.Obviously to display the images it calls the url from the xml.In my case i call the images from a directory. — marYOs, Mar 20 '14 at 16:46

marYOs · Accepted Answer · 2014-03-21T09:44:20.770

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!

google maps api v3 display different markers

1 Answers1

Linked