I am new to Google Maps Api. I have done a lot so far and really like working with this. But there is one issue I would like your help with since I can't figure it out and it would save me a lot of time. How can I add a simple filter in my legend? Just a simple toggle checkbox that hides/shows markers. Would really appreciate any help I can get with this! This is my map now (with a lot more markers normally):
<head>
</script>
<script src="http://ift.tt/1URQe0G"
type="text/javascript"></script>
<div id="map" style="width: 100%; height: 420px;margin:10px 0px 30px;">
<div class="container">
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: new google.maps.LatLng(36.524500, -4.882175),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker1 = new google.maps.LatLng(36.521604, -5.046373);
var marker2 = new google.maps.LatLng(36.558387, -4.929676);
var marker3 = new google.maps.LatLng(36.503746, -4.843931);
var marker = new google.maps.Marker({
position: marker1,
url: 'marker1.html',
title: 'marker1',
icon: 'marker1.png',
map: map
});
google.maps.event.addListener(marker, 'click', function() {
window.open(this.url, '_blank');
});
var marker = new google.maps.Marker({
position: marker2,
url: 'marker2.html',
title: 'marker2',
icon: 'images/markers/marker2.png',
map: map
});
google.maps.event.addListener(marker, 'click', function() {
window.open(this.url, '_blank');
});
var marker = new google.maps.Marker({
position: marker3,
url: 'marker3',
title: 'marker3',
icon: 'images/markers/marker3.png',
map: map
});
google.maps.event.addListener(marker, 'click', function() {
window.open(this.url, '_blank');
});
</script>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire