Google maps display marker title when it appears on map

Question

Question1

So I have a map with markers and user location, Markers are on the map, but what I want to do is when user moves, and a marker appears on his way, pop-up it's title so it is visible without clicking, and make it disappear when marker is not longer visible.

How can that be done?

Question2:

How can I display over title, distance to that marker from user location?

Here's my code:

$(document).ready(function() {
var map;
var circle;
      var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        var icons = {
          parking: {
            icon: iconBase + 'parking_lot_maps.png'
          },
          library: {
            icon: iconBase + 'library_maps.png'
          },
          info: {
            icon: iconBase + 'info-i_maps.png'
          }
        };
function initializeMap(){
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 19,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
}
function locError(error) {
// the current position could not be located
    alert("The current position could not be found!");
}
function setCurrentPosition(position) {
    var accuracy = position.coords.accuracy;
    currentPositionMarker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude
        ),
        title: "Current Position",
        center: position,
        icon: iconBase + 'parking_lot_maps.png',
        animation: google.maps.Animation.DROP
    });
    map.panTo(new google.maps.LatLng(
        position.coords.latitude,
        position.coords.longitude
    ));
        circle = new google.maps.Circle({
        map: map,
  radius: accuracy,    // 10 miles in metres
  fillColor: '#255ebas'
});

circle.bindTo('center', currentPositionMarker, 'position')
}

function displayAndWatch(position) {
    // set current position
    setCurrentPosition(position);
    // watch position
    watchCurrentPosition(position);
}
function watchCurrentPosition(position) {
    var positionTimer = navigator.geolocation.watchPosition(
        function (position) {
            setMarkerPosition(
            currentPositionMarker,
            position,
        )
    });
}
function setMarkerPosition(marker, position) {
    circle.setRadius(position.coords.accuracy);
    marker.setPosition(
        new google.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude)
    );
        map.panTo(new google.maps.LatLng(
        position.coords.latitude,
        position.coords.longitude
    ));

}
function initLocationProcedure() {
    initializeMap();
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
        }else{
            alert("Your browser does not support the Geolocation API");
    }
}

$(document).ready(function() {
    initLocationProcedure();
});
var APPLICATION_ID = '75RQSC1OHE';
var SEARCH_ONLY_API_KEY = 'f2f1e9bba4d7390fc61523a04685cf12';
var INDEX_NAME = 'locations';
var PARAMS = { hitsPerPage: 100 };
// Client + Helper initialization
var algolia = algoliasearch(APPLICATION_ID, SEARCH_ONLY_API_KEY);
var algoliaHelper = algoliasearchHelper(algolia, INDEX_NAME, PARAMS);

// Map initialization
var markers = [];
//alert("heelo");
algoliaHelper.on('result', function(content) {
    renderHits(content);
  var i;
  // Add the markers to the map
  for (i = 0; i < content.hits.length; ++i) {
    var hit = content.hits[i];
    var marker = new google.maps.Marker({
      position: {lat: hit.longitude, lng: hit.latitude},
      map: map,
      title: hit.slug,
      animation: google.maps.Animation.DROP
    });

    markers.push(marker);
  }

});
function renderHits(content) {
  $('#container').html(JSON.stringify(content, null, 2));
}
algoliaHelper.search();

});

bobylito · Answer 1 · 2017-06-28T12:27:54.813

0

here you need to listen to the move on the map and update the bounding box afterward:

map.addListener('bounds_changed', function() {
  var bounds = map.getBounds();
  algoliaHelper.setQueryParameter("insideBoundingBox", bounds.toUrlValue()).search();
});

More infos on that on algolia doc: https://www.algolia.com/doc/guides/geo-search/geo-search-overview/#filter-inside-an-area

Algolia does not provide the distance to the center therefore it needs to be computed like explained in this stack overflow answer: https://stackoverflow.com/a/27943/654253

edited Jun 28 '17 at 12:27

answered Jun 26 '17 at 16:24

bobylito

3,172
22
27

Hi, how can I listen on the move and run the search let's say I want to see everything in radius of 200 meters. Also my algolia geo search doesn't work as it is not in _geo variable, does it have to be in it? – Przemek Wojtas Jun 26 '17 at 16:26
The data that contains the location of a record must be in the _geoloc attribute. I recommend you read this guide which is pretty exhaustive about the subject: https://www.algolia.com/doc/guides/geo-search/geo-search-overview/ – bobylito Jun 28 '17 at 12:29

Google maps display marker title when it appears on map

1 Answers1