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.
Related
I am creating a search page based on continents. And I need to let the user click(choose) a continent and based on this choice. I do backend logic.
What I tried is to set a world map as a background of a div. And on this map I put the linkbuttons that represent the continent (as attached).
The problem is when I resize the screen the linkbuttons go into wrong positions. So please help me to find a way to PIN the buttons (continent names) to the map when resize or open the page on different screens.
Thank you.
Here is a link to a youtube video that shows you how to use google maps API. This may make what you are doing a little easier. I recently used this to create a mobile tour app.
Google Maps API
Thanks for trying to help. I just solved the problem and likeed to share the solution.
I have solved this using map on the image. So I made the continents clickable on the image without putting any controls on the image.
I'm running into an issue. I'm trying to rewrite an old flash/xml map using CSS. I have a big jpg of the map, which is the background. I'm able to lay the icons out, where they need to be.
The problem I'm having is centering the whole thing on the page. Ideally, the map would be centered and the user would be able to click and drag the background image to look at the various sections, the way Google Maps or something works.
How can I do this, or what is this effect called, so I can google it more in depth. Searching "map" at all gives results about customizing Google Maps. Which isn't what I'm trying to do. I'm thinking it'll involve absolute positioning and and viewports, but I don't know exactly how to code it.
Should I just make a frame?
It looks like Leaflet will probably solve the problem. http://leafletjs.com/
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
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?
In my app I have displayed some custom overlay on google map using MKOverlay with the help of TileMap sample code. My requirement is, I need to mask the entire google map underneath the overlay.That is, I want rest of the map area to appear to be in gray except my custom overlay.
Could anyone give me direction on how to achieve this?
Thanks in advance,
I don't know all the calls that you'd need to cover but I know how to find out. In the TileMap example code provided by Apple they show how the MKMapView will call for tiles. All you'd need to do is swap out the code that finds files on disk and swap in some code that always returns a grey square every time.
However this won't remove the Google logo or stop the app from downloading the map tiles from Google in the background. If you find out how to stop that please let me know.