Close map marker

• viorelepuran

• January 2, 2018 at 11:22 pm

Hello guys,

I am building a map directory, where i can show all markers in a map.The problem i am facing is that the markers stay open when i click on a new marker.

Can anyone help me get this working so that when a new marker is open, the previous marker gets closed?

This is the page where i am working:
https://directory.dieselworldmag.com/

This is the js i am using:

function initialize() {
geocoder = new google.maps.Geocoder();
}

(function($) {

function new_map( $el ) {
var $markers = $el.find(‘.marker’);
var args = {
zoom : 13,
center : new google.maps.LatLng(39.8333333, -98.585522),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map( $el[0], args);
map.markers = [];
$markers.each(function(){

add_marker( $(this), map );

});

google.maps.event.addDomListener(document.getElementById(‘getzip’), ‘click’, function() {
var address = document.getElementById(“postcode”).value;
var loc=[];
geocoder.geocode({
‘address’: address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {

map.setCenter({lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng()});
circle.setCenter({lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng()});
} else {
alert(“Geocode was not successful for the following reason: ” + status);
}
});

});

google.maps.event.addDomListener(
document.getElementById(‘directory_radius’), ‘change’, function() {
var selectedvalue = document.getElementById(‘directory_radius’).options[document.getElementById(‘directory_radius’).selectedIndex].value;
if (selectedvalue === “8046”) {
circle.setRadius(8046);
map.setZoom(14);
}
if (selectedvalue === “16093”) {
circle.setRadius(16093);
map.setZoom(13);
}
if (selectedvalue === “24140”) {
circle.setRadius(24140);
map.setZoom(13);
}
if (selectedvalue === “32186”) {
circle.setRadius(32186);
map.setZoom(12);
}
if (selectedvalue === “40233”) {
circle.setRadius(40233);
map.setZoom(12);
}
if (selectedvalue === “48280”) {
circle.setRadius(48280);
map.setZoom(11);
}
if (selectedvalue === “56327”) {
circle.setRadius(56327);
map.setZoom(11);
}
if (selectedvalue === “64373”) {
circle.setRadius(64373);
map.setZoom(10);
}
if (selectedvalue === “72420”) {
circle.setRadius(72420);
map.setZoom(10);
}
if (selectedvalue === “80467”) {
circle.setRadius(80467);
map.setZoom(9);
}
if (selectedvalue === “96560”) {
circle.setRadius(96560);
map.setZoom(9);
}
if (selectedvalue === “112654”) {
circle.setRadius(112654);
map.setZoom(8);
}
if (selectedvalue === “128747”) {
circle.setRadius(128747);
map.setZoom(8);
}
if (selectedvalue === “144841”) {
circle.setRadius(144841);
map.setZoom(7);
}
if (selectedvalue === “160934”) {
circle.setRadius(160934);
map.setZoom(7);
}
});

var markermeq = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(39.8333333, -98.585522),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
},
title: ‘Your location’
});
var circle = new google.maps.Circle({
map: map,
radius: 8046, // 10 miles in metres
fillColor: ‘#a9a9a9’,
strokeColor: ‘#3c3c3c’,
});
circle.bindTo(‘center’, markermeq, ‘position’);

navigator.geolocation.watchPosition(function(position) {
},
function (error) {
if (error.code == error.PERMISSION_DENIED)
$(‘.warning’).append(‘<div class=”location_error”><div class=”location_error_hide”>X</div>Enabling your location will help you get better results near you.<br>See more here.</div>’);

$(document).on(‘click’, ‘.location_error_hide’, function(){
$(‘.warning’).empty();
});
});

$(window).load(function() {
$(‘.directory_radius’).val(‘80467’);
circle.setRadius(80467);
map.setZoom(9);
});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
markermeq.setVisible(false);
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map.setCenter(pos);
var markerme = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
},
title: ‘Your location’
});

google.maps.event.addDomListener(document.getElementById(‘getzip’), ‘click’, function() {
var address = document.getElementById(“postcode”).value;
var loc=[];
geocoder.geocode({
‘address’: address
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {

map.setCenter({lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng()});
circle.setCenter({lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng()});
} else {
}
});

});

google.maps.event.addDomListener(
document.getElementById(‘directory_radius’), ‘change’, function() {
var selectedvalue = document.getElementById(‘directory_radius’).options[document.getElementById(‘directory_radius’).selectedIndex].value;
if (selectedvalue === “8046”) {
circle.setRadius(8046);
map.setZoom(14);
}
if (selectedvalue === “16093”) {
circle.setRadius(16093);
map.setZoom(13);
}
if (selectedvalue === “24140”) {
circle.setRadius(24140);
map.setZoom(13);
}
if (selectedvalue === “32186”) {
circle.setRadius(32186);
map.setZoom(12);
}
if (selectedvalue === “40233”) {
circle.setRadius(40233);
map.setZoom(12);
}
if (selectedvalue === “48280”) {
circle.setRadius(48280);
map.setZoom(11);
}
if (selectedvalue === “56327”) {
circle.setRadius(56327);
map.setZoom(11);
}
if (selectedvalue === “64373”) {
circle.setRadius(64373);
map.setZoom(10);
}
if (selectedvalue === “72420”) {
circle.setRadius(72420);
map.setZoom(10);
}
if (selectedvalue === “80467”) {
circle.setRadius(80467);
map.setZoom(9);
}
if (selectedvalue === “96560”) {
circle.setRadius(96560);
map.setZoom(9);
}
if (selectedvalue === “112654”) {
circle.setRadius(112654);
map.setZoom(8);
}
if (selectedvalue === “128747”) {
circle.setRadius(128747);
map.setZoom(8);
}
if (selectedvalue === “144841”) {
circle.setRadius(144841);
map.setZoom(7);
}
if (selectedvalue === “160934”) {
circle.setRadius(160934);
map.setZoom(7);
}
});

var circle = new google.maps.Circle({
map: map,
radius: 80467, // 10 miles in metres
fillColor: ‘#a9a9a9’,
strokeColor: ‘#3c3c3c’
});
circle.bindTo(‘center’, markerme, ‘position’);

}, function() {
handleLocationError(true, map.getCenter());
});
function handleLocationError()
{

}
} else {
var $location_error = $(‘.location_error’);
$location_error.show();
setTimeout( function(){
$location_error.hide();
}, 1000*10);
}
// Add circle overlay and bind to marker

return map;
}

function add_marker( $marker, map ) {
var latlng = new google.maps.LatLng( $marker.attr(‘data-lat’), $marker.attr(‘data-lng’) );
var icon = $marker.attr(‘data-icon’);
var marker = new google.maps.Marker({
position : latlng,
map : map,
icon : icon
});
map.markers.push( marker );
if( $marker.html() )
{
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
google.maps.event.addListener(marker, ‘click’, function() {
infowindow.open( map, marker );
});
google.maps.event.addListener(map, “click”, function(event) {
infowindow.close();
});

}

}

function center_map( map ) {
var bounds = new google.maps.LatLngBounds();
$.each( map.markers, function( i, marker ){
var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
bounds.extend( latlng );
});
if( map.markers.length === 1 )
{
map.setCenter( bounds.getCenter() );
map.setZoom( 16 );
}
else
{
map.fitBounds( bounds );
}
}

var map = null;

$(document).ready(function(){
$(‘.acf-map’).each(function(){
map = new_map( $(this) );
});

});
})(jQuery);