This is inside an infowindow.
ISSUE:
When onClick is clicked, I want to be able change the onClick variable to reflect new value.
So I have an example button setup below:
//Loop through database and createMarker below
function createMarker(date) {
var marker = new google.maps.Marker({
position: latlng,
map: map
});
setMarkers.push(marker);
google.maps.event.addListener(marker, 'click', function () {
content = "<input type='button' value='Update' id='gPlan' onClick='updateMarker(\""+date+"\");'>";
infowindow.setContent(content);
infowindow.open(map, marker);
});
}
function updateMarker(date) {
var newdate = document.getElementById('datetimepicker').value;
//change the onClick button that was clicked, update "date" to "newdate" value
//Next onClick will reflect on the "newdate" instead of the original "date"
}
How do you go about achieving this? Do I have to reset(delete and replace old) marker infowindow? Is there an easier way?
Related
I am new to google-map. I want to create a map where, when user click on any location. it will allow user to place marker on map.
I try to use map.addEventListener("click"), which works fine.
mycode:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12
});
map.addListener('click', function clickHandler() {
//do something
});
}
However when user click on any landmark/clickableIcon https://imgur.com/a/M3vVu,.
Google-map will show infobox and ignoring the clickHandler, https://imgur.com/a/R3uWL. it seems that each of the landmark/clickableIcon has event.stopPropagation();
Is there any way to enable both methods. That is when user click on clickableIcon, it will both show infoBox and place the marker on the map.
thanks,
You can do this way :
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
}
I am adding marker on map on user click.
Problem is that I want only one marker but now whenever I click on map new marker is added.
I am trying to remove it but nothing happens:
var marker;
map.on('click', function (e) {
map.removeLayer(marker)
marker = new L.Marker(e.latlng, { draggable: true });
marker.bindPopup("<strong>" + e.latlng + "</strong>").addTo(map);
marker.on('dragend', markerDrag);
});
Instead of using .on to capture and handle the event, you could use .once. That way the event will be only captured once and the handler will unbind itself after that.
map.on('click', function () {
console.log('I fire every click');
});
map.once('click', function () {
console.log('I fire only once');
});
If you're ever need to unbind a handler yourself you can use .off. Check the reference for event methods: http://leafletjs.com/reference.html#events
As to why your code above isn't working, on first click you're trying remove the marker: map.removeLayer(marker), but the variable marker doesn't contain a L.Marker instance so the map is unable to remove it. You should check if it's defined first and only then remove it:
var marker;
map.on('click', function (e) {
if (marker) { // check
map.removeLayer(marker); // remove
}
marker = new L.Marker(e.latlng); // set
});
Here's a working example on Plunker: http://plnkr.co/edit/iEcivecU7HGajQqDWzVH?p=preview
Use .off() to unbind the on click event.
It should be something like:
var marker;
map.on('click', mapClicked);
function mapClicked(e) {
map.off('click', mapClicked);
map.removeLayer(marker)
marker = new L.Marker(e.latlng, { draggable: true });
marker.bindPopup("<strong>" + e.latlng + "</strong>").addTo(map);
marker.on('dragend', markerDrag);
}
I didn't test it but it should at least put you in the right direction.
Is there any way to add an click event with zoom? I am able to perform both individually, but when I use zoom together with a click event it is not working properly.
google.maps.event.trigger(gmarkers[count], "click");
map.setZoom(parseInt(k));
Please refer this jsfiddle: http://jsfiddle.net/Uw9Qy/
An example found here: http://www.geocodezip.com/v3_MW_example_map3_clustered.html
In your fiddle, you have defined the myClick function (which gets triggered as you click one of the text links), but that function doesn't contain any zoom code.
Try this:
Change the onclick on your <b> tags, add a zoomlevel to it
<b onclick="myclick(0, 11)">Berlin</b>-<b onclick="myclick(1, 8)">Paris</b>-<b onclick="myclick(2, 9)">Rome</b>
Then, add a paramter to your myclick function so you can zoom in:
this.myclick = function (i, zoomlevel) {
google.maps.event.trigger(gmarkers[i], 'click');
map.setZoom(zoomlevel);
};
function createMarker() {
var marker = new google.maps.Marker({
position: z,
map: map,
title: title,
html: contentstring
});
google.maps.event.addListener(marker, 'click', function () {
map.setCenter(marker.getPosition());
map.setZoom(10);
infowindow.setContent(this.html);
infowindow.open(map, marker);
});
//google.maps.event.addListener(marker,'click',function(){
//window.location.href = marker.url;
//});
gmarkers[ids] = marker;
};
Specify your desired zoom level in setZoom() :)
I have a little Google Maps app that draws markers with an Info Window. I'd like to be able to edit the info in the window and submit if. I can do this - but only once. I looked here Adding event to element inside Google Maps API InfoWindow which helped a bit, but with my code the submit event doesn't seem to fire.
Here is my code:
// get the data
$.getJSON( 'csvToJson.php', function(data) {
// Loop through it
$.each( data, function(i, m) {
// Add the marker
var title = m.Namn + ': ' + m.Meddelande;
$('#map_canvas').gmap('addMarker', {
'position': new google.maps.LatLng(m.Lat, m.Lng),
'bounds':false,
'title': title }
).click(function() {
// Initialise the info window
var divName = "detail" + m.id; // come back to this?
var infoWindowContent = [
"<form id='detail_form' action='bib.php' method='post'>",
"Namn: <br><input type='text' name='Namn' value='" + m.Namn + "'></input>",
"<br>Meddelande: <br>" + m.Meddelande,
"<br><input type='submit' value='Spara ändringar'></input></form>"
].join("");
var info = new google.maps.InfoWindow({
content: infoWindowContent
});
google.maps.event.addListener(info, 'domready', function() {
$(document).off("submit");
$(document).on("submit", (function() {
console.log("Hi");
})); // end addEvent
}); // end addListener
$('#map_canvas').gmap('openInfoWindow', info, this);
}); // end addMarker click(function)
}); // end $.each
}); // end $.getJSON
All help appreciated.
Mini
there is no jQuery-method addEvent, use on instead
you open the infoWindow before you add the domready-handler, so it may happen that the domready-event already has been fired when you apply the listener. Move the line:
$('#map_canvas').gmap('openInfoWindow', info, this);
...to the end of the click-listener
Using Google Maps API v3 for the first time and I've got a map with a bunch of markers. I wanted to make it so when you click one, a specific InfoWindow will display (specific to the marker you clicked). I was really surprised that the click event doesn't tell you the actual marker that was clicked!
I know there is a solution using a separate method to create a closure but that seems like a hack to me. Is there a better way to do it? Or, is there a way to ask the map "what markers exist at this position" and pass in the position from the event argument?
I expected events to work like this:
google.maps.event.addListener(marker, 'click', function(event, obj)
{
//Now I can work with "obj" - the thing that was clicked.
});
You should just refer to 'this' in the event listener.
google.maps.event.addListener(marker, 'click', function(e) {
// this == marker;
// e == MouseEvent
});
let mousemoveDraw = this.mousemoveDraw.bind(this);
let mousedown_event_DrawPolygonByFinger = this.mousedown_event_DrawPolygonByFinger.bind(this);
let mouseup_event_DrawPolygonByFinger = this.mouseup_event_DrawPolygonByFinger.bind(this);
this.mapInst.addEvents([
{ type: 'mousedown', event : mousedown_event_DrawPolygonByFinger },
{ type: 'mousemove', event: mousemoveDraw },
{ type: 'mouseup', event : mouseup_event_DrawPolygonByFinger }
]);
mapInst - is wrapper on google and yandex map. It is may use this way in callbacak
//event drawing event
mousemoveDraw(event : any){
console.log('mousemoveDraw')
console.log(this)
console.log(this.stateDrawing)
try{
if (this.stateDrawing != 1){
console.log(this.stateDrawing)
let lat = event.latLng.lat();
let lng = event.latLng.lng();
console.log(lat,lng)
this.polyLine.pushCoord({ lat, lng });
}
}catch(e){
console.log('error Polyline.mousemoveDraw : ',e.message);
}
}
How is that a hack when it's provided by the API? What you are describing is a hack. When you click on the marker, it will pass an event which contains the lat & lng.
google.maps.event.addListener(marker, 'click', function(e) {
console.log(e); // { x: 0, y: 0 }
});
I think it would be a mistake to try and hunt down the marker object based on the position of the click event. Using closures to associate the event with a particular marker seems like a valid solution to me. I would create a function that looks something like this:
function createMarker (point, map)
{
var marker = new google.maps.Marker({
position: point,
map: map,
title: "blah"});
marker.stuffOnTheMarker = "Some interesting stuff";
var content = buildSomeContentForThisMarker ();
google.maps.event.addListener(marker, 'click', function() {
infowindow.close ();
infowindow.setContent(content);
infowindow.open(map,marker);
// access the marker than caused this event
alert (marker.stuffOnTheMarker);
});
}