here demo jsfiddle
as can see that, checkboxed on google map not checked. make them checked on page load , show markers.
here code
var map; var var_location = new google.maps.latlng(45.430817, 12.331516); function map_init() { var var_mapoptions = { center: {lat:45,lng:-23}, zoom: 2, maptypeid: google.maps.maptypeid.roadmap, pancontrol: false, rotatecontrol: false, streetviewcontrol: false, scrollwheel: false, }; map = new google.maps.map(document.getelementbyid("map"), var_mapoptions); var contentstring = '<div id="mapinfo">' + '<p><strong>peggy guggenheim collection</strong><br>' + 'dorsoduro, 701-704<br>' + '30123, venezia<br>' + 'p: (+39) 041 240 5411</p>' + '</div>'; var var_infowindow = new google.maps.infowindow({ content: contentstring }); var var_marker = new google.maps.marker({ position: var_location, map: map, icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png', title: "click information guggenheim museum in venice", maxwidth: 200, maxheight: 200 }); google.maps.event.addlistener(var_marker, 'click', function () { var_infowindow.open(map, var_marker); }); //use buttons-div map-control map.controls[google.maps.controlposition.top_right].push(ctrl[0]); } var places = { restaurant: { label: 'restaurants', //the category may default-checked when want //uncomment next line //checked:true, icon: 'https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png', items: [ ['melt bar , grill', 41.485345, -81.799047], ['sloane pub', 41.486182, -81.824178], ['spitfire salon', 41.479670, -81.768430], ['mahall\'s', 41.476989, -81.781094], ['szechwan garden', 41.485615, -81.787890] ] }, park: { label: 'parks', //the category may default-checked when want //uncomment next line //checked:true, icon: 'https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png', items: [ ['lakewood park', 41.494457, -81.797605], ['madison park', 41.476969, -81.781929], ['tuland park', 41.464052, -81.788041] ] } }, infowindow = new google.maps.infowindow(), // div place buttons ctrl = $('<div/>').css({ background: '#fff', border: '1px solid #000', padding: '4px', margin: '2px', textalign: 'center' }); //show all-button ctrl.append($('<input>', { type: 'button', value: 'show all' }) .click(function () { $(this).parent().find('input[type="checkbox"]') .prop('checked', true).trigger('change'); })); ctrl.append($('<br/>')); //clear all-button ctrl.append($('<input>', { type: 'button', value: 'clear all' }) .click(function () { $(this).parent().find('input[type="checkbox"]') .prop('checked', false).trigger('change'); })); ctrl.append($('<hr/>')); //now loop on categories $.each(places, function (c, category) { //a checkbox fo category var cat = $('<input>', { type: 'checkbox' }).change(function () { $(this).data('goo').set('map', (this.checked) ? map : null); }) //create data-property google.maps.mvcobject //this mvc-object show/hide category .data('goo', new google.maps.mvcobject) .prop('checked', !! category.checked) //this initialize map-property of mvcobject .trigger('change') //label checkbox .appendto($('<div/>').css({ whitespace: 'nowrap', textalign: 'left' }) .appendto(ctrl)) .after(category.label); //loop on items(markers) $.each(category.items, function (m, item) { var marker = new google.maps.marker({ position: new google.maps.latlng(item[1], item[2]), title: item[0], icon: category.icon }); //bind map-property of marker map-property //of mvcobject has been stored checkbox-data marker.bindto('map', cat.data('goo'), 'map'); google.maps.event.addlistener(marker, 'click', function () { infowindow.setcontent(item[0]); infowindow.open(map, this); }); }); }); google.maps.event.adddomlistener(window, 'load', map_init); i tried put
.prop('checked', ture) instead of
.prop('checked', !! category.checked) but not work.
thanks in advance help
create "show all"-button @ end, may trigger click on button:
function map_init() { var var_mapoptions = { center: new google.maps.latlng(41.478189, -81.798588), zoom: 13, maptypeid: google.maps.maptypeid.roadmap, pancontrol: false, rotatecontrol: false, streetviewcontrol: false }; map = new google.maps.map(document.getelementbyid("map"), var_mapoptions); var contentstring = '<div id="mapinfo">' + '<p><strong>peggy guggenheim collection</strong><br>' + 'dorsoduro, 701-704<br>' + '30123, venezia<br>' + 'p: (+39) 041 240 5411</p>' + '</div>'; var var_infowindow = new google.maps.infowindow({ content: contentstring }); var var_marker = new google.maps.marker({ position: new google.maps.latlng(45.430817, 12.331516), map: map, icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png', title: "click information guggenheim museum in venice", maxwidth: 200, maxheight: 200 }); google.maps.event.addlistener(var_marker, 'click', function () { var_infowindow.open(map, var_marker); }); // div place buttons ctrl = $('<div/>').css({ background: '#fff', border: '1px solid #000', padding: '4px', margin: '2px', textalign: 'center' })[0]; map.controls[google.maps.controlposition.right_bottom].push(ctrl); ctrl=$(ctrl); var places = { restaurant: { label: 'restaurants', //the category may default-checked when want //uncomment next line //checked:true, icon: 'https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png', items: [ ['melt bar , grill', 41.485345, -81.799047], ['sloane pub', 41.486182, -81.824178], ['spitfire salon', 41.479670, -81.768430], ['mahall\'s', 41.476989, -81.781094], ['szechwan garden', 41.485615, -81.787890] ] }, park: { label: 'parks', //the category may default-checked when want //uncomment next line //checked:true, icon: 'https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png', items: [ ['lakewood park', 41.494457, -81.797605], ['madison park', 41.476969, -81.781929], ['tuland park', 41.464052, -81.788041] ] } }, infowindow = new google.maps.infowindow(); //clear all-button ctrl.append($('<input>', { type: 'button', value: 'clear all' }) .click(function () { $(this).parent().find('input[type="checkbox"]') .prop('checked', false).trigger('change'); })); ctrl.append($('<hr/>')); //now loop on categories $.each(places, function (c, category) { //a checkbox fo category var cat = $('<input>', { type: 'checkbox' }).change(function () { $(this).data('goo').set('map', (this.checked) ? map : null); }) //create data-property google.maps.mvcobject //this mvc-object show/hide category .data('goo', new google.maps.mvcobject) .prop('checked', !! category.checked) //this initialize map-property of mvcobject .trigger('change') //label checkbox .appendto($('<div/>').css({ whitespace: 'nowrap', textalign: 'left' }) .appendto(ctrl)) .after(category.label); //loop on items(markers) $.each(category.items, function (m, item) { var marker = new google.maps.marker({ position: new google.maps.latlng(item[1], item[2]), title: item[0], icon: category.icon }); //bind map-property of marker map-property //of mvcobject has been stored checkbox-data marker.bindto('map', cat.data('goo'), 'map'); google.maps.event.addlistener(marker, 'click', function () { infowindow.setcontent(item[0]); infowindow.open(map, this); }); }); }); //show all-button ctrl.prepend($('<br/>')); $('<input>', { type: 'button', value: 'show all' }) .click(function () { $(this).parent().find('input[type="checkbox"]') .prop('checked', true).trigger('change'); }).prependto(ctrl).click(); } google.maps.event.adddomlistener(window, 'load', map_init);html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3"></script> <div id="map" ></div>
Comments
Post a Comment