javascript - Different images for each place type in google maps/place api -
i trying assign custom image each of place types marker created for, code assigns image fine if there 1 place type if there more 1 place type no images assigned. types stored in global split array.
html:
<label> types of places</label> <link rel="stylesheet" type="text/css" href="css/style.css"> <input type="checkbox" name="cbox" value="park" class="places"/> <label for="woodland"><img src="../img/woodland.jpg" style="padding-top:10px;"/></label> <input type="checkbox" name="cbox" value="lodging, campground, rv_park" class="places"/> <label for="viewpoint"><img src="../img/viewpoint.jpg" style="padding-top:10px;"/></label> <input type="checkbox" name="cbox" value="restaurant, bakery, meal_delivery, meal_takeaway" class="places"/> <label for="restaurant"><img src="../img/restaurant.jpg" style="padding-top:10px;"/></label> <input type="checkbox" name="cbox" value="museum, aquarium, art_gallery, bowling_alley, church, cemetery, library, movie_theater, stadium, zoo" class="places" /> <label for="historical"><img src="../img/historical.jpg" style="padding-top:10px;"/></label> jquery:
$(".places").change(function() { placet = []; $(".places").each(function() { if( $(this).is(':checked') ) { placet.push($(this).val()); } }); alert( placet ); }); javascript:
function findplaces(boxes,searchindex) { var typep = placet.tostring().split(','); window.typep = typep var request = { bounds: boxes[searchindex], types: typep }; //alert(request.bounds); service.radarsearch(request, function (results, status) { if (status != google.maps.places.placesservicestatus.ok) { alert("request["+searchindex+"] failed: "+status); } // alert(results.length); document.getelementbyid('side_bar').innerhtml += "bounds["+searchindex+"] returns "+results.length+" results<br>" (var = 0, result; result = results[i]; i++) { var marker = createmarker(result); } searchindex++; if (searchindex < boxes.length) findplaces(boxes,searchindex); }); } function createmarker(place, category){ var iconsrc = {}; iconsrc['park'] = '/img/icons/park-15.svg'; iconsrc['lodging'] = 'img/icons/lodging-15.svg'; iconsrc['campground'] = 'img/icons/campground-15.svg'; iconsrc['rv_park'] = 'img/icons/rv_park-15.svg'; iconsrc['restaurant'] = 'img/icons/restaurant-11.svg'; iconsrc['bakery'] = 'img/icons/bakery-15.svg'; iconsrc['meal_delivery'] = 'img/icons/meal_delivery-15.svg'; iconsrc['meal_takeaway'] = 'img/icons/meal_takeaway-15.svg'; iconsrc['museum'] = 'img/icons/museum-15.svg'; iconsrc['aquarium'] = 'img/icons/aquarium-15.svg'; iconsrc['art_gallery'] = 'img/icons/art_gallery-15.svg'; iconsrc['bowling_alley'] = 'img/icons/bowling_alley-15.svg'; iconsrc['church'] = 'img/icons/meal_church-15.svg'; iconsrc['cemetery'] = 'img/icons/cemetery-15.svg'; iconsrc['library'] = 'img/icons/library-15.svg'; iconsrc['movie_theater'] = 'img/icons/movie_theater-15.svg'; iconsrc['stadium'] = 'img/icons/stadium-15.svg'; iconsrc['zoo'] = 'img/icons/zoo-15.svg'; var placeloc=place.geometry.location; if (place.icon) { var image = new google.maps.markerimage( place.icon, new google.maps.size(50, 50), new google.maps.point(0, 0), new google.maps.point(17, 34), new google.maps.size(25, 25)); } else var image = null; var marker=new google.maps.marker({ map:map, icon: iconsrc[typep], position:place.geometry.location }); var request = { reference: place.reference }; google.maps.event.addlistener(marker,'click',function(){ service.getdetails(request, function(place, status) { if (status == google.maps.places.placesservicestatus.ok) { var contentstr = '<h5>'+place.name+'</h5><p>'+place.formatted_address; if (!!place.formatted_phone_number) contentstr += '<br>'+place.formatted_phone_number; if (!!place.price_level) contentstr += '<br>'+place.price_level; if (!!place.opening_hours) contentstr += '<br>'+place.opening_hours; if (!!place.website) contentstr += '<br><a target="_blank" href="'+place.website+'">'+place.website+'</a>'; contentstr += '<br>'+place.types+'</p>'; contentstr += "<br /><input type = 'button' value = 'not interested' onclick = 'deletemarker(" + marker.id + ");' value = 'delete' />"; infowindow.setcontent(contentstr); infowindow.open(map,marker); } else { var contentstr = "<h5>no result, status="+status+"</h5>"; infowindow.setcontent(contentstr); infowindow.open(map,marker); } }); }); marker.id = uniqueid; uniqueid++; gmarkers.push(marker); var side_bar_html = "<a href='javascript:google.maps.event.trigger(gmarkers["+parseint(gmarkers.length-1)+"],\"click\");'>"+place.name+"</a><br>"; document.getelementbyid('side_bar').innerhtml += side_bar_html; } do have add able deal multiple types when assigning icons? appreciated.
Comments
Post a Comment