CoString of GMap Remove Markers
n/a
View this example full screen.
n/a
/* In this example, the marker is created when the user clicks on the map/canvas. ** The markers are maintained by an array. ** The user can click the panel buttons to hide, show or delete the markers. */ var g_oCoStrMap = null; var g_aMarkers = []; function initialize() { var oPos = new google.maps.LatLng(24.880650, 121.065427); var oMapOptions = { coStrType: zhupiter.CoStr.CoStrType.GMAP, center: oPos, zoom: 12 }; g_oCoStrMap = new zhupiter.CoStr.Map(document.getElementById('map_canvas'), oMapOptions); addMarker(oPos); zhupiter.CoStr.event.addListener(g_oCoStrMap, 'click', function(oInEv) { addMarker(oInEv.latLng); }); } function addMarker(oInPos) { var oMarker = new zhupiter.CoStr.Marker({ coStrMap: g_oCoStrMap, position: oInPos }); g_aMarkers.push(oMarker); } function showAllMarkers() { for ( var iI = 0; g_aMarkers.length > iI; iI++ ) { g_aMarkers[iI].setMap(g_oCoStrMap); } } function hideAllMarkers() { for ( var iI = 0; g_aMarkers.length > iI; iI++ ) { g_aMarkers[iI].setMap(null); } } function deleteAllMarkers() { hideAllMarkers(); g_aMarkers = []; } zhupiter.CoStr.event.addDomListener(window, 'load', initialize);
<!DOCTYPE html> <html> <head> <meta name='viewport' content='initial-scale=1.0, user-scalable=no'> <meta charset='utf-8'> <title>GMap Remove Markers</title> <style> html, body, #map_canvas { height: 100%; margin: 0px; padding: 0px } #panel { position: absolute; top: 5px; left: 50%; margin-left: -200px; border: 1px solid blue; padding: 5px; background-color: #fefefe; z-index: 10; } </style> <script src='https://maps.googleapis.com/maps/api/js'></script> <script src='//costr.zhupiter.com/js/'></script> <script> /* In this example, the marker is created when the user clicks on the map/canvas. ** The markers are maintained by an array. ** The user can click the panel buttons to hide, show or delete the markers. */ var g_oCoStrMap = null; var g_aMarkers = []; function initialize() { var oPos = new google.maps.LatLng(24.880650, 121.065427); var oMapOptions = { coStrType: zhupiter.CoStr.CoStrType.GMAP, center: oPos, zoom: 12 }; g_oCoStrMap = new zhupiter.CoStr.Map(document.getElementById('map_canvas'), oMapOptions); addMarker(oPos); zhupiter.CoStr.event.addListener(g_oCoStrMap, 'click', function(oInEv) { addMarker(oInEv.latLng); }); } function addMarker(oInPos) { var oMarker = new zhupiter.CoStr.Marker({ coStrMap: g_oCoStrMap, position: oInPos }); g_aMarkers.push(oMarker); } function showAllMarkers() { for ( var iI = 0; g_aMarkers.length > iI; iI++ ) { g_aMarkers[iI].setMap(g_oCoStrMap); } } function hideAllMarkers() { for ( var iI = 0; g_aMarkers.length > iI; iI++ ) { g_aMarkers[iI].setMap(null); } } function deleteAllMarkers() { hideAllMarkers(); g_aMarkers = []; } zhupiter.CoStr.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="panel"> <input onclick="showAllMarkers();" type=button value="Show all markers"> <input onclick="hideAllMarkers();" type=button value="Hide all markers"> <input onclick="deleteAllMarkers();" type=button value="Delete all markers"> </div> <div id='map_canvas'></div> <p>Click on the map/canvas to add markers.</p> </body> </html>
CoString | Donate bitcoin: 1LX5KC19tXCPK8y72Z6LVoZjoSaCp9P6K