Map that works with form fields - supports lat, long & address

location-selector

if ($('.location-selector').length > 0) {
  var map;
  var markersArray = [];

  // init map
  function initMap() {
    var currentLat = -33.9253;
    var currentLng = 18.4239;
    var branchLocation = {lat: currentLat, lng: currentLng};

    // set map center
    if ($('#branchlat').val().length > 0) {
      currentLat = Number($('#branchlat').val());
      currentLng = Number($('#branchlng').val());
      branchLocation = {lat: currentLat, lng: currentLng};
    }

    // Build map
    var map = new google.maps.Map(document.getElementById('map-input'), {
      zoom: 6,
      center: branchLocation,
      disableDoubleClickZoom: true
    });


    var marker = new google.maps.Marker({
      position: {lat: currentLat, lng: currentLng},
      map: map,
      title: "Branch location"
    });

    if (!$('#branchlat').val().length > 0) {
      $('#branchlat').val(currentLat);
      $('#branchlng').val(currentLng);
    }

    // Change location on click
    google.maps.event.addListener(map, "dblclick", function(event) {
      var latVar        = event.latLng.lat();
      var lngVar        = event.latLng.lng();

      // populate inputs
      $('#branchlat').val(latVar);
      $('#branchlng').val(lngVar);

      // change marker pin location
      var latlng = new google.maps.LatLng(latVar, lngVar);
      marker.setPosition(latlng);
    });

    var idleListener = google.maps.event.addListener(map, 'idle', function() { //important for full map shown
      google.maps.event.trigger(map, 'resize');
      // google.maps.event.removeListener(idleListener);
    });

    var hoverListener = google.maps.event.addListener(map, 'mousemove', function() {
      google.maps.event.trigger(map, 'resize');
      // google.maps.event.removeListener(hoverListener);
    });

    // auto place marker
    $(document).on('keyup', '#branch_address', function(event) {

      google.maps.event.trigger(map, 'mousemove');
      console.log('adding address');

      		typewatch(function () {
      			api_request('https://maps.googleapis.com/maps/api/geocode/json?address=' + $('#branch_address').val(), 'get', {}, function(data) {

              var latVar        = data.results[0].geometry.location.lat;
              var lngVar        = data.results[0].geometry.location.lng;

              // populate inputs
              $('#branchlat').val(latVar);
              $('#branchlng').val(lngVar);

              var center = new google.maps.LatLng(latVar, lngVar);
              // using global variable:
              map.panTo(center);

              // change marker pin location
              var latlng = new google.maps.LatLng(latVar, lngVar);
              marker.setPosition(latlng);
      			});
      	  }, 1500);
      	});
      }
      initMap();
    }