I can't toggle the marker on checkbox selection. I have tried to find out here on stackoverflow but can't get any suitable answer.
I have 4 JSON file with coordinates and I have made 4 checkbox for different json file, When I click on tow or more checkbox the marker appears but when I unchecked marker did't disappear.
I have tried to use setMap(null) function but I get an error "setMap is undefined".
$(document).ready(function() {
var map;
var mapMarker;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 22.844700, lng: 78.939206},
zoom: 12,
mapTypeId : google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]
});
function interio() {
$.getJSON('json1', function(data) {
for (var i = 0; i < data.feed.entry.length; i++) {
var merker = new google.maps.Marker({
position: new google.maps.LatLng(data.feed.entry[i].gsx$lat.$t,data.feed.entry[i].gsx$longitude.$t),
map: map,
icon: "images/interio-marker.png"
});
}
});
}
function lock() {
$.getJSON('json2', function(data) {
for (var i = 0; i < data.feed.entry.length; i++) {
var merker = new google.maps.Marker({
position: new google.maps.LatLng(data.feed.entry[i].gsx$lat.$t,data.feed.entry[i].gsx$longitude.$t),
map: map,
icon: "images/lock-marker-png.png"
});
}
});
}
function mhe() {
$.getJSON('json3', function(data) {
for (var i = 0; i < data.feed.entry.length; i++) {
var merker = new google.maps.Marker({
position: new google.maps.LatLng(data.feed.entry[i].gsx$lat.$t,data.feed.entry[i].gsx$longitude.$t),
map: map,
icon: "images/mhe-png.png"
});
}
});
}
function appliance() {
$.getJSON('json4', function(data) {
for (var i = 0; i < data.feed.entry.length; i++) {
var merker = new google.maps.Marker({
position: new google.maps.LatLng(data.feed.entry[i].gsx$latitude.$t,data.feed.entry[i].gsx$longitude.$t),
map: map,
icon: "images/appliance-marker.png"
});
}
});
}
//current location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var marker = new google.maps.Marker({
position: new google.maps.LatLng(position.coords.latitude,position.coords.longitude),
map: map,
icon: 'images/blue.png'
});
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
$("input[name = 'mapButton']").on('click', function() {
if(($("#interio").is(':checked') === true) && ($("#lock").is(':checked') === true)) {
interio();
lock();
} else if (($("#interio").is(':checked') === true) && ($("#mhe").is(':checked') === true)) {
interio();
mhe();
} else if (($("#interio").is(':checked') === true) && ($("#appliance").is(':checked') === true)) {
interio();
appliance();
} else if (($("#interio").is(':checked') === true) && ($("#lock").is(':checked') === true) && ($("#mhe").is(':checked') === true)) {
interio();
lock();
mhe();
} else if (($("#interio").is(':checked') === true) && ($("#lock").is(':checked') === true) && ($("#appliance").is(':checked') === true)) {
interio();
lock();
appliance();
} else if(($("#interio").is(':checked') === true) && ($("#mhe").is(':checked') === true) && ($("#appliance").is(':checked') === true)) {
interio();
mhe();
appliance();
} else if (($("#interio").is(':checked') === true) && ($("#lock").is(':checked') === true) && ($("#mhe").is(':checked') === true) && ($("#appliance").is(':checked') === true)) {
interio();
lock();
mhe();
appliance();
}
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
};
google.maps.event.addDomListener(window, 'load', initMap);
});
html, body {
margin: 0px;
padding: 0px;
background-color: black;
}
.row {
max-width: 100% !important;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
.leftSidebar {
margin-top: 30px;
margin-left: 10px;
padding: 0px;
background-color: black;
}
.leftSidebar img {
width: 250px;
height: 120px;
}
.textLogo {
margin-top: 80px;
color: #EF3753;
font-weight: 400;
font-style: normal;
font-size: 40px;
font-family: 'PT Serif', serif;
line-height: 36px;
text-shadow: 1px 1px 0px #D21F02;
}
.compLogo {
color: #C4C4C4;
margin-top: 80px;
font-weight: 400;
font-style: normal;
font-size: 40px;
font-family: 'PT Serif', serif;
line-height: 36px;
text-shadow: 1px 1px 0px #cccccc;
}
.custom-button {
background-color: #EF3753;
}
.custom-button:hover, .custom-button:focus {
background-color: rgb(158, 34, 54);
}
#map {
display:block;
width:100%;
height:700px;
}
div label input {
margin-right:100px;
}
body {
font-family:sans-serif;
}
#ck-button {
margin:4px;
background-color:#EF3753;
overflow:auto;
float:left;
}
#ck-button label {
float:left;
width:6.0em;
}
#ck-button label span {
text-align: center;
padding: 12px 0px;
display: block;
}
#ck-button label input {
position:absolute;
left:-100px;
}
#ck-button input:hover + span {
background-color:#9E2236;
}
#ck-button input:checked + span {
background-color:#9E2236;
color:#fff;
}
#ck-button input:checked:hover + span {
background-color:#EF3753;
color:#fff;
}
<div id="ck-button">
<label>
<input type="checkbox" name="mapButton" value="1" title="Godrej Interio" id="interio"><span><img src="images/interior.png" alt="Interio" checked></span>
</label>
</div>
<div id="ck-button">
<label>
<input type="checkbox" name="mapButton" value="2" title="Godrej Lock" id="lock"><span><img src="images/lock.png"></span>
</label>
</div>
<div id="ck-button">
<label>
<input type="checkbox" name="mapButton" value="3" title="Godrej Material Handling" id="mhe"><span><img src="images/Material-handling.png"></span>
</label>
</div>
<div id="ck-button">
<label>
<input type="checkbox" name="mapButton" value="4" title="Godrej Appliances" id="appliance"><span><img src="images/appliance.png"></span>
</label>
</div>
Aucun commentaire:
Enregistrer un commentaire