I'm working on a project where, after creating some nice code for creating polygons and attaching mouse events to them, the addition of KML layers (mainly placemarkers) results in uncooperative behaviour between the placeholders of the KML layer and the generated polygons.
If I create the polygons first and set the KML file afterwards, clicking on the placemarkers brings up the infowindow () as expected. However, mouseovers on the polygons below yield no result, whereas before they get highlighted and are clickable (which they aren't).
Setting the KML layer to null doesn't help either. The placemarkers disappear, but my polygons aren't registering.
When I first call the KML with placemarkers, the polygon layer called later goes on top of the placemarkers. The polygons are opaque, so you can see the placemarkers like you could through a window, but you can't click or interact with the placemarkers.
Setting the polygons to null results in the same behaviour as before. Placeholders still cannot be clicked on.
Help? I couldn't find a zIndex reference for the KML layer code, and I'm hoping that's all it is. I read somewhere else - and imagine this to be true - that the KML and user-gernated content "layers" are conflicting with one another - the latter one that's put on the map takes focus, captures events, etc. I would've thought that it wouldn't matter, in the same way that you can have divs on top of other divs, especially if you use indexing.
If you simply want to display the information in the KML layer and not have it react to user events, you can add the suppressInfoWindows flag to the constructor:
var myKmlLayer = new google.maps.KmlLayer('http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml', { suppressInfoWindows: true });
This will effectively shut off all interactions and let your other layers receive interactions.
Edit: Forgot to mention that a good source of information is the Google API V3 site discussing KML layers
Related
First, I have been reviewing some of the different Google Maps API docs, but I've never done much coding with it. I'm trying to build a simple game for kids in which, if the user clicks on a map within a certain distance of a key map point (could be within 1 mile, 100 yards, 5 miles...depending on situation), then the map point becomes visible and a custom message is displayed with it.
Which google maps api calls would enable this to work? How would I embed a hidden point on the map? With the map being rendered on the client, for security, if I could detect the point clicked and send that point via ajax to the server, then the server could send back whether there is a hidden point at that location, that seems like it could work. Or maybe there's a better way.
Can someone point me in the right direction, as to which API calls, and maybe code samples if possible? To summarize, I'm looking for the following functionality:
Track the lat/long coords of any user-clicked point on a google map. Have that click send the coords to my javascript function.
Have hidden points on the map that the user can't see, but either Maps (or at least just my server via ajax) can be aware of.
Ability to display a custom message right next to the clicked spot or hidden point, when needed.
Thanks!
When I understand correctly what you are trying to achieve it's much easier.
Draw a circle and hide the circle by setting the strokeWeight and fillOpacity to 0 . As radius use the allowed distance, as center the LatLng of the point
Although the circle now is not visible, the API will still respond to click-events on the circle, you only have to set a click-listener for the circle and create e.g. a marker at the center of the circle.
Note: a clickable circle will have a different cursor, you must set a unique cursor for the complete map, otherwise the users will be able to find the circle by hovering the map.
Demo: http://jsfiddle.net/doktormolle/0secbwuf/
The question is pretty descriptive.
I am working on a website that provides locations for filming.
All the data in the site is currently stored in a MySQL database including geocode data for google maps.
I need to show polygon areas for the different london boroughs that has locations.
I have all the data as kml files, idealy i would like to store this in the MySQL database.
I have had success using fusion tables to display this data, but it seems silly to me to have to have this data duplicated on google just to use a fusion map layer, can i simply use a kml layer to render this data rather than having to create a fusion table and rendering it from that?
If so, is there a resource someone could point me to for more information?
UPDATE:
Thank you for the responses so far, i thought i would update the question with a little more info .
I eventually want to have all the areas displayed at the same time on my map and then when an area is clicked on ideally it would take you to another page on the website showing locations for that specific area.
I had initially tried using KML layers but i was getting errors saying my KML was invalid.
The KML was initially stored in a field in my database table, i think probably the errors were due to me not understanding exactly how google read in the KML data.
Using polygons would be far simpler to implement as i can get this data via JSON and then render the polygons from that.
I know now its not possible to have info windows with polygons, but i would just prefer to jump directly to another website page with info for that particular area using a click handler rather than show an info window.
Alternatively as suggested showing a tool-tip with a brief description of the area and a link to the page would be better, how the tooltip itself, is it possible to render on top the map?
I am slightly worried that I will reach the layer limit for the KML.
Is it possible to have multiple polygons rendered with KML on one layer, or do i need a separate layer for each clickable area?
The Google Maps API provides a pretty straightforward method to draw polygons.
Basic Example:
var polygon = new google.maps.Polygon({
map: your_google_map_instance,
paths: array_of_latlng_points,
fillColor: "#336699",
fillOpacity: .5,
})
EDIT: For this approach, you would need to parse your KML files (sorry, must've missed that when I first read it). You can import the KML files to a KML layer
You can overlay Polygons using KmlLayer, FusionTablesLayer (as you know), or native google.maps.Polygon objects.
KmlLayer and FusionTablesLayer render them as tiles, so for lots of Polygons (if you only need click events) will be more efficient. There are limitations on the number of KmlLayers that can be displayed on the map at one time and on FusionTablesLayer (but those don't seem to be causing you problems).
There are also third party parsers available for KML (geoxml3, geoxml-v3) which will take your KML and render it as native google.maps.Polygon objects. For lots of Polygons, this will be less efficient than tile based rendering, but it does allow mouseover/mouseout, and changing the properties of the Polygons dynamically.
You could also try data layers what have lots of events so you can display tooltips, info window, status text on various mouse events.
See samples in documentation:
https://developers.google.com/maps/documentation/javascript/datalayer
If you have many polygons (where the actual value of many depends on multiple factors, can be anywhere between 100 and 1,000) the best is to use a built in layer type. The fastest are the ones rendered on server, e.g. kml layer because this doesn't create hundreds of DOM elements in browser but still exposes click events so infoboxes can be displayed for each item.
In the worst case you can implement your own rendering with an image map, obviously by using an existing library like mapnik.
https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes
I am attempting to add tabs to the infowindow of this site http://nctcog.org/trans/data/trafficcounts/index.asp
As I have literally thousands of points stored in a database, as the map center changes, I grab the map boundaries and pass them to a page that build the KML file which then loads them using google.maps.KmlLayer. Most of the data in the infowindow is stored in the same table as the lat,lon and I load it along with the coordinates when I build the KML file.
I have tried several methods of manipulating the tag with no success.
I know there is a listener that can be added to manipulate the infowindow, but since I'm not adding my markers with a listener, how do I tie it to the correct marker?
The hard part is manipulating your markers from a KML file. As far as I have tried, there's no way to do so when you are using KMLayer. Since you are creating KML on the fly, it makes things easier.
Luckily :) I worked on a KML question recently and have a starter file. An annoying "feature" is that the AJAX calls forced me to put the HTML and KML in the same public computer. I couldn't work offline. You could try a local web server, I didn't.
https://files.nyu.edu/hc742/public/googlemaps/kmlcircle.html
The key idea is to replace the default functionality of createMarker shown below with the name of your own function. In this case I was adding circles, in yours, you need to add InfoWindows.
geoXml = new geoXML3.parser({
map: map,
createMarker: addCircle});
Adding tabs to your infowindow can be done in at least two ways. The JQuery way and Tabber Way (once this page is loaded click on the green line)
Is there any tool that can help me with getting the coordinates for a specific area/polygon?
I usually use Google Earth.
Draw a polygon, then move the mouse over and right click > copy.
Then you can paste it in the notepad and you will find the coordinates there (remeber the format (long, lat,n) the reverse of Google Maps format.
You can also use online tools to format the information or remove parts.
http://www.earthpoint.us/Shapes.aspx
So the idea is to have a map, draw a polygon on it (I assume by placing the vertexes) and then getting the coordinates of the vertexes?
You can make markers draggable when you create then. You can also get the lat/lng position of the markers when certain events fire: the 'dragend' event, for instance.
With these tools, you have the basics of your requirements here. Make a button that places vertexes on the map - just use a marker with custom graphics - and let the user drag the vertex to whatever position they need. Record the new position of the vertex whenever the dragend event fires. Draw lines on the map between the markers, to show to the user the area selected. Have a button to 'complete' the shape, linking the last vertex up with the first vertex.
There may be some existing code to do this, but I am not aware of it. However, it should be possible to throw something together with a bit of work.
i'm creating a simulation model using Google maps, i have created a new KML layer and marked few areas which are dangerous to users to go through, now i want to add a moving object to resemble a person on top of it and give a warning when that object nearing the area, does any one have the idea of doing animation of that kind using Google maps?
If you are talking about a moving marker i think you can use the setPosition of the marker object in a for loop feeding it with the coords of a line let's say.