google_geo_location.js

google_geo_location.html

    <script>
      var map = false;
      var markers = [];
      var infoWindow;
      var locationSelect;

      function initMap() {
        if (typeof google === 'undefined' || google === null) {
          setTimeout(initMap, 300);
          return;
        }
        if (map) return;
        var ny = { lat: 37.6026891, lng: -80.9987206 };
        map = new google.maps.Map(document.getElementById('map'), {
          center: ny,
          zoom: 5,
          mapTypeId: 'roadmap',
          mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }
        });
        infoWindow = new google.maps.InfoWindow();


        locationSelect = document.getElementById("locationSelect");
        locationSelect.onchange = function () {
          var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
          if (markerNum != "none") {
            google.maps.event.trigger(markers[markerNum], 'click');
          }
        };

        if (cLat) {
          setTimeout(function(){
            searchLocationsNear(cLat, cLng);
          }, 200);
        }
      }

      function searchLocations() {
        var address = document.getElementById("addressInput").value;
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ address: address }, function (results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            var center = results[0].geometry.location;
            searchLocationsNear(center.lat(), center.lng());
          } else {
            alert(address + ' not found');
          }
        });
      }

      function clearLocations() {
        infoWindow.close();
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(null);
        }
        markers.length = 0;

        locationSelect.innerHTML = "";
        var option = document.createElement("option");
        option.value = "none";
        option.innerHTML = "See all results:";
        locationSelect.appendChild(option);
      }

      function searchLocationsNear(lat, lng) {
        $('#contactNote').show();
        
        clearLocations();

        // var radius = document.getElementById('radiusSelect').value;
        var radius = 100;
        var searchUrl = '/findstore/search?lat=' + lat + '&lng=' + lng + '&radius=' + radius;
        jQuery.get(searchUrl, function (data) {
          jQuery('#markerList').html('');
          var xml = jQuery.parseXML(data);
          var markerNodes = xml.documentElement.getElementsByTagName("marker");
          var bounds = new google.maps.LatLngBounds();
          for (var i = 0; i < markerNodes.length; i++) {
            var id = markerNodes[i].getAttribute("id");
            var name = markerNodes[i].getAttribute("name");
            var address = markerNodes[i].getAttribute("address");
            var address2 = markerNodes[i].getAttribute("address2");
            var phone = markerNodes[i].getAttribute("phone");
            var zip = markerNodes[i].getAttribute("zip");
            var state = markerNodes[i].getAttribute("state");
            var city = markerNodes[i].getAttribute("city");
            var distance = parseFloat(markerNodes[i].getAttribute("distance"));
            var latlng = new google.maps.LatLng(
              parseFloat(markerNodes[i].getAttribute("lat")),
              parseFloat(markerNodes[i].getAttribute("lng")));

            createOption(name, distance, i);
            createMarker(latlng, name, address, address2, phone, zip, state, city, distance);
            jQuery('#markerList').append('<div class="marker" data-i="'+(i+1)+'">' + makeMarkerHTML(name, address, address2, phone, zip, state, city, distance) + '</div>');

            bounds.extend(latlng);
          }
          $('#markerList .marker').click(function(){
            var markerNum = locationSelect.options[$(this).attr('data-i')].value;
            if (markerNum != "none") {
              locationSelect.selectedIndex = $(this).attr('data-i');
              google.maps.event.trigger(markers[markerNum], 'click');
              $('body,html').animate({
                scrollTop: 0                       // Scroll to top of body
              }, 500);
            }
          })

          map.fitBounds(bounds);
          locationSelect.style.visibility = "visible";
          locationSelect.onchange = function () {
            var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
            google.maps.event.trigger(markers[markerNum], 'click');
          };
        });
      }

      function makeMarkerHTML(name, address, address2, phone, zip, state, city, distance) {
        var html = "<b>" + name + "</b> <br/>" + address;
        if (city) html += ', '+city;
        if (state) html += ', '+state;
        if (zip) html += ' '+zip;

        if (address2) html += '; '+address2;
        if (phone) html += '<br/> phone: '+phone;
        if (distance) html += '<br/><br/> distance: '+distance.toFixed(2) + ' miles';

        var daddr = address + ' ' + address2 + ' ' + city + ' ' + state + ' ' + zip;
        html += '<br/><br/><a class="get-direction" target="_blank" href="https://maps.google.com/maps?daddr=' + daddr + '">Get Directions  <span>&gt;</span></a>';

        return html;
      }

      function createMarker(latlng, name, address, address2, phone, zip, state, city, distance) {
        var html = makeMarkerHTML(name, address, address2, phone, zip, state, city, distance);

        var marker = new google.maps.Marker({
          map: map,
          position: latlng
        });
        google.maps.event.addListener(marker, 'click', function () {
          infoWindow.setContent(html);
          infoWindow.open(map, marker);
        });
        markers.push(marker);
      }

      function createOption(name, distance, num) {
        var option = document.createElement("option");
        option.value = num;
        option.innerHTML = name;
        locationSelect.appendChild(option);
      }

      function doNothing() { }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?sensor=true&key=AIzaSyAdM5TbPwDOttg-sSQfshbVnKkuxKIUscg&callback=initMap">

google_geo_location.js

function clickCurrentLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      searchLocationsNear(position.coords.latitude, position.coords.longitude);
    }, function (error){
      switch(error.code) {
        case error.PERMISSION_DENIED:
            alert("User denied the request for Geolocation.");
            break;
        case error.POSITION_UNAVAILABLE:
 //           alert("Location information is unavailable.");
            window.location = 'https://www.esfwholesalefurniture.com/g.html';
            break;
        case error.TIMEOUT:
            alert("The request to get user location timed out.");
            break;
        case error.UNKNOWN_ERROR:
            alert("An unknown error occurred.");
            break;
      }
    }, {maximumAge:600000, timeout:5000, enableHighAccuracy: true});
  }
  else {
    alert('geolocation not supported');
  }
}