Укажите местонахождение по адресу или поместите маркер

Question

Я собираю пользовательскую форму для клиента. Они хотят иметь возможность установить место для Дома, которое они добавляют в эту форму.

Мне нужно два варианта для добавления местоположения. Один из них, набрав адрес в поле поиска на картах Google, и когда я нахожу маркер ввода, будет добавлен на карту.

Другим способом является перемещение маркера мышью, и в этом случае адрес необходимо обновить по положению маркера.

На карте может быть только один маркер (один адрес).

Любые хорошие примеры или рекомендации?

Благодаря

Answer 1

Я дам вам рабочую выборку функциональных возможностей вы описали. Но вы станете тем, кто включит концепцию в вашу собственную форму.

Один из них, набрав адрес в поле поиска на картах Google, и когда я нажму маркер ввода, будет добавлен на карту. Вот jsfiddle demo. Внутри слушателя searchBox.addListener('places_changed', function(e) {}, я помещаю функцию для создания маркера. Всякий раз, когда этот слушатель срабатывает из-за щелчка пользователем прогнозируемого адреса, маркер помещается в том же месте. Это не работает при вводе конкретных имен зданий. Это должен быть адрес.

Другим способом является перемещение маркера мышью, и в этом случае адрес необходимо обновить по положению маркера.

Вот jsfiddle demo. В этом демо вы начинаете с перетаскивания маркера в любом месте на карте. Когда закончится событие перетаскивания, «dragend», Infowindow будет заполнен текущим адресом, в котором находится маркер.

Не забудьте прочитать больше на Javascript Map samples.

Answer 2

JS код:

function initAutocomplete() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: 62, lng: 15}, 
    zoom: 5, 
    mapTypeId: 'roadmap' 
    }); 

    // Create the search box and link it to the UI element. 
    var input = document.getElementById('pac-input'); 
    var searchBox = new google.maps.places.SearchBox(input); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

    // Bias the SearchBox results towards current map's viewport. 
    map.addListener('bounds_changed', function() { 
    searchBox.setBounds(map.getBounds()); 
    }); 

    // Create a marker for each place. 
    marker = new google.maps.Marker({ 
    map: map, 
    draggable: true, 
    title: 'Starting location', 
    position: {lat: 62, lng: 15} 
    }); 

    google.maps.event.addListener(marker, 'dragend', function() 
    { 
    document.getElementById('inputHousesLongitude').value = marker.getPosition().lat(); 
    document.getElementById('inputHousesLatitude').value = marker.getPosition().lng(); 
    geocodePosition(marker.getPosition()); 
    }); 

    // Listen for the event fired when the user selects a prediction and retrieve 
    // more details for that place. 
    searchBox.addListener('places_changed', function() { 
    var places = searchBox.getPlaces(); 

    if (places.length == 0) { 
    return; 
    } 

    // For each place, get the icon, name and location. 
    var bounds = new google.maps.LatLngBounds(); 
    places.forEach(function(place) { 
    if (!place.geometry) { 
    console.log("Returned place contains no geometry"); 
    return; 
    } 
    var icon = { 
    url: place.icon, 
    size: new google.maps.Size(71, 71), 
    origin: new google.maps.Point(0, 0), 
    anchor: new google.maps.Point(17, 34), 
    scaledSize: new google.maps.Size(10, 10) 
    }; 

    document.getElementById('inputHousesLongitude').value = place.geometry.location.lat(); 
    document.getElementById('inputHousesLatitude').value = place.geometry.location.lng(); 
    document.getElementById('inputHousesAddress').value = place.name; 

    marker.setPosition(place.geometry.location); 

    if (place.geometry.viewport) { 
    // Only geocodes have viewport. 
    bounds.union(place.geometry.viewport); 
    } else { 
    bounds.extend(place.geometry.location); 
    } 
    }); 
    map.fitBounds(bounds); 
    }); 
    } 

function geocodePosition(pos) 
{ 
    geocoder = new google.maps.Geocoder(); 
    geocoder.geocode 
    ({ 
    latLng: pos 
    }, 
    function(results, status) 
    { 
    if (status == google.maps.GeocoderStatus.OK) 
    { 
    document.getElementById('pac-input').value = results[0].formatted_address; 
    document.getElementById('inputHousesAddress').value = results[0].formatted_address; 
    } 
    else 
    { 
    $("#mapErrorMsg").html('Cannot determine address at this location.'+status).show(100); 
    } 
    } 
    ); 
    } 

HTML:

<div id="map"></div> 

CSS:

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
#map { 
    height: 400px; 
} 
.controls { 
    margin-top: 10px; 
    border: 1px solid transparent; 
    border-radius: 2px 0 0 2px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    height: 32px; 
    outline: none; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
} 

#pac-input { 
    background-color: #fff; 
    font-family: Roboto; 
    font-size: 15px; 
    font-weight: 300; 
    margin-left: 12px; 
    padding: 0 11px 0 13px; 
    text-overflow: ellipsis; 
    width: 300px; 
} 

#pac-input:focus { 
    border-color: #4d90fe; 
} 

.pac-container { 
    font-family: Roboto; 
} 

#type-selector { 
    color: #fff; 
    background-color: #4d90fe; 
    padding: 5px 11px 0px 11px; 
} 

#type-selector label { 
    font-family: Roboto; 
    font-size: 13px; 
    font-weight: 300; 
} 
#target { 
    width: 345px; 
}