Skip to content

Instantly share code, notes, and snippets.

@bjornbjorn

bjornbjorn/map.html

Last active November 20, 2017 13:17
Show Gist options
  • Save bjornbjorn/7428321 to your computer and use it in GitHub Desktop.
Save bjornbjorn/7428321 to your computer and use it in GitHub Desktop.
Download ZIP
Search bar + drag and drop pin to let users specify a geolocation - results saved to lat/long input fields (which can be hidden in the form)
Raw
map.html
<!DOCTYPE html>
<html lang="nb">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<form>
<input type="text" id="user_location" name="user_location" class="register-form__location-holder"> <a href="#" class="button button--small register-wizard__map-search-button">Search adr.</a>
<div style="width:100%;height:300px" id="register-form__map" class="register-form__map register-form__map--user"></div>
lat: <input name="user_latitude" value="" class="register-form__latitude-holder">
long: <input name="user_longitude" value="" class="register-form__longitude-holder">
</form>
<script>
$(document).ready(function(e) {
// init map
function initMap(lat, long) {
var center = new google.maps.LatLng(parseFloat(lat), long);
var mapOptions = {center: center, zoom: 16, scrollwheel: false};
map = new google.maps.Map(document.getElementById("register-form__map"), mapOptions);
marker = new google.maps.Marker({position: new google.maps.LatLng(lat, long), draggable:true, map: map,title: 'Test'});
google.maps.event.addListener(marker, 'dragend', function (event) {
var lat = this.getPosition().lat();
var long = this.getPosition().lng();
initMap(lat, long);
$('.register-form__latitude-holder').val(lat);
$('.register-form__longitude-holder').val(long);
});
}
/**
* Geocode when user location input changes
*/
$('body').on('change', '.register-form__location-holder', function(e) {
var address = $(this).val();
var geocoder = new google.maps.Geocoder();
if (geocoder) {
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results[0].geometry.location);
var lat = results[0].geometry.location.lat();
var long = results[0].geometry.location.lng();
console.log("lat="+lat);
initMap(lat, long);
$('.register-form__latitude-holder').val(lat);
$('.register-form__longitude-holder').val(long);
}
else {
alert("Kunne ikke finne denne adressen, vennligst skriv en i nærheten og dra pin'en på kartet nærmest mulig riktig posisjon.");
$('.register-form__latitude-holder').focus().select();
}
});
}
});
var lat = $('.register-form__latitude-holder').val();
var long = $('.register-form__longitude-holder').val();
initMap(lat, long);
});
</script>
</body>
</html>
@sivajsl
Copy link

sivajsl commented Nov 20, 2017

I have some doubt when I drag a pin it's working after I was enter in text value.it's did't working.please help me

@sivajsl
Copy link

sivajsl commented Nov 20, 2017

componentDidMount() {
const { draggable, locationArea ,country } = this.state;
this.initMap(this);
}

initMap = (superThis) => {
    const {draggable, locationArea, country} = superThis.state;
    var formProps = {};
    const google = window.google
    var geocoder = new google.maps.Geocoder;
    var latlng = {lat: -33.8688, lng: 151.2195}
    var map = new google.maps.Map(document.getElementById('map'), {
        center: latlng,
        zoom: 13
    });
    var input = document.getElementById('pac-input');
    map.controls[google.maps.ControlPosition.TOP_RIGHT];
    var autocomplete = '';
        autocomplete = new google.maps.places.Autocomplete(input);
            // Bind the map's bounds (viewport) property to the autocomplete object,
            // so that the autocomplete requests use the current map bounds for the
            // bounds option in the request.
            autocomplete.bindTo('bounds', map);
    var infowindow = new google.maps.InfoWindow();
    var infowindowContent = document.getElementById('infowindow-content');
    infowindow.setContent(infowindowContent);
    var marker = new google.maps.Marker({
        map: map,
        position: latlng,
        draggable:true,
        anchorPoint: new google.maps.Point(0, -29)
    });
    google.maps.event.addListener(marker, 'dragend', function (event) {
        var latlng = {lat: this.getPosition().lat(), lng: this.getPosition().lng()};
        geocoder.geocode({'location': latlng}, function(results, status) {
            if (status === 'OK') {
                if (results[0]) {
                    map.setZoom(11);
                    var marker = new google.maps.Marker({
                        position: latlng,
                        map: map
                    });
                document.getElementById('pac-input').value = results[0].formatted_address;
                let test  =  document.getElementById('pac-input');
                autocomplete = new google.maps.places.Autocomplete(test);
                autocomplete.bindTo('bounds', map);
                let place = autocomplete.getPlace();
                infowindow.setContent(results[0].formatted_address); 
                infowindow.open(map, marker);
                superThis.googleMap(results[0], superThis); 
            
            } else {
            //   window.alert('No results found');
            }
          } else {
            // window.alert('Geocoder failed due to: ' + status);
          }
        });
    });
    autocomplete.addListener('place_changed', function() {
        infowindow.close();
        marker.setVisible(false);
        let place = autocomplete.getPlace();
        if (!place.geometry) {
            // User entered the name of a Place that was not suggested and
            // pressed the Enter key, or the Place Details request failed.
            window.alert("No details available for input: '" + place.name + "'");
            return;
        }

        // If the place has a geometry, then present it on a map.
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);  // Why 17? Because it looks good.
        }
        marker.setPosition(place.geometry.location);
        marker.setVisible(true);
        superThis.googleMap(place, superThis)
        
    });
} 


googleMap = (place, superThis) => {
    var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name',
        street_address: 'long_name',
        postal_town: 'long_name',
        sublocality_level_1: 'long_name',
        administrative_area_level_2: 'long_name',
    };
    let addr={};
    for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            if(typeof addressType !== 'undefined' && addressType !== null && addressType==='postal_code'
                || addressType==='country' || addressType==='locality' || addressType==="street_number"
                 || addressType==='postal_town'|| addressType==='administrative_area_level_2'
                  || addressType==='sublocality_level_1' || addressType==='route') {
                addr[addressType] = val;
                superThis.setState({
                    locationArea: addr,
                    lat: place.geometry.location.lat(),
                    log: place.geometry.location.lng(),
                });
                superThis.setState({});
            }
        }
    }
    superThis.country(addr)
    superThis.stAddress(addr)
    superThis.city(addr)
    superThis.province(addr)
    superThis.postalCode(addr)
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment