Chris Liotiris Chris Liotiris - 1 month ago 5x
HTML Question

Google maps api v3. function showMarkers() just hide/clear the NEW markers

I add new markers and push them in markers[] but I cannot show them again on the map. I have read may forums and threads (google developers etc) but I cannot figure it out. any help and suggestion would be appreciated. thanks in advance.

var map;
var markers = []; //markers is an array variable with global scope
var myLatLng = {lat: 40.6069135, lng: 22.9566052};
//var labelIndex = 0;

var locations = [
['First Fire Station', 40.635325, 22.955178],
['Second Fire Station', 40.645071, 22.926711],
['Third Fire Station', 40.599891, 22.956932],
['Observer 1', 40.631225, 23.031213],
['Observer 2', 40.604363, 23.032420]

function initMap() {
var infowindow = new google.maps.InfoWindow();

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: myLatLng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_RIGHT,
mapTypeIds: ['roadmap', 'terrain', 'satellite']

function placeMarker( loc ) {
var latLng = new google.maps.LatLng( loc[1], loc[2]);
var marker = new google.maps.Marker({
position: latLng,
map: map

google.maps.event.addListener(marker, 'click', function(){
infowindow.close(); // Close previously opened infowindow
infowindow.setContent( "<div id='infowindow'>"+ loc[0] +"</div>");, marker);

for (var i = 0; i < locations.length; i++){

// This event listener will call addMarker() when the map is clicked.
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng, map);

// Adds a marker to the map and push to the array.
function addMarker(location, map) {
var marker = new google.maps.Marker({
position: location,
//label: labels[labelIndex++ % labels.length],
map: map

// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {

// Shows any markers currently in the array.
function showMarkers() {

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
markers = [];

<!DOCTYPE html>
<title>cl 1.2</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script async defer src=""
<script src="script.js"></script>
<script async defer>
<script async defer src=",places">
html, body {height: 100%; margin: 0; padding: 0;}
#map {height: 100%;}
#infowindow {padding: 10;}
#floating-panel {position: absolute; top: 50px; left: 40%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px;}
<div id="map"></div>
<div id="infowindow"></div>
<div id="floating-panel">
<input onclick="clearMarkers();" type=button value="Hide Markers">
<input onclick="showMarkers();" type=button value="Show All Markers">
<input onclick="deleteMarkers();" type=button value="Delete Markers">


//for deleting all your markers try this way

for (Marker m : markers) {

and for adding them again you need to traverse through array and call addMarker() method