xml - google maps api v3 display different markers -
i'm trying display different markers depending condition every time.
for example :
- if temp > 1 display "ilios"
- if humidity > 97% display "omixli"
i trying create inside createmarker()
function var marker1( code in comments )
cannot find way.
does have idea how i'm gonna in or in different way?
suggestion , examples , comments 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"); (var = 0; < 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 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>
after lot of searching , found solution!
have create many createmarker
functions images are!i'm gonna insert correct code , hope in future you! here 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"); (var = 0; < 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 , wanna lot commented , gave me suggestions!
Comments
Post a Comment