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.
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
I would like to add some controls to a div containing the google maps, but when the map is assigned to the div it clears its contents. Is there a way to prevent this?
My reason for this is a don't want to use the controls api + I want my controls to be positioned absolutely inside this div.
set the mapOption noClear to true
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
Any ideas how to place custom control between pan and zoom controls in google maps API v3?
I know how to do this when the custom control is on the top of native google's controls stack (for exmaple http://jsbin.com/ahetag). But it is not a solution...
You need to use the LEFT_TOP control position for the "middle" element and then set it as a control option for the zoomControl. So that the panControl is positioned as TOP_LEFT (by default) and then the other elements float downwards.
http://code.google.com/apis/maps/documentation/javascript/reference.html#ControlPosition
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.