marcelomunozr
9/28/2017 - 1:07 PM

Maps API with Geolocation, center on click my location, and various markers

Maps API with Geolocation, center on click my location, and various markers

var locations = [
  [
    "Location 1",
    "Bandera Esquina Agustinas",
    "-33.4408767",
    "-70.6521545"
  ],
  [
    "Location 2",
    "Av. libertador bernardo O'higgins 3390",
    "-33.4517146",
    "-70.6811136"
  ],
  [
    "Location 3",
    "Compañía 2305",
    "-33.43924860000001",
    "-70.6627823"
  ]
];

var geocoder = new google.maps.Geocoder();
var map;
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map"), {
      center: new google.maps.LatLng(0, 0),
      zoom: 5,
      disableDefaultUI: true,
      zoomControl: true,
      scrollwheel: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  // geocoder = new google.maps.Geocoder();

  for (i = 0; i < locations.length; i++) {
    geocodeAddress(locations, i);
  }
}
google.maps.event.addDomListener(window, "load", initialize);

function geocodeAddress(locations, i) {
  var title = locations[i][0];
  var address = locations[i][1];
  var url = locations[i][2];
  geocoder.geocode({
      'address': locations[i][1]
    },

    function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var marker = new google.maps.Marker({
          icon: 'assets/img/map-pine.png',
          map: map,
          position: results[0].geometry.location,
          title: title,
          address: address,
          url: url,
          animation: google.maps.Animation.DROP
        });
        infoWindow(marker, map, title, address, url);
        bounds.extend(marker.getPosition());
        map.fitBounds(bounds);
      } else {
        alert("geocode of " + address + " failed:" + status);
      }
    });
  geoLocate();
}

function infoWindow(marker, map, title, address, url, type) {
  google.maps.event.addListener(marker, 'click', function() {
    var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div><a href='" + url + "'>View location</a></p></div>";
    iw = new google.maps.InfoWindow({
      content: html,
      maxWidth: 350
    });
    iw.open(map, marker);
  });
}

function createMarker(results, html, type) {
  var marker = new google.maps.Marker({
    icon: type && type == 'here' ? 'assets/img/blue-marker-geolocation.png' : 'assets/img/map-pine.png',
    map: map,
    position: results,
    title: geocodeAddress.title,
    address: geocodeAddress.address,
    url: geocodeAddress.url,
    animation: google.maps.Animation.DROP
  });
  bounds.extend(marker.getPosition());
  map.fitBounds(bounds);
  map.setCenter(results);
  //zoom on click marker
  marker.addListener('click', function() {
    // map.setZoom(16);
    map.setCenter(marker.getPosition());
  });
  if (type != 'here')
    infoWindow(marker, map, geocodeAddress.title, geocodeAddress.address, geocodeAddress.url, type);
  return marker;
}

// geolocation
function geoLocate() {
  if (navigator.geolocation) {
    // console.log(markers);
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        'lat': position.coords.latitude,
        'lng': position.coords.longitude
      };
      map.setCenter(pos);
      // console.log(position);
      createMarker(new google.maps.LatLng(pos), '', 'here');

    }, function() {

      handleLocationError(true, infowindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infowindow, map.getCenter());
  }
}

// get actual location
var x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
$(document).ready(function() {
  $('#geoLocate').on('click', function() {
    $('#searchInput').attr('placeholder', 'Buscando ubicación...')
    console.log(geoLocate());
    geoLocate();
  });
});