Google Maps Api Click to Map Point Добавить

Как мне добавить точку, когда я нажимаю на карту Google?

Поэтому, когда я нажимаю на карту, я хочу добавить указатель, но не могу.

В этом процессе я беру значение LAT LANG с карты и передаю его на вход. Затем я заполняю обязательные поля и заполняю форму. Но когда я нажимаю на карту, он не ставит указатель.

JSFiddle: https://jsfiddle.net/Lzycb8c0/6/

Код JS:

var lat = 41.013995; //default latitude
var lng = 28.979741; //default longitude
var homeLatlng = new google.maps.LatLng(lat, lng); //set default coordinates
var homeMarker = new google.maps.Marker({ //set marker
position: homeLatlng, //set marker position equal to the default coordinates
map: map, //set map to be used by the marker
draggable: true //make the marker draggable
});

var geocoder = new google.maps.Geocoder;

var myOptions = {
center: new google.maps.LatLng(41.013995, 28.979741), //set map center
zoom: 17, //set zoom level to 17
mapTypeId: google.maps.MapTypeId.ROADMAP //set map type to road map
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions); //initialize the map

var marker = new google.maps.Marker({
draggable: true,
position: homeLatlng,
map: map,
title: "Your location"});google.maps.event.addListener(map, 'click', function (event) {document.getElementById("lat").value = event.latLng.lat();
document.getElementById("long").value = event.latLng.lng();

// Reverse geo code using latLng
geocoder.geocode({'location': event.latLng }, function(results, status) {

if (status === 'OK') {
if (results[0]) {
$('#search_new_places').val( results[0].formatted_address );
} else {
window.alert('No results found');
}

} else {
window.alert('Geocoder failed due to: ' + status);
}

});

});

//if the position of the marker changes set latitude and longitude to
//current position of the marker
google.maps.event.addListener(homeMarker, 'position_changed', function(){
var lat = homeMarker.getPosition().lat(); //set lat current latitude where the marker is plotted
var lng = homeMarker.getPosition().lng(); //set lat current longitude where the marker is plotted

});//if the center of the map has changed
google.maps.event.addListener(map, 'center_changed', function(){
var lat = homeMarker.getPosition().lat(); //set lat to current latitude where the marker is plotted
var lng = homeMarker.getPosition().lng(); //set lng current latitude where the marker is plotted
draggable: true;
});var input = document.getElementById('search_new_places'); //get element to use as input for autocomplete
var autocomplete = new google.maps.places.Autocomplete(input); //set it as the input for autocomplete

autocomplete.bindTo('bounds', map); //bias the results to the maps viewport

//executed when a place is selected from the search field
google.maps.event.addListener(autocomplete, 'place_changed', function(){

//get information about the selected place in the autocomplete text field
var place = autocomplete.getPlace();

if (place.geometry.viewport){ //for places within the default view port (continents, countries)
map.fitBounds(place.geometry.viewport); //set map center to the coordinates of the location
} else { //for places that are not on the default view port (cities, streets)
map.setCenter(place.geometry.location);  //set map center to the coordinates of the location
map.setZoom(17); //set a custom zoom level of 17
}

homeMarker.setMap(map); //set the map to be used by the  marker
homeMarker.setPosition(place.geometry.location); //plot marker into the coordinates of the location

});

$('#plot_marker').click(function(e){ //used for plotting the marker into the map if it doesn't exist already
e.preventDefault();
homeMarker.setMap(map); //set the map to be used by marker
homeMarker.setPosition(map.getCenter()); //set position of marker equal to the current center of the map
map.setZoom(17);

$('input[type=text], input[type=hidden]').val('');
});

$('#search_ex_places').blur(function(){//once the user has selected an existing place

var place = $(this).val();
//initialize values
var exists = 0;
var lat = 0;
var lng = 0;
$('#saved_places option').each(function(index){ //loop through the save places
var cur_place = $(this).data('place'); //current place description

//if current place in the loop is equal to the selected place
//then set the information to their respected fields
if(cur_place == place){
exists = 1;
$('#place_id').val($(this).data('id'));
lat = $(this).data('lat');
lng = $(this).data('lng');
$('#n_place').val($(this).data('place'));
$('#n_description').val($(this).data('description'));
$('#search_new_places').val($(this).data('kayitliyer'));
$('#n_yetkiliad').val($(this).data('yetkiliad'));
$('#n_magazaad').val($(this).data('magazaad'));
$('#n_telefon').val($(this).data('telefon'));
$('#y_telefon').val($(this).data('yetkilitelefon'));
$('#derece').val($(this).data('derece'));

}
});

if(exists == 0){//if the place doesn't exist then empty all the text fields and hidden fields
$('input[type=text], input[type=hidden]').val('');

}else{
//set the coordinates of the selected place
var position = new google.maps.LatLng(lat, lng);

//set marker position
homeMarker.setMap(map);
homeMarker.setPosition(position);

//set the center of the map
map.setCenter(homeMarker.getPosition());
map.setZoom(17);

}
});});

0

Решение

Вы должны добавить маркер создания в вашем прослушивателе кликов

  google.maps.event.addListener(map, 'click', function (event) {document.getElementById("lat").value = event.latLng.lat();
document.getElementById("long").value = event.latLng.lng();var newMarker = new google.maps.Marker({
draggable: true,
position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()),
map: map,
title: "Your location"});// Reverse geo code using latLng
geocoder.geocode({'location': event.latLng }, function(results, status) {

if (status === 'OK') {
if (results[0]) {
$('#search_new_places').val( results[0].formatted_address );
} else {
window.alert('No results found');
}

} else {
window.alert('Geocoder failed due to: ' + status);
}

});

});
0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]