I need to trigger an event when the user drops a marker on the map. I have the code working for them to drop the marker, but I can't figure out how to trigger the event.
Any tips?
With Marker event dragend you have the latlng where the Marker is drop. This is that you need?
google.maps.event.addListener(Marker, "dragend", function(event) {
var lat = event.latLng.lat();
var lng = event.latLng.lng();
});
Related
After loading The heremap i set markers with custom image on it. Then After click in the marker i'm getting the bubble popup. I want to change the marker icon when click on it. How can i change the marker icon when click on it?
Code for showing bubble after click the marker as given below.
map.addObject(group);
// add 'tap' event listener, that opens info bubble, to the group
group.addEventListener('tap', function (evt) {
// event target is the marker itself, group is a parent event target
// for all objects that it contains
var bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
// read custom data
content: evt.target.getData()
});
// show info bubble
ui.addBubble(bubble);
}, false);
In my application I'm changing the original color of the marker when it is clicked. Have you tried using a markerTemplate, meaning a variable where you store the svg for your marker as a string?
var markerTemplate = '<svg xmlns="http://www.w3.org/2000/svg" width="28px" height="36px">... fill="${COLOR}"/></svg>'
You can then use e.g. fill="${COLOR}" in this string and in your EventListner replace this placeholder with a new color markerTemplate.replace('${COLOR}', 'rgba(231, 0, 0, 0.7)');
Hope this helps
I'm using something like this (javascript):
google.maps.event.addDomListener(new_marker, 'click', function(e) {
alert("hi");
});
But I don't want it to trigger when the user moves the map, and they just happened to do so while clicking on the marker. To be clear: I only want the code to run when the user clicked on the marker, without moving the map. How can I do that?
I'm adding some info windows on my map with clicking button:
$(document).ready(function() {
$("input:#ekle").click(function(){//balon ekle ve listeye ekle
infoWindow3 = new google.maps.InfoWindow();
var en=$("input:#x").val();
var boy=$("input:#y").val();
var yazi=$("input:isim2").val();
var windowLatLng3 = new google.maps.LatLng(en,boy);
infoWindow3.setOptions({
content: yazi,
position: windowLatLng3,
});
infoWindow3.open(map);
ekle(yazi);//adding Infowindow contecnt(value) to listbox
});
So I can creating InfoWindows.Now I will closing my InfoWindow with clicking an other button :
function cikar(){//listeden cikarma
var cikarilacak=$('#liste option:selected').val();//looking listbox selected item value
$("#liste option[value='"+cikarilacak+"']").remove();
//at this step I will close my InfoWındow where I selected it's value from listbox
}
I will close InfoWindow which I selected it's value from listbox.what can I do
pass the infoWindow-instance as argument to the function that creates the option.
When you create the option, store the reference to the infoWindow with the option(you e.g. may use $.data()).
It's easy then to retrieve the reference to the infoWindow in cikar() and to close the infoWindow.
Each time the mouse is moving over a marker I display an infowindow:
var optionMarker = {position:point, map:map,icon:image,shadow:ombre};
var marker = new g.Marker(optionMarker);
var infowindow = new g.InfoWindow({content: texte});
g.event.addListener(marker, 'mouseover', function()
{
infowindow.open(map,marker);
});
If I click several markers, then I have several opened infowindows.
These infowindows are superposed.
Which could be the better way to move from a infowindow to another infowindow ?
- by clicking the selected infowindow ?
The InfoWindows don't seem to have any events associated with them (click, mouseover, etc) so the next best thing, I think, is to manipulate the markers. I set up the markers so that when the mouse is over them, the linked InfoWindow rises to the top.
http://jsfiddle.net/XCCSL/
I want to put action listener on the zoom in button of my website,so that when map moves(zoom in) map 2 also zoom in.I had tried the moveend function but that doesnt worked out.How can I do that?
You can do this by the zoom_changed function:
//Zooming
google.maps.event.addListener(map,'zoom_changed', function ()
{
var newCenter1 = map.getCenter();
var z=map.getZoom();
map1.setZoom(z);
});