So I am using gmap3 to dynamically load my map marker icon based on user image profile photo. Ideally, I want to have some custom styling on the marker icon image, and each marker icon image is different from user to user.
Here are two difficulties I have encountered:
Google map load marker icon as canvas (correct me if I am wrong), so it is not an image tag on DOM, thus I don't know how to add css styling to it
Even if it loads it as image, I couldn't find a way to define a callback function with gmap3 (and use jQuery to style the image selector) when the custom icon is completely loaded on DOM. (I tried liveQuery, it's a horrible idea, and I've tried google.maps.event.addListenerOnce(map, 'idle', function(), which didn't work out well.
Here are some of my approaches:
I added animation property to the marker, and pass a random string to that (which should produce an error), and this makes icon loaded as an image tag on DOM.
I then use setTimeout (because I do not know where to define callback function on gmap3 after the marker is loaded) to select image css, and add a background-image css property to that transparent icon image, so I can have a custom user profile image on marker
Please help
to apply css on a marker, you can try the following method to include var marker = new MarkerWithLabel. Link
Related
Currently on a page I am building I have heremaps as the background page, designs call for two elements on the left and on the right that I'm placing over the map element. Right now, when I'm selecting the options button on here maps to select the map view type and other options, those views get hidden as my right element covers it. I've noticed the here map logo has a z-index of 1. Is there a way to change the zIndex of the options button on the buttom right corner?
This code should work for you:
// assuming ui is instance of H.ui.UI
ui.getElement().style.zIndex = 999;
For more information see https://developer.here.com/documentation/maps/topics_api/h-ui-ui.html#h-ui-ui__getelement
The calendar (so far) doesn't seem to account for collision detection when deciding the position of the calendar. For example :
In the screen shot you can see that the calendar goes off screen. Even if I disable horizontal scroll (overflow-x: hidden;), it still renders off screen.
Is there a solution to this without hacking away at the styles?
react-day-picker's DayPickerInput API now has classNames which allows you to change the name of the classes for the overlay and the overlay wrapper. You are basically renaming them so that in your own CSS/LESS file, you can use that name to style the overlay and have it use that instead of the classes in the react-day-picker-style.css (which you should not try to change as a best practice).
If you want to change the default props for the overlay (calendar popup), then you would do something like this wherever you are creating the component:
createElement(DayPicker.Input,
{ //all other props
classNames: {
overlay: "TheNewNameForTheClass",
overlayWrapper: "TheOtherNewNameForTheClass"
}
}
})
And then in your styling file, you would use TheNewNameForTheClass and TheOtherNewNameForTheClass to style the overlay.
I just started working with Google Maps API v3 and I'm using the map div alongside some other DOM elements showing above it by seting position aboslute and working with z-index.
My problem is I have to show the infoWindow of google maps that is generated inside de Map div above the others DOM elements.
I'm not getting there. I also tried to put the DOM elements inside the Map div but it seems de API erases them.
Does anyone know what it could be done in order to infoWindow show above everything else?
Use custom overlay's to place the elements on the map. The elements need to have position set to fixed.
You can try to use custom controls instead of DOM elements to place on the map. The custom controls are placed above the map and when you open an InfoWindow, Google maps detects the position of the controls and automatically moves and opens the InfoWindow below the controls, so the both don't overlap. In this case it is better to use it instead of the custom overlay, because the overlay moves when you drag or zoom the map and the control always stays at the same position.
I understand that google.maps.Marker can have a title set to them in their options, can the same be done for google.maps.Circle?
I've tried just setting title on the google.maps.CircleOptions object, but that doesn't seem to do anything.
Is there a way I can give the circle overlays a title? I imagine there is, as when you hover over a circle, the cursor is changed to pointer so there must be some kind of detection there. I don't want to make my own custom tooltip and attach it to the hover event on the circle, I want to use the browser's built in title hover.
Circles:
https://developers.google.com/maps/documentation/javascript/overlays#Circles
CircleOptions object: https://developers.google.com/maps/documentation/javascript/reference#CircleOptions
It is not currently possible to add a title to a circle. As you can see from the CircleOptions, it doesn't list 'title' as a option that you can use.
A work around could be to listen to the mousemove event on the circle then to show your own title as a custom OverlayView
I have been searching on the Google Map API V3 documentation but I could not find any way to use my own html content instead of an image to create a custom icon on the map.
I would like to display a dynamic marker that can display text or anything I want.
For exemple :
<div class="marker">Dynamic text</div>
I have seen this thread google map api v3: can I use a div instead of an image to create the custom icon? where someone advice to use "Custom Overlays" but in the documentation it only displays an image... I don't see the point of explaning how to display an image with "Custom Overlays" if it is done to display html content.
http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays
How should I proceed then ? Should I use Custom Overlays ? There is not anything that seem easier to do that ?
Mano's got the right answer if you're looking to position something on the map that isn't bounded geographically, like a menu or titlebar.
If you're looking to display something geographically-bound, like a city name (pretending for a second that the API doesn't already do this) than you'll be headed the CustomOverlay route. While all the examples use images, that's not a requirement by any means. If you look at the simple overlay example and view the source code around line 62 you'll see the exact lines adding the <img> object to the <div>. You could just as easily add text to the div instead of an image.
Actually you can use float the div over your map using CSS. You have to be careful about the positioning. Check out this post:
div on top of div with Google Maps API
Go to this demo purpose website: http://easysublease.org/mapcoverjs/
On the map, right Click on map, and you will see a context menu. Within this context menu, there is a input, you can just input some text on the input. Then next generated Marker will have the text you entered there.
To see how it works, you can go to its github: https://github.com/bovetliu/mapcover.
Mapcover.js is one javascript gadget enabling Developers to Write HTML/CSS to create customized elements on Google Map.