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)
Related
Been trying to get my head around this for some time although clearly i'm missing something
what i am trying to do is not draw a new map although provide a src link to say (https://www.google.com/maps/d/u/0/embed?mid=1xI_dALvs0A-oySG-dkf4BYeDyBk) to something of the below
https://developers.google.com/maps/documentation/javascript/styling
I want to embed my custom map with the markers to my site and styling it
I guess map = new google.maps.Map(document.getElementById('map') has something to do with the drawing of the new map although not too sure as to take it out or what.
is there anyway to use the custom map + .json code rather than hard coding an array of poi's as would like to rely on it pointing through to the custom map link for the markers
is there any better way to get around this
Google Maps JavaScript API can load data that were stored in GeoJSON format. So you have to look into GeoJSON specification and create corresponding file for your markers (or polylines, polygons, etc.).
The Google Maps JavaScript API documentation explains how to load the GeoJSON data via Data layer of maps:
https://developers.google.com/maps/documentation/javascript/datalayer#load_geojson
You should combine the styling example with GeoJSON example from the documentation to achieve your goal.
Here is the github link - https://github.com/hpi1hpi/custom-google-map-with-json
Add google map with custom color and data from JSON with slider
Is is possible to add a business location marker WITH IT'S "DEFAULT" INFOWINDOW bubble like the ones in maps.google.com?
I'm making a contact page for a a company, where I have the GMaps element with a location and a marker, naturally.
Example:
Go to maps.google.com and search for "Colosseum" (for example, any "known" location/business will do). When you click the Colosseum marker, you get an infoWindow that has the business/sight/whatever info in the window (screenshot: https://dl.dropbox.com/u/1122582/colosseum.jpg)
What I want to see, is:
When I click the marker on my map on my webpage, it will open the same style (or atleast very similar) infoWindow as in the example (this means logo, address, direction links etc. whatever it has). InfoWindow being provided by the API options, and not handmade by me.
In pseudocode, I would imagine seeing it like this:
myMarker.onClick({
position: myBusinessLocation,
useDefaultInfoWindow: true
map: myMap
});
Worth noting that since coordinates are actually just coordinates and named locations, I would need to make the API understand the Marker points to a business, and not just a point in the map.
Requirements
Client-side API usage
WITHOUT the use of Google's IFRAME embedding
WITHOUT making a custom infoWindow that just looks like the one in the example. The whole point is that I would use the "default" infoWindow (if GMaps API even provides one)
There is no built-in method to create such an infoWindow with the desired content automatically.
That's the nature of an API, it has to offer the ability to create an application, but must not create an application automatically.
You have to create the infoWindow on your own by using e.g. the implemented infoWindow-object.
The contents of the infoWindow you also must collect on your own, you may retrieve the details for a place by using a Place-Details-Request
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 have a KML layer of markers on a google map representing specific countries. When the user clicks on the marker I want it to take them to a specific URL for each marker. I've seen answers on here that explain how to add an onclick event when creating a marker, but I need to add separate onclick events to each marker from a KML file and pass a URL value from the KML file for the onclick event.
I have the URL value stored in the KML file like this:
http://example.com/countries/usa/
I figured out that I can add an event listener to the KML layer that will respond to specific markers, but when I pass the marker object and log it in the console it doesn't have any of the information that was originally in the KML file.
google.maps.event.addListener(klmLayer, 'click', function(countryObject) {
var marker = countryObject;
console.log(marker);
});
Is there any way to pass a value from the KML file to the markerObject so I can use it in the above onclick function to direct the user to a specific URL? If not, what are my options?
Thanks!
https://developers.google.com/kml/documentation/kml_tut#network_links
There's a way with geoXML3. I first wrote about it here. The idea is to pass a custom function as the parser reads the KML file. I wrote a simple example that reads this KML file, with URLs stored in the description and styleURL tags. The big disadvantage was that I couldn't figure out how to get geoXML3 to read other tags. Mouse over the markers to get one set of URLs and click to get the other set.
Another roadblock I faced was realizing I needed to place both html and KML in the same server because of Ajax. It did nothing when working offline.
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