Support

Account

Home Forums ACF PRO Close map marker

Unread

Close map marker

  • 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);

Viewing 1 post (of 1 total)

The topic ‘Close map marker’ is closed to new replies.