Is it possible to display HTML instead of an image as a Google Maps Marker ?
What is the best way to do so?
I imagine that something like an invisible marker and a custom info-window might play a role in achieving this
You can use OverlayView class to create custom overlays with html elements - https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays
Simple example - http://jsfiddle.net/BCr2B/
You might want to check this out: https://github.com/jonyt/gmaps-div-overlay
DivOverlay is a very simple container for HTML to be shown over a
Google Map at any position. All it does is calculate margins from the
map bounds so its entire contents are within the map. Take a look at
the demo. The constructor takes 3 arguments: the HTML container, the
map to attach to and the position of the overlay. DivOverlay has only
two functions: show() and hide(). Should be self-explanatory.
Related
I want to use mapboxgl.Marker() since I need to build a custom < div> and stylize it by css.
But I also need to use:
map.queryRenderedFeatures() - to get information about visible markers on the screen
map.setLayoutProperty() - to filter markers like groups
Question: Can I use mapboxgl.Marker() to place it on Layer, not on Map?
Or can be another way of use mapboxgl.Marker() with map.queryRenderedFeatures() and map.setLayoutProperty()?
I see a possible hack: combine Layer with invisible layer-markers, and over them set mapboxgl.Marker(). This will allow me to use map.queryRenderedFeatures(), but map.setLayoutProperty(id, 'visibility', 'none') will still not work.
Right now I am setting the bounds of my react leaflet map by passing a bounds parameter as shown below:
<div hidden={!this.props.hide && !this.props.toggle} className="map-container">
<Leaflet.Map ref='leaflet-map' bounds={ this.getBounds()} >
<Leaflet.TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'/>
{ this.geoResults().map(this.renderMarker) }
</Leaflet.Map>
</div>
The problem is that sometimes a marker is rendered on the outermost part of the map (in view) so the marker is not even visible unless I drag the map or zoom out one spot. I was trying to fix this with a buffer or trying to plot the bounds then use zoom to zoom out once but nothing seems to work. Do you guys have any ideas?
Solution
You can use boundsOptions attribute of the Map component to pass options to the leaflet's fitBounds() method. In those options you can define padding for example to "pad" the bounds.
From react-leaflet Map documentation:
boundsOptions: object (optional): Options passed to the fitBounds() method.
From leaflet fitBounds options documentation:
padding: Equivalent of setting both top left and bottom right padding to the same value.
Example
So something like this should work (didn't test in action):
<Leaflet.Map
ref='leaflet-map'
bounds={this.getBounds()}
boundsOptions={{padding: [50, 50]}}
/>
Defining your Map element like that should pad the bounds. Tune the padding values to suite your needs.
Another approach
You could add padding to the bounds in your getBounds() function.
I have a very busy Google Maps app that I have built and I'm trying to create a "buffer zone" around the outside edge of the map so that the google map commands won't put things there. My solution was to create invisible divs and add them to the map as controls, one for each of the edges. This seems to work great as all of the google commands see them and adjust accordingly, and the map appears normally. For example, fitBounds ensures my bounds is not under the invisible layers. For the top where I have a control bar it's a perfect solution, but for the other edges where there is nothing, it creates a problem - I can't click on the map or info windows under these controls as they take the click event.
So I'm looking for one of 2 solutions:
1) can I make my invisible controls pass clicks through to the map, or;
2) is there a better way to pad the edge of the map; something that doesn't involve a much of math every time I want to call a fitBounds or panTo would be preferred as I automate a lot of map motion
Cheers
I managed to solve this.
The best way to add padding to your maps is with invisible controls. It creates the padding that all other map functions obey without any additional coding when call them. Here is how to do it for everyone else who needs this.
First.. I create a function to simplify creating the divs.
function createDummyDiv(w, h){
var out = $(document.createElement('div')).addClass('dummy-div').css('width', w).css('height', h);
return out[0];
}
Then I add the controls as needed. In this case I have the normal zoom control in the LEFT_CENTER position, so I had to create 2 for the left side. This creates a 10% padding on the left, right and bottom, and a 55px padding at the top under my own control bar.
map.controls[google.maps.ControlPosition.TOP_CENTER].push(createDummyDiv('100%', '55px'));
map.controls[google.maps.ControlPosition.LEFT_TOP].push(createDummyDiv('10%', '45%'));
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(createDummyDiv('10%', '45%'));
map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(createDummyDiv('10%', '100%'));
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(createDummyDiv('100%', '10%'));
The.. the final fix to my problem is to put them behind the map layer with css.
.dummy-div{ z-index: -100 !important; }
I hope this helps someone else
Try to give the invisible DIV a negative z-index, e.g. -10
For me, fitBounds api worked itself with second parameter (padding)
Add padding to google map bounds
In the Google Maps API v3, how can I get the waypoint markers from the DirectionsRenderer in order to add click events to them (such as a delete menu).
Until a better solution can be found here is the work around that I have employed. The basic idea is to put your own marker on top of the waypoints and bind a click event listener to your marker. I have made a jsfiddle demonstrating the idea.
It definitely isn't perfect, but with a custom icon instead of the default marker it could look sort of natural.
Another way, which doesn't involve putting new markers on the map, would be to detect DOM click events on the map widget. The idea is simple. When a click is detected:
convert all waypoints' LatLng coordinates to coordinates on the screen (or, in fact, on the map widget) using MapCanvasProjection
calculate distances between waypoints and the point clicked. If user clicked close enough to any of the waypoints (the distance is lower than the radius of a waypoint icon) - display a menu for that point
I coded a complete solution in java for gwt. It should be pretty straightforward to get it translated into javascript.
Instead of creating a click event on a waypoint, you can create it on a marker, and assign it a high z-index so it overlays the waypoint.
Create the single markers and assign the a high z-index
marker = new google.maps.Marker({
map:map,
position: new google.maps.LatLng(1.99, 2.99),
});
marker.setZIndex(999);
Add a listener to the markers
google.maps.event.addListener(marker, 'click', function(event){
alert(marker.title);
});
And now create the waypoints.
I was playing with Google maps for last two days and started understanding little bit about its functionality.
I was using Large Map i.e. 700 X 300 resolution map size and i was trying to implement controls used in small maps.
eg.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 18);
map.setMapType(G_HYBRID_MAP);
**map.setUIToDefault();**
map.enableContinuousZoom();
var customUI = map.getDefaultUI();
customUI.controls.smallzoomcontrol3d=true; //1. trying to override largezoomcontrol3d
customUI.controls.menumaptypecontrol=true; //2. trying to override largezoomcontrol3d
map.setUI(customUI);
map.enableRotation(); //3. Enabling rotation
Here in 1(a). Small zoom control is not getting visible until i remove the line map.setUIToDefault() and add one more line customUI.controls.largezoomcontrol3d=false. Although I was expecting that by writing above code those control will get overridden.
1(b). I tried to use map.removeControl(Control:GControl) where i was not able to pass the correct parameter. I wanted to remove largezoomcontrol3d from map but i was not able to make out how to refer to this control in the current map.
Same overriding problem is occuring here also. The only difference here is that both the controls are visible here menumaptypecontrol and maptypecontrol, here menumaptypecontrol is overlapping on maptypecontrol
I am trying to enable rotation on map but it is not working for me.
thinking about map.removeControl you were quite closely to solution (if I got what you need). take a look here:
Controls
so, you need just use map.addControl function to add exactly what you need instead of what you did.
sorry, forgot about map rotation. I think the following simple example of Google Map can help you (I just never played with rotation, but example looks very simple to learnt from it):
Google Map rotation example