How do I add point when I click on google map?
So when I click on the map I want to add a pointer but I can not.
In this process, I take a LAT LANG value from the map and transfer it into an input. Then I fill out the required fields and fill out the form. But when I click on the map, it does not put a pointer.
JSFiddle: https://jsfiddle.net/Lzycb8c0/6/
JS Code:
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);
}
});
});
You should add a create marker in your click listener
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);
}
});
});