I have created a function to add the marker when there is no marker on map or remove the original marker and added a new one to replace it. However, i can add the first part of script successfully to add the marker on map. however, the original marker can not be removed and new marker could not added when i click the map again. Can anyone suggest what is the problem?
/*Create a listener to record the Click event of the google map and define it as the starting point (i.e. Origin in Google Direction
service*/
google.maps.event.addListener(map, 'click', function(event) {
if (origin == null) {
origin = event.latLng;
lat = origin.lat();
lng = origin.lng();
UpdateLatLng();
var startimage = 'images/Start4.png';
StartMarker = new google.maps.Marker({
map: map,
position: origin,
icon: startimage
});
} else {
//Relocate the Starting point and assign the new position to Textbox
alert ("The starting point was relocated on screen");
StartMarker.setMap(null);
directionsDisplay.setMap(null);
directionsDisplay.setPanel(null);
directionsDisplay.setDirections({routes: []});
var origin = event.latLng;
lat = origin.lat();
lng = origin.lng();
UpdateLatLng();
var startimage = 'images/Start4.png';
StartMarker = new google.maps.Marker({
map: map,
position: origin,
icon: startimage
});
}
});
This works for me:
var StartMarker = null;
/*Create a listener to record the Click event of the google map and define it as the starting point (i.e. Origin in Google Direction
service*/
google.maps.event.addListener(map, 'click', function(event) {
if (!StartMarker) {
origin = event.latLng;
lat = origin.lat();
lng = origin.lng();
StartMarker = new google.maps.Marker({
map: map,
position: origin
});
} else {
//Relocate the Starting point and assign the new position to Textbox
alert ("The starting point was relocated on screen");
StartMarker.setMap(null);
var origin = event.latLng;
lat = origin.lat();
lng = origin.lng();
StartMarker = new google.maps.Marker({
map: map,
position: origin
});
}
});
working example
Try to use the existing Marker like:
// Will change the poisition
StartMarker.setPosition(origin);
// Will change the Icon
StartMarker.setIcon(startimage);
Related
Using Google Maps Api 3 I am able to add marker to map but coudlnt figure it out how to get lat and long of the added pont
I tried
console.log(e.latLng);
console.log(marker.position);
console.log(marker.getPosition());
console.log(marker.position.x);
console.log(marker.position.lat);
but none of them returned the x or y
map.addListener('click', function(e) {
placeMarker(e.latLng, map);
console.log(e.latLng);
});
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
draggable:true,
map: map
});
console.log(marker.position);
}
To get the lattitude use:
marker.position.lat();
and to get the longitude use
marker.position.lng();
https://developers.google.com/maps/documentation/javascript/reference#ControlPosition
i want to create a Map with an easy function. Everytime i click, the existing Marker schould be removed and a new one schould appear at click-position.
Creating new ones works fine, but removing them doesn't work. Here the code, I tried:
var map;
var latitude, longitude;
var marker;
function placeMarker(location) {
marker.setMap(null);
marker = new google.maps.Marker({
map: map,
position: location,
});
latitude = location.lat();
longitude = locaton.lng();
document.getElementById('koordinaten').innerHTML = '<p>' + latitude + '</p>';
}
OK, comment the marker.setMap(null); i can add as much markers as i want, but i want to only have one Marker on the Map.
Can you please help me, how to remove a marker and place a new one?
Thanks
When you run this function the first time, the first line will result in an error, because marker still is undefined(doesn't have a setMap-method).
You may catch this case and bypass the first line :
if(typeof marker!=='undefined'){
marker.setMap(null);
}
But a better approach would be to use always the same marker and apply the new position:
function placeMarker(location) {
//when marker is undefined, create a marker
if(typeof marker==='undefined'){
marker = new google.maps.Marker({
map: map
});
}
//set the position
marker.setPosition(location);
latitude = location.lat();
longitude = locaton.lng();
document.getElementById('koordinaten').innerHTML
= '<p>' + latitude + '</p>';
}
I am using google maps api. I want to have two mouse events ready to trigger at one time. Below is a code snipit.
function initialize() {
var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3 }
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
// Add a listener for the click event
google.maps.event.addListener(map, 'click', addLatLng);
}
function addLatLng(event) {
var path = poly.getPath();
if(!draw)
{
path.push(event.latLng);
path.push(event.latLng);
draw = true;
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map });
google.maps.event.addListener(map, 'mousemove', moveTrackLine);
}
else
{
path.push(event.latLng);
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map });
draw = false;
}
}
function moveTrackLine(event) {
var path = poly.getPath();
// replace the old point with a new one to update the track
path.pop();
path.push(event.latLng);
}
When I click on the map the first time I see a marker placed on the map. Then when the mouse is moved I see the polyline update and follow my curser correctly. Next if I click on the map I do not see a marker placed on the map nor do I ever go into the addLatLng function. Thanks in advance for your help and time.
-tim
set the clickable-option of the polyline to false.
The issue: As soon as the mousemove-event is applied to the map, you will not be able to click on the map anymore, because below the mouse-cursor is always the polyline.
When you set the clickable-option of the polyline to false, the polyline does not respond to mouse-events and the click-event will be passed to the map.
I want to pass related marker id by clicking marker on google map. I am using marker.getId() function to retrieve marker id. But the marker id is not passing along with url. How can i do this? Any Help?
function AddressMap(lat,lang,markerid)
{
var latLng = new google.maps.LatLng(lat,lang);
var marker = new google.maps.Marker({
'map': map,
position: latLng,
'latitude' :lat,
'longitude' :lang,
icon: image,
shadow: shadow,
id: markerid
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
window.location = "www.cickstart.com/" + marker.getId();
});
}
you can try directly to access the id:
google.maps.event.addListener(marker, 'click', function() {
window.location = "www.cickstart.com/" + marker.id;
});
the best way to do this is add a metadata to marker
var marker = new google.maps.Marker(markerOptions);
marker.metadata = {type: "point", id: 1};
if you have so many marker push the marker to array marker.
You can add any data that you want. and simply call it, set it or get it.
the sample like this one:
markers[0].metadata.id
I am trying to make this map only allow one marker on the page at any time but when I click a new marker is placed along with old ones.
Does anyone know how you would make this happen?
google.maps.event.addListener(map, 'click', function(event) {
//set up variables
var clickLat = event.latLng.lat();
var clickLng = event.latLng.lng();
//show lat and long
var loc = document.getElementById("location");
var info = "Latitude: "+clickLat+" "+", longitude: "+clickLng;
loc.innerHTML = info;
//place marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(clickLat, clickLng),
map: map,
animation: google.maps.Animation.DROP
});
});
I believe your answer is in the Google Mapa API. You just have to set the map of your old marker to null.
Read this: http://code.google.com/apis/maps/documentation/javascript/overlays.html#RemovingOverlays
Another option would be to have a single marker variable and update the position of the marker when someone clicks on the map.
declare a Marker field:
private Marker marker;
then, for the setOnMapClickListener method of your GoogleMap object, do the following:
#Override
public void onMapClick(LatLng point) {
if(marker!=null) marker.remove();
markerSelectedPlace = new MarkerOptions().position(point).title(
"dfsdfsdfs dfsdfsdf");
marker = mMap.addMarker(markerSelectedPlace);
mMap.addMarker(markerSelectedPlace);
marker.showInfoWindow();
}