I am trying to add an image inside of a google maps marker (not info window). Essentially I want an avatar as the marker, but still want to retain the marker icon.
Is there any way to do something like this in gmaps 3?
Is something like the Marker With Label class what you're looking for? It adds a DOM object to a marker which you can place an image in.
I am not sure exactely what you wanna do. In the past i need an marker with number on it (to display how many elements each place has). I released it as an open source code and you can find it http://zeetha.com/open/iconsharp/
Does it help you?
Related
I am working with markers and adding them like this:
markerLatLang = new google.maps.LatLng(35.6412142,139.6988337);
marker = new google.maps.Marker({position: markerLatLang, map: map});
When I go in to street view all the markers are at ground level. Is there a way to position a marker at x meters above ground or at a set altitude?
Unfortunately, as Dr.Molle said, this option doesn't exist in Google Maps API for now.
I have done this using a PNG image having bottom empty space how much you want. I also did not find a proper way to do that but this trick may be helpful to you.
I got a bit of a problem. I want to display a route between two points and give custom markers to both points. It is working.
I set suppressMarkers = true
I call directionsService.route to display the route.
The map's center is correct, the whole route fits into my map's canvas beautifully.
Then I add custom markers to both origin and destination.
Then comes the problem: When I add the custom markers, the map's center jumps to the last added marker. I want to keep the map's center on the route, that was originally generated by the directionsService.route function.
PS: Weirdly if I add the markers before displaying the route, the map still centers on the last added marker.
Thanks,
Pál Terebess
One option to try would be save the Bounds (using getBounds) of the map after generating the route and reapply it after adding the markers (using setBounds).
Edit: setBounds isn't a function. Maybe try either fitBounds or getting the zoom and center and resetting those.
My bad, sorry. I just found the bug this morning. I used setcenter when adding the markers. It works perfectly now. Thank you for your time guys! I am greatful nevertheless.
I need to customize a Google Maps InfoWindow.
In particular I want an image to "hang over the edge" of the InfoWindow. But when I place the image absolute within the InfoWindow-DIV it disappears behind the border of my InfoWindow.
Adding a z-index changes nothing.
Hope I made my point clear. Any ideas?
There are many custom window solution , see this one for example:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html
If you want something outside of the infoMarker border, you'd better use a custom solution.
The built in one is good for the simple stuff.
I am plotting some markers on a google map (API v3). If there are, say, 3-4 markers together at one place and somebody does a mouseover I want to spread them out. This way it becomes easy for anybody to click on a specific marker.
Note: I do not want to show use marker-cluster and then zoom the map on clicking the cluster.
Here is an example of what I want to achieve:
Try doing a mouse over on this map: http://www.austria.info/uk/interactive-austria-map wherever you see some markers together. How it has been implemented? Any library / sample code for this?
Thanks for your time!
Himanshu
I have not used this but it says it does what you're looking for:
https://github.com/jawj/OverlappingMarkerSpiderfier
I've inherited a small project. The person before me created a native app for iPhone, implemented in objective-c, and my job is to remake it as a webapp with PhoneGap for iOS and Android.
In my predecessor's original implementation, part of the app has the functionality of allowing the user to drop a marker on a map to select a location. I found a comparable way of doing this, but the supervisor wants the exact way she'd done it, which I'm having a little trouble with. Let me describe:
In her native app, the map appears with a marker in the center of it. The user then slides the map around beneath the marker (which stays in place on the screen), until the marker is positioned over the spot they want. Then they hit a button marked "Select," and those coordinates are sent to the app for irrelevant other operations.
I'm trying to do the exact same thing with the google-maps javascript api and html/css, and I can't figure it out. Do any of you Gmaps pros have any ideas?
You may observe the center_changed-Event of the map. When it fires set the position of the marker to the new center of the map.
Another suggestion:
For a better effect instead of a marker you may use a custom control. You may insert a marker-image there so it will look like a marker. To place it in the center, push the control to
map.controls[google.maps.ControlPosition.RIGHT_CENTER]
(it will be vertically centered then) and apply the horizontal centering by adding a right-margin to the control