I'm customizing the map using the Google Map API.
I was able to display multiple markers and change the type of markers, but
I cannot display or hide the marker at Zoom Level.
For example
Hide
when zoom level is "16" to "1"
Displayed when zoom level "17" or higher.
The code being created is as follows.
Thank you for your help.
HTML
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="path for js below" charset="UTF-8"></script>
<divid="map_canvas-1"></div>
JavaScript
var currentInfoWindow=null;
function initialize() {
var myLatlng = new google.maps.LatLng (34.4718128, 134.3301713);
varmyOptions={
zoom:16,
center —myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
varmap = new google.maps.Map( document.getElementById("map_canvas-1"), myOptions);
// --------------------------- Marker 1 ---------------
var LatLng1 = new google.maps.LatLng (34.4703269, 134.3330037); // ★ Marker Location
var contentString1 =
'<div class="mapbox">test1</div>';//★info-window description
var infowindow1 = new google.maps.InfoWindow({
content —ContentString 1
});
var image1 = new google.maps.MarkerImage('sample.png', // ★ marker type
new google.maps.Size (55,72),
new google.maps.Point(0,0),
new google.maps.Point(0,32));
varshadow1 = new google.maps.MarkerImage('http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png',//★Marker Shadow
new google.maps.Size (64,64),
new google.maps.Point(0,0),
new google.maps.Point(0,32));
varmarker1 = new google.maps.Marker({//★add marker)
position:LatLng1,
map —map,
title: "test1",
icon: image1,
shadow —show1,
animation —Google.maps.Animation.DROP
});
// ★ Display only one info window
google.maps.event.addListener(marker1, 'click', function() {//★click action
if(currentInfoWindow){
currentInfoWindow.close();
}
infowindow1.open(map,marker1);
currentInfoWindow=infowindow1;
});
// ----------------------------- Marker 2 -------------
var LatLng2 = new google.maps.LatLng (34.4718128, 134.3301713);
var contentString2 =
'<div class="mapbox">test2</div>';
var infowindow2 = new google.maps.InfoWindow({
content —ContentString 2
});
varimage2 = new google.maps.MarkerImage('sample.png',
new google.maps.Size (55,72),
new google.maps.Point(0,0),
new google.maps.Point(0,32));
varshadow2 = new google.maps.MarkerImage('http://maps.google.co.jp/mapfiles/ms/icons/rail.shadow.png',
new google.maps.Size (64,64),
new google.maps.Point(0,0),
new google.maps.Point(0,32));
varmarker2 = new google.maps.Marker({
position:LatLng2,
map —map,
title: "test2",
icon —image2,
shadow —shadow2,
animation —Google.maps.Animation.DROP
});
// ★ Display only one info window
google.maps.event.addListener(marker2, 'click', function() {//★click action
if(currentInfoWindow){
currentInfoWindow.close();
}
infowindow2.open(map, marker2);
currentInfoWindow=infowindow2;
});
} // last
The manipulation of the map can be picked up by the application depending on the event.
The zoom level change is the zoom_changed
event.
Official Documentation:
Events|Maps JavaScript API|Google Developers
To clear the marker, pass null to the marker's setMap
method.
marker.setMap(null)
© 2024 OneMinuteCode. All rights reserved.