Simple enough to add markers to leaflet map using onClick but every time I refresh the markers have been removed and I have to start over. How do I make the markers permanent so that on subsequent refresh I can add to them? Here is the current code:
map.on('click', onMapClick);
var layerGroup= new L.layerGroup().addTo(map);
function onMapClick(e){
var layer = L.marker(e.latlng).addTo(layerGroup);
}
var layerGroup=L.layerGroup().addTo(map);
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
The directionsRenderer creates a marker at the origin and end destination. Right now i have to click a marker to display the info window. How do i automatically display the info window? The process of creating the 2 markers is abstracted into the directionsRenderer so i'm not sure how to find the 2 markers.
1) Use the suppressMarkers parameter of the directionsRenderer
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true
});
2) Add your own markers on the start (and/or end) point(s)
JSFiddle demo
3) Call the open() method of the infoWindow to force it open
https://developers.google.com/maps/documentation/javascript/reference?#InfoWindow
Hope this helps.
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 understand how to get my current location with HTML5.
How do I add a click handler, so when a button is pressed it shows my current position on the map?
Google's example pretty much explains how it's done, but the button is set to predefined coordinates. How do I attach the "Home" button to current position coordinates instead?
Custom Control Example
From Google demo
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
As initialLocation is global you can use this to set the click event listeners: simply set the map to initialLocation
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(initialLocation)
});
I'm currently working on a project that requires that I have a div stacked above a Google Map. However, I need to pass the mousemove event of the div to the Map. To do that, I need to find the LatLng co-ordinates from the map container pixel co-ordinate (since triggering the Maps mousemove event requires the LatLng co-ordinates).
Is there any other way to pass the mousemove event from the div to the map, and if not, how do I go from the Map container co-ordinates to LatLng. I read that doing so requires creating a dummy overlay, and then using the getProjection() on that to get a MapCanvasProjection, and finally calling the fromContainerPixelToLatLng(). Is there any simpler way or do I really have to create a dummy overlay first?
As far as I can tell, this is the way you have to do it. I was reluctant at first, too, since it seemed like such overkill, but once I did it everything worked great. Here's an example implementation with a convenient delayedInit() callback:
function Dummy(map) {
this.setMap(map);
}
Dummy.prototype = new google.maps.OverlayView();
Dummy.prototype.draw = function() {
if (!this.ready) {
this.ready = true;
google.maps.event.trigger(this, 'ready');
}
}
Dummy.prototype.onAdd = function(){
// the Overlay dummy is ready and can be called upon
delayedInit();
}
var dum;
... and after you've instantiated your Google map:
dum = new Dummy(map);