This question already has answers here:
GoogleMaps v3 API Create only 1 marker on click
(5 answers)
Closed 5 years ago.
How to delete old markers and left only latest marker on google map.
I need only one marker no array.
Here is the code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="map" style="width: 100%; height: 400px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAA3ATL-GNAlXBPYYBMjdjoNWKUWnJ9i-c"></script>
<script>
var map;
function initialize() {
var haightAshbury = new google.maps.LatLng(52.62440324134009, 4.88054275512695);
var mapOptions = {
zoom: 8,
center: haightAshbury,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}
// Add a marker to the map and push to the array.
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();
jQuery("#lat").val(lat);
jQuery("#lng").val(lng);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="panel">
<input type="hidden" value="" name="lat" id="lat">
<br/>
<input type="hidden" value="" name="lng" id="lng">
If I understood you right you can make a click maker that appears on the map if you click it and changes the position if you click somewhere else:
var clickmarker = new google.maps.Marker({
draggable: false
});
google.maps.event.addListener(map, 'click', function(event) {
clickmarker.setPosition(event.latLng);
clickmarker.setMap(map);
clickmarker.setAnimation(google.maps.Animation.DROP);
var lat = clickmarker.getPosition().lat();
var lng = clickmarker.getPosition().lng();
jQuery("#lat").val(lat);
jQuery("#lng").val(lng)
});
So your code would be:
<script>
var map;
function initialize() {
var haightAshbury = new google.maps.LatLng(52.62440324134009, 4.88054275512695);
var mapOptions = {
zoom: 8,
center: haightAshbury,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
var clickmarker = new google.maps.Marker({
draggable: false
});
google.maps.event.addListener(map, 'click', function(event) {
clickmarker.setPosition(event.latLng);
clickmarker.setMap(map);
clickmarker.setAnimation(google.maps.Animation.DROP);
var lat = clickmarker.getPosition().lat();
var lng = clickmarker.getPosition().lng();
jQuery("#lat").val(lat);
jQuery("#lng").val(lng)
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Here's the doc: https://developers.google.com/maps/documentation/javascript/examples/marker-remove
Seems you just need to remove all the markers before adding the new one and you're good.
You can just change coordinates of existing marker
var marker;
if (marker) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
position: location,
map: map
});
}
Related
I am using the gem "geocoder" to get the lang and long from a address but I cant seem to be able to get a marker on my map
- lat_long = Geocoder.coordinates(Mode.full_address).to_s.gsub('[', '').gsub(']', '')
%script{:src => "https://maps.googleapis.com/maps/api/js?v=3.exp"}
:javascript
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(#{lat_long})
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
This places the map where it should be but it does not give me a marker
Add a google.maps.Marker.
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(#{lat_long})
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Create a marker on map center
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I have implemented the Google map successfully. But one more thing has left to do. I need to retrieve the Longitude and Latitude data when the user clicks on the map (any co-ordinates). My entire code looks like this:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(<?=$decimalValueLon?>,<?=$decimalValueLat?>);
var myOptions = {
zoom: 17,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
// marker STARTS
var marker = new google.maps.Marker({
position: myLatlng,
title:"Click to view info!"
});
marker.setMap(map);
// marker ENDS
// info-window STARTS
var infowindow = new google.maps.InfoWindow({ content: "<div class='map_bg_logo'><span style='color:#1270a2;'><b><?=$row->bridge_name?></b> (<?=$row->bridge_no?>)</span><div style='border-top:1px dotted #ccc; height:1px; margin:5px 0;'></div><span style='color:#555;font-size:11px;'><b>Length: </b><?=$row->bridge_length?> meters</span></div>" });
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
// info-window ENDS
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>`
Thanks in advance !
You can add a click-handler like you have a load handler:
google.maps.event.addListener(map, "click", function (e) {
//lat and lng is available in e object
var latLng = e.latLng;
});
<script>
var map;
function init_map() {
var opts = { 'center': new google.maps.LatLng(35.567980458012094,51.4599609375), 'zoom': 5, 'mapTypeId': google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(document.getElementById('mapdiv'), opts);
google.maps.event.addListener(map,'click',function(event) {
document.getElementById('latlongclicked').value = event.latLng.lat()
document.getElementById('lotlongclicked').value = event.latLng.lng()
});
google.maps.event.addListener(map,'mousemove',function(event) {
document.getElementById('latspan').innerHTML = event.latLng.lat()
document.getElementById('lngspan').innerHTML = event.latLng.lng()
});
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
JavaScript:
var myLatlng = new google.maps.LatLng(10.786599576864381,106.69340372085571);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("gmap"), myOptions);
marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addListener(map, 'click', function() {
var location = map.getCenter();
document.getElementById("lat").innerHTML = location.lat();
document.getElementById("lon").innerHTML = location.lng();
placeMarker(location);
});
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
marker.setPosition(location);
}
HTML:
<center>
<div id="bd">
<div id="gmap"></div>
lat:<span id="lat"></span> lon:<span id="lon"></span><br/>
</div>
</center>
I using map.getCenter to get lat and lng, but result not found, how to fix
The location you are getting is center of the map.
You need to capture the event with the click so you can get the latLng like this:
google.maps.event.addListener(map, 'click', function(event) {
//var location = map.getCenter();
//document.getElementById("lat").innerHTML = location.lat();
//document.getElementById("lon").innerHTML = location.lng();
placeMarker(event.latLng);
})
I have the following Javascript that includes both the standard Google Maps API initialize() function and custom addMarker() function. The map will load fine however the marker does not get added to the map.
<script type="text/javascript">
// Standard google maps function
function initialize() {
var myLatlng = new google.maps.LatLng(40.779502, -73.967857);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Testing the addMarker function
CentralPark = new google.maps.LatLng(37.7699298, -122.4469157);
addMarker(CentralPark);
</script>
You have added the add marker method call outside the function and that causes it to execute before the initialize method which will be called when google maps script loads and thus the marker is not added because map is not initialized
Do as below....
Create separate method TestMarker and call it from initialize.
<script type="text/javascript">
// Standard google maps function
function initialize() {
var myLatlng = new google.maps.LatLng(40.779502, -73.967857);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
TestMarker();
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Testing the addMarker function
function TestMarker() {
CentralPark = new google.maps.LatLng(37.7699298, -122.4469157);
addMarker(CentralPark);
}
</script>
function initialize() {
var location = new google.maps.LatLng(44.5403, -78.5463);
var mapCanvas = document.getElementById('map_canvas');
var map_options = {
center: location,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
new google.maps.Marker({
position: location,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
THis is other method
You can also use setCenter method with add new marker
check below code
$('#my_map').gmap3({
action: 'setCenter',
map:{
options:{
zoom: 10
}
},
marker:{
values:
[
{latLng:[position.coords.latitude, position.coords.longitude], data:"Netherlands !"}
]
}
});
<div id="map" style="width:100%;height:500px"></div>
<script>
function myMap() {
var myCenter = new google.maps.LatLng(51.508742,-0.120850);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 5};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
Below code works for me:
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(51.528308, -0.3817765);
function initialize() {
var mapProp = {
center:myCenter,
zoom:15,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
icon: {
url: '/images/marker.png',
size: new google.maps.Size(70, 86), //marker image size
origin: new google.maps.Point(0, 0), // marker origin
anchor: new google.maps.Point(35, 86) // X-axis value (35, half of marker width) and 86 is Y-axis value (height of the marker).
}
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
Reference link
I am making a google maps application in which i allow a user to place only one marker on the map by clicking on the map. Everytime the user click again on the map, the old marker is deleted and the marker is placed on the new click location. I have a hidden input field and i want the its value to change each time the marker changes position. This value should be the coordinates of the new marker location. The code i have written for this is as follows,
var map;
var marker;
var coords;
function initialize() {
var latlng = new google.maps.LatLng(19.074448,72.872314);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
};
function placeMarker(location) {
if (marker) {
marker.setMap(null);
marker = null;
placeMarker(location);
}
else {
marker = new google.maps.Marker({
position: location,
map: map
});
document.getElementById("id_lat").value = marker.getPosition().toUrlValue()
}
};
Specifically, i am using this line to change the value,
document.getElementById("id_lat").value = marker.getPosition().toUrlValue()
where the id of the relevant hidden field is "id_lat"
This doesn't seem to work though. What am i doing wrong and how do i fix it ? I am new to javascript.
I think you forgot to add your one marker at initialize() function. Other than that your code seems to work fine.
var map;
var marker;
var coords;
function initialize() {
var latlng = new google.maps.LatLng(19.074448,72.872314);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
// add a marker on map
placeMarker(latlng);
};
function placeMarker(location) {
if (marker) {
marker.setMap(null);
marker = null;
placeMarker(location);
} else {
marker = new google.maps.Marker({
position: location,
map: map
});
document.getElementById("id_lat").value = marker.getPosition().toUrlValue();
// worked for me for <input type="text" value="Submit" id="id_lat" style="display:none"/> element
alert(document.getElementById("id_lat").value);
}
};