Passing URL value to Google Maps Marker via KML - google-maps

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.

Related

Google Maps Marker click event that pulls a line from txt file in Android Studio (Kotlin)

I am currently working on an Android project using Google Maps. I have functionality that allows them to click a marker when they are nearby and it will remove that marker and move it somewhere else nearby. However, I also want them to "collect" something when the marker is clicked. That something is a random line from a txt file that I have stored in my assets folder, but I can't figure out:
1) How to parse that file in the first place
2) How to grab a random line from that file and store it somewhere else when the marker is clicked
Any direction would be greatly appreciated.
Let me give you another way to do so.
You have a marker, add some information to it. For example, a snippet. And after marker is clicked you store that.
If you want get some info from assets you should initilize random array onMapReady() and do some staff with it.

Custom Google Map (with markers) + Custom .json embed to website

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

How to properly hide markers in google maps?

I am trying to add a bunch of markers to a map with show/hide buttons for each category of markers. Adding a marker from stored db data puts them on the map and makes them clickable, but they won't respond to setMap(null) unless that call is through google.event.addListener(marker, ...). Calling it from a standard js button onclick event, or via google.event.addDomListener(marker, ...) doesn't work.
Also maybe helpful to note is that when I call marker.setAnimation(BOUNCE) the marker starts bouncing but it looks like there is a duplicate marker under it. Similarly, if I drag the marker it's as if an unmovable duplicate is created right under it.
Thoughts? This is super frustrating!
Just like this taken from here ? Are you trying to avoid google maps api's google.maps.event.addDomListener? Why? You can use it to listen to your button's click event too. just as in:
var YourButton = document.getElementById('myButton');
function HideMarkers() {
// Hide us
}
google.maps.event.addDomListener(YourButton, 'click', HideMarkers);
customized for you from. For the second part, seeming like double markers I suppose we need some code..
This turned out to be purely user error. I am using firebase to store map data without a server backend and was adding duplicate markers. This explains the "inability to hide" and also the appearance of duplicate markers when dragging or animating.
The reason it was working from a click event on the marker was that both duplicate markers were receiving the click event and so both were being hidden.
setMap appears to be perfectly reliable when used in or out of google event handlers.

Google maps V3 getting kml description from overlay

I found a KML file which has all the country data in it, which works great as an overlay, I've posted an example of one country from the KML file - My question is this:
I have turned off the infowindow using suppressInfoWindows: true How can I get the description tag contents as a var when the user clicks on the map? I know the click event part I just need to know how to obtain the information from the kml.
<Placemark><name>Aruba</name><description>ISO_A2=AW</description><LookAt><longitude>-69.98267466267889</longitude><latitude>12.52088880763951</latitude><heading>10.0</heading><tilt>10.0</tilt><range>700</range></LookAt><Style><IconStyle><color>00ffffff</color><scale>0.4</scale><Icon><href>http://icons.opengeo.org/markers/icon-poly.1.png</href></Icon></IconStyle><LabelStyle><color>00ffffff</color></LabelStyle><PolyStyle><color>ffD0D1E6</color><outline>1</outline></PolyStyle><LineStyle><color>ff000000</color><width>1</width></LineStyle></Style><MultiGeometry><Point><coordinates>-69.98267466267889,12.52088880763951</coordinates></Point><Polygon><outerBoundaryIs><LinearRing><coordinates>-69.89913876,12.45200511 -69.89567644,12.42301463 -69.94215939,12.43851756 -70.00414527,12.50050344 -70.06613115,12.5469864 -70.05086077,12.5970867 -70.03512529,12.61411408 -69.97313941,12.56763113 -69.91179949,12.48047883 -69.89913876,12.45200511</coordinates></LinearRing></outerBoundaryIs></Polygon></MultiGeometry></Placemark>
Solved it, just in case anybody else wants to know you add the listener to the kml and then use featureData on the click event - like this
kml = new
google.maps.KmlLayer("http://whatever/countries_world.kml",{suppressInfoWindows:
true});
kml.setMap(map);
google.maps.event.addListener(kml, 'click',
function(e) {
alert(e.featureData.name);
});
}

Tabbed InfoWindow Google Maps API v3 using a KML layer

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)