I am hoping someone can point me in the right direction. I have a google map v3 with fusion table that I am looking to create a custom box with the content that would normally be displayed in an infowindow.
Much like http://www.instaearth.me or
http://chrismcaleenan.com/map/?page_id=7
So the user clicks on the marker and the content is loaded into a box/window/div that is not attached to the marker itself.
Does anyone know of any samples / tutorials where someone shows this being done.
Thanks
The FusionTablesLayer has a FusionTablesMouseEvent which is returned on a click (if you add a click event listener to the FusionTablesLayer). That Object contains the data in the row associated with that geographic object (icon, polyline or polygon), and you can use it to populate an HTML div on your page.
working example, zoom in past zoom level 2 to see the FusionTable code work, at zoom 0, 1 it uses the KmlLayer
Related
I am binding a hidden DIV element with Google maps, when the DIV element is being shown. The user can show and hide the DIV multiple times. I want Google Maps to be loaded and bound to the element only once, and not everytime the DIV is (hidden and) shown. Is there any API method from Google Maps which will check if the element is already bound to a Google Map object?
map.getDiv()
gives you the current div the map is bound to.
Hope this is helpful. You can easily implement the functionality.
Initialize the Map once. Then just hide and show the div as per requirement.
Just make sure to Initialize the Map when the Div is visible or else you will run into problems of improper map rendering. (at least this happens if you have bootstrap).
I have a Googlemap with multiple markers on that I refresh when moving around or zoom in/out the map. So far so good. The problem is that if a marker is refreshed, I mean repainted on the map, then it blinks for an instance, as it first gets deleted as an old marker and then painted as a new marker. I use setMap(null) to hide markers. Is there a way to avoid this blinking? Is there a way f.e. to add easingout effect at setMap(null) using jQuery or something?
Write your code to not do that. Don't delete all the existing markers, only delete those that no longer appear in the updated data and add new ones.
QUestion
I'm trying to show a google map with markers and a list refering to those markers next to it and link each list item with a the markers on the map.
So When I hover over link 1, the map should move to marker 1 on the same map. When I hover over link 2, the map should move to marker 2 on the map.
Findings
I found a solution very similar to what I want, but I cant seem to figure our how to call the funciton moveMarker( map, marker ) on hovering a link.
You can see a working JS fidde here : API Fiddle link
Can you guys please give me some thoughts?
How I've done this before is, have a global array of markers. Have your links numbered 1..x. Pass that number into the moveMarker function to indicate which marker is being hovered (or figure it out from the ID of the link). Use that to determine the position of which marker in the array to move to.
Also from your code snippet it seems map is a global variable (you don't do var map in your initialize function), so you shouldn't have to pass that in as an argument to moveMarker.
I am writing a WinForms application with a WebBrowser control. I use Google Earth Plugin in this application, and need to create some placemarks on Google Earth. Depending on the current range (zoom level) some of the placemarks may be very close to each other on screen (when the earth is zoomed out enough). In this case I want to create not all but just some of the placemarks to avoid over-crowding the map on screen with placemarks.
For example, suppose I have 1000 points I want to create placemarks. When I loop through all the points for the placemarks to be created I want to convert the lat/long of each point to the WebBrowser control's client coordinates so I can check to see if it is very close (on screen) to other placemarks already created. If it is very close to other placemarks I just skip the creation of this one. So if the user zoomed out to a certain degree the actual number of placemarks created may be much smaller than 1000 (for example, 400).
This is where I have difficulty with. I don't know if there is a way to convert lat/long to client coordinates of the WebBrowser control hosting Google Earth Plugin. I know that for mouse events the client coordinates are there for me to use but there is no mouse event involved in this case.
Anybody has an idea how this can be achieved? Thanks!
The approach you're trying to use to fix the problem is incorrect. However there a few options:
Going with your current approach -- you have two options:
You can ask the current view to convert a given lat/lon to screen X/Y.
https://developers.google.com/earth/documentation/reference/interface_g_e_view#a8c39d0324f2350c54fe2de981f1be418
You can get client mouse coordinates as part of KML mouse events that are fired off the GEWindow class:
https://developers.google.com/earth/documentation/reference/interface_g_e_window-members
The KMLMouseEvent that is fired contains client X/Y space:
https://developers.google.com/earth/documentation/reference/interface_kml_mouse_event
The correct approach would be to add KML region tags to your placemarks so that placmarks show/hide as the user pans/zooms etc.
http://www.google.com/earth/outreach/tutorials/region.html
I would like to personalize the position badge on a Google Map (with API). I know it's possible to change the appeareance of the badge with CSS or image. But how I can do that ?
This is what I want :
The small rectangle is the normal view, and the big rectangle is the clicked view (with informations). Thanks !!!
The 'big rectangle' and 'small rectangle' are both infowindows. Styling infowindows has been asked here before:
Styling Google Maps InfoWindow
You'd need to have an event listener, so initially the small infowindows are all displayed on load. Then when you click on a point or on an infowindow, you then show the large infowindow.