javascript - Google Web Map checkboxes work in Firefox & Chrome, but do not function in IE -
my google map website working in firefox , chrome, checkbox functionality not working in ie. can tell me why, need deploy asap , having issues ie. client uses ie 8. help.
<!doctype html> <!-- saved url=(0014)about:internet --> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta charset="utf-8"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <link rel="stylesheet" type="text/css" href="included.css"> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> <title>web map tool</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script> $(document).ready(function(){ $("a").click(function(event){ alert("something went wrong - talk developer!!!"); event.preventdefault(); }); }); </script> <div data-role="page"> <div data-role="header"> <h1>google map web viewer tool</h1> </div><!-- /header --> <br> </div> <br> <br> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=<yourkey>&sensor=false"> </script> <br> <script> var map; //this reference map var markersarray = []; //this array holding markers plotted on map var infowindow; //this reference reuseable infowindow // harcoded places // on form [name, lat, lng, category, content] var places = [ ['group1', 47.364237, -92.690690, 3, '<h2>group (-11)</h2>'], ['group2', 43.711833, -95.719528, 1, '<h2>group (4)</h2>'], ['group3', 44.947385, -92.854821, 2, '<h2>group (12)</h2>'], ['group4', 45.899306, -91.521083, 4, '<h2>group (-4)</h2>'], ['group5', 45.223620, -91.127480, 1, '<h2>group (3)</h2>'], ['group6', 46.448371, -90.166895, 2, '<h2>group (7)</h2>'], ['group7', 40.471315, -107.580322, 2, '<h2>group (1)</h2>'], ['group8', 38.208628, -104.574672, 1, '<h2>group (5)</h2>'], ['group9', 39.623084, -104.452554, 2, '<h2>group (10)</h2>'], ['group10', 33.186694, -101.407897, 3, '<h2>group (-6)</h2>'], ['group11', 32.210741, -103.262702, 1, '<h2>group (6)</h2>'], ['group12', 33.991050, -103.858130, 2, '<h2>group (11)</h2>'], ]; //just fun, different icons each category //i thought may wanted show different icons //here of "official" google marker icons var icons = [ 'http://maps.google.com/mapfiles/kml/paddle/red-circle.png', //red 'http://maps.google.com/mapfiles/kml/paddle/ylw-circle.png', //yellow 'http://maps.google.com/mapfiles/kml/paddle/grn-circle.png', //green 'http://maps.google.com/mapfiles/kml/paddle/blu-circle.png', //blue ]; // center map in middle of nebraska var mapcenter = new google.maps.latlng(40.658014, -99.439275); //create map function createmap() { map = new google.maps.map(document.getelementbyid("map"), { center: mapcenter, zoom: 5, maptypeid: google.maps.maptypeid.hybrid, zoomcontrol: true, streetviewcontrol: true, zoomcontroloptions: { style: google.maps.zoomcontrolstyle.large } }); //create global infowindow show content //set maxwidth of 300 pixel infowindow = new google.maps.infowindow({ maxwidth: 300, map: map }); } function initmarkers() { (var i=0; i<places.length; i++) { var place=places[i]; var marker = new google.maps.marker({ position: new google.maps.latlng(place[1], place[2],place[3]), map: map, //set icon, category icons index //outcomment line if want show defuult icon icon : icons[place[3]], //add data places marker title : place[0], category: place[3], content: place[4] }); //add marker markersarray, used hide/show markers markersarray.push(marker); //create click event shows infowindow when marker clicked //the infowindow latlng , content marker google.maps.event.addlistener(marker, 'click', function() { infowindow.setposition(this.position); infowindow.setcontent(this.content); infowindow.open(map); }); } } //show / hide markers based on category //if category 0, show markers function showmarkersbycategory(category) { (var i=0; i<markersarray.length; i++) { if ((category==0) || (markersarray[i].category==category)) { markersarray[i].setvisible(true); } } } function initialize() { createmap(); initmarkers(); //init select box show/hide markers per category var checkbox=document.getelementbyid('checkbox'); checkbox.onclick = function() { (var i=0; i<markersarray.length; i++) { markersarray[i].setvisible(false); } var checkedboxes = $('#checkbox > input:checkbox:checked'); (var = 0; < checkedboxes.length; i++){ var category = checkedboxes[i].value; showmarkersbycategory(category); } } } google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <body> <div id="map" style="width:100%;height:800px;float:left;clear:none;"></div> <div style="position: absolute; left: 5px; top: 20px; padding: 10px 10px 10px 10px;"> <br> <form id="checkbox"> <input type="checkbox" name="group1" value="1"><b>group 1</b>  <input type="checkbox" name="group2" value="2"><b>group 2</b>  <input type="checkbox" name="group3" value="3"><b>group 3</b>  <input type="checkbox" name="group4" value="4"><b>group 4</b>   </form> </div> </body> </html>
you have "hanging" commas in code (commas after last entry of arrays). causes problems in older version of ie (they add null entry array). remove them.
i.e. change:
var places = [ ['group1', 47.364237, -92.690690, 3, '<h2>group (-11)</h2>'], ['group2', 43.711833, -95.719528, 1, '<h2>group (4)</h2>'], ['group3', 44.947385, -92.854821, 2, '<h2>group (12)</h2>'], ['group4', 45.899306, -91.521083, 4, '<h2>group (-4)</h2>'], ['group5', 45.223620, -91.127480, 1, '<h2>group (3)</h2>'], ['group6', 46.448371, -90.166895, 2, '<h2>group (7)</h2>'], ['group7', 40.471315, -107.580322, 2, '<h2>group (1)</h2>'], ['group8', 38.208628, -104.574672, 1, '<h2>group (5)</h2>'], ['group9', 39.623084, -104.452554, 2, '<h2>group (10)</h2>'], ['group10', 33.186694, -101.407897, 3, '<h2>group (-6)</h2>'], ['group11', 32.210741, -103.262702, 1, '<h2>group (6)</h2>'], ['group12', 33.991050, -103.858130, 2, '<h2>group (11)</h2>'], // <<-- remove comma here ]; to:
var places = [ ['group1', 47.364237, -92.690690, 3, '<h2>group (-11)</h2>'], ['group2', 43.711833, -95.719528, 1, '<h2>group (4)</h2>'], ['group3', 44.947385, -92.854821, 2, '<h2>group (12)</h2>'], ['group4', 45.899306, -91.521083, 4, '<h2>group (-4)</h2>'], ['group5', 45.223620, -91.127480, 1, '<h2>group (3)</h2>'], ['group6', 46.448371, -90.166895, 2, '<h2>group (7)</h2>'], ['group7', 40.471315, -107.580322, 2, '<h2>group (1)</h2>'], ['group8', 38.208628, -104.574672, 1, '<h2>group (5)</h2>'], ['group9', 39.623084, -104.452554, 2, '<h2>group (10)</h2>'], ['group10', 33.186694, -101.407897, 3, '<h2>group (-6)</h2>'], ['group11', 32.210741, -103.262702, 1, '<h2>group (6)</h2>'], ['group12', 33.991050, -103.858130, 2, '<h2>group (11)</h2>'] // <<-- remove comma here ];
Comments
Post a Comment