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);
});
}
Related
I need a googlemap with clusters, popup and list where you can click on.
Hoping to find a simple solution which I can easily add markers and have a marker list which points to the marker on the map.
I have successfully used markercluster.js
Just load all your markers into a json (in my example they are in the variable locations), then load them:
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location
});
return marker;
});
If you look at the example code, it will show you how easy it is.
The Google Maps JS API documentation is as clear as it comes.
https://developers.google.com/maps/documentation/javascript/adding-a-google-map
I don't think there's an off-the-shelf solution that looks exactly like your example. Getting that list is going to require some HTML work to position/render the module, and Javascript/DOM integration to sync it with the map. Some rudimentary front-end development is involved and if that's not something you want to tackle, perhaps you could just make a custom Google Map and link to it.
https://www.google.com/maps/about/mymaps/
I'm trying to track people clicking on map markers with google Tag Manager, is this possible and if so, what are my options?
Thanks in advance!
I would expect so, see https://developers.google.com/tag-manager/devguide#events
You want to trigger this dataLayer.push event on click of the markers, e.g.
google.maps.event.addListener(marker, 'click', function() {
dataLayer.push({'event': 'markerClick'});
}
Sorry for my bad English!
I have spent more than a day for web search about this, but i have not found the solution yet. Please give me a suggestion.
I'm now working with google maps api. I've got a place autocomplete sample here: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
As the attached image, the place autocomplete feature works perfectly. When I enter the key word [Sydney distance education] --> click on the first suggestion --> the marker was moved to the specified place. I can get more detailed information from the marker variable.
This is the screen: http://www.imagesup.net/pt-1314056232011.png
When i click to the specified place on the map, it display a InfoWindow. I don't know which event should I need to listen to help me getting more detailed information of that place.
I have tried this
google.maps.event.addListener(map, 'click', function(event) {
alert('OK');
});
But the event is fired only when I click to another location which does not have viewport
I am working on a Google Map project. I need to accomplish something interactive. On the map, there will be lots of markers indicating different places and one place will be set as center. Clicking on the marker will pop up the infoWindow. On the infoWindow there will be a link named “NEXT”. Hitting that link will take the viewer to another marker place. It seems to be straight forward, so my question is there any API method to accomplish such task? Any help/suggestion will be highly appreciated.
Use the domready event of the infowindow to bind your click events, as described here.
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(infoWindow, 'domready', function() {
// whatever you want to do once the DOM is ready
});
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.