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.
Related
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);
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 want show the info window for google maps. But the data or view is a ui5 view as below,
var oView = sap.ui.view({
type : sap.ui.core.mvc.ViewType.XML,
viewName :"com.example.view.ListView"
});
And this view is perfect.
Mainly I have the google info window and I need to place this inside that info window as follows,
var infowindow = new google.maps.InfoWindow({
content: view, //Here I am getting below error
position: coordinate
});
infowindow.open(map);
So i am getting
InvalidValueError: setContent: not a string; and Element-
In this I know I can place a domNode or string inside the google info window's content. So I need to know how can we convert this ui5 view to domNode or any other solution.
You can get the DOM Node of a SAPUI5 View or Control by using the method getDomRef
var infowindow = new google.maps.InfoWindow({
content: view.getDomRef(),
position : coordinate
});
infowindow.open(map);
Please be aware that a SAPUI5 View/Control only has a DOM Reference after it was first rendered. Furthermore after a potential rerendering you might have to re-apply the above code.
BR Chris
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)
});