Запустите Google map Маркер в GPS, но перетаскиваемый - заполняет форму

Question

Я заканчиваю проект, над которым я работаю, и чтобы улучшить функциональность пользователя, я хочу иметь страницу, на которой браузер получает текущую позицию пользователя (геолокация()) и заполняет поля формы широтой и долготой. Однако, как только это произойдет, я хочу, чтобы маркер размещался на карте Google, которую пользователь может перетащить, который будет обновляться в форме, когда они перетаскивают ее. Я знаю, что должен быть способ сделать это, но я не могу заставить его работать. На данный момент я полностью работоспособен, чтобы захватить местоположение пользователя и заполнить поля формы. Тем не менее, я как бы борюсь с API Google. Это не помогает, я не очень хорошо разбираюсь в Javascript (эти функции - это почти единственный javascript, который я использую на протяжении всего крупного проекта). Приложен рабочий код, который получает позицию и заполняет поля ввода, а затем у меня есть первая атака в API карт Google, которая не выполняется: карта просто появляется как пустой серый ящик с элементами управления масштабированием и перетаскиванием улиц, но они ничего не делают, так как все серое.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> 
<script> 
var x=document.getElementById("latitude"); 
var y=document.getElementById("longitude"); 
function getLocation() 
    { 
    if (navigator.geolocation) 
    { 
    navigator.geolocation.getCurrentPosition(showPosition); 
    } 
    else{x.innerHTML="Geolocation is not supported by this browser.";} 
    } 
function showPosition(position) { 
    x.value=position.coords.latitude; 
    y.value=position.coords.longitude;  
} 
getLocation(); 

и вот апи материал Google, который терпит неудачу (имея в виду, что это просто взломан вместе пытаются что я вроде понял, не будет работать). Мне интересно, не сразу ли заполняются значения x и y, и это почему-то вызвано, потому что, если я жестко программирую в широтах и ​​долготах вместо x и y, я получаю функциональную карту, хотя, очевидно, с тех пор х и у не используется там, не заливает обратно в виде:

function initialize() { 
    var myLatlng = new google.maps.LatLng(x, y); 
    var mapOptions = { 
    zoom: 4, 
    center: myLatlng 
    } 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title: 'Hello World!' 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

</script> 

Finally, here's my two fields of the input form: 
<p> 
    <i>Latitude:</i> 
    <input type="text" name="latitude" id="latitude" placeholder="latitude"><br> 
</p> 
<p> 
    <i>Longitude:</i> 
    <input type="text" name="longitude" id="longitude" placeholder="longitude"><br> 
</p> 

Answer 1

Это то, что я хотел бы сделать

<style> 
#map-canvas { 
    height: 400px; 
} 
</style> 
<div id="map-canvas"></div> 
<p> 
    <i>Latitude:</i> 
    <input type="text" name="latitude" id="latitude" placeholder="latitude"><br> 
</p> 
<p> 
    <i>Longitude:</i> 
    <input type="text" name="longitude" id="longitude" placeholder="longitude"><br> 
</p> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
<script> 
var x=document.getElementById("latitude"); 
var y=document.getElementById("longitude"); 
// Make sure you have a default. You don't know if geolocation will find the user's location 
var defaultLocation = new google.maps.LatLng(50.84498962150941, 4.349988162517548); // Manneken Pis, Brussels 
var map; 

function getLocation() { 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(showPosition); 
    } 
    else { 
    x.innerHTML = "Geolocation is not supported by this browser."; 
    ////maybe you want to set a marker on the map anyway. 
    // markerOnClientPosition(defaultLocation); 
    } 
} 
function showPosition(position) { 
    x.value = position.coords.latitude; 
    y.value = position.coords.longitude; 
    if (map) { 
    markerOnClientPosition(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); 
    } 
} 
getLocation(); 
function initialize() { 
    //var myLatlng = new google.maps.LatLng(Number(x), Number(y)); // 
    var mapOptions = { 
    zoom: 10, 
    center: defaultLocation, // myLatlng, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
    } 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
} 
function markerOnClientPosition(myLatlng) { 
    var marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    draggable: true, 
    title: 'You are here. Drag to exact location' 
    }); 
    // attach a drag event 
    google.maps.event.addListener(marker, 'dragend', function() { 
    x.value = marker.getPosition().lat(); 
    y.value = marker.getPosition().lng(); 
    }); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

Answer 2

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

Google Maps v3: need multiple draggable markers to update HTML input fields