I have implemented a script that parses KML into a Google map, as described here. There's also a working sample here.
This works great in Safari and IE, but nothing happens in Firefox or Chrome on my installation (still local) and on the demo site. The only thing in the log is this:
--[13:07:38.076] "Unable to retrieve station.kml"
Could someone take a look at this and shed some light? I'm not proficient enough in JavaScript to figure out what's going on.
Thanks!
UPDATE: Here's my actual code.
<!DOCTYPE html>
<html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Where Are Our Alumni?</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<style type="text/css">
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
div#map-canvas {
width: 100%; height: 100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="geoxml3.js"></script>
<script src="markerclusterer.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var myOptions = {
center: new google.maps.LatLng(41.8813571,-87.6294174),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mcOptions = {gridSize: 50, maxZoom: 15};
var weather_url = "http://api.wunderground.com/api/6d9cb153ba3be6c0/conditions/forecast/q/";
var count = 0;
markers = [];
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
markerclusterer = new MarkerClusterer(map, [], mcOptions);
var infoWindow = new google.maps.InfoWindow({maxWidth:800});
var myParser = new geoXML3.parser({
map: map, singleInfoWindow:true,
createMarker:function(placemark){
if (placemark.point.lat != '0') {
var point = new google.maps.LatLng(placemark.point.lat, placemark.point.lng);
var marker = new google.maps.Marker({position:point});
markers.push(marker);
google.maps.event.addListener(marker, "click", function(){
var marker_lat = marker.getPosition().lat();
var marker_lng = marker.getPosition().lng();
var request_url = weather_url + (marker_lat + "," + marker_lng);
infoWindow.close();
infoWindow.setOptions({maxWidth:800});
content = ("<div><strong>" + placemark.name + "</strong><br>");
content += (placemark.description + "</div>");
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
markerclusterer.addMarker(marker);
}
}
});
myParser.parse('alumni.kml');
});
function clickMarker(i){
google.maps.event.trigger(markers[i], "click");
}
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
The geoxml3.js script is what's causing the error, available from here.
Looks like you are using an old version of geoxml3. You should use the latest version from the polys branch, unless you need KMZ support, in which case, use the latest version from the kmz branch.
Working example of clustered markers from KML with geoxml3
Related
This question already has answers here:
Google Maps JS API v3 - Simple Multiple Marker Example
(15 answers)
Closed 4 years ago.
I am trying to use Google maps API for a website and I can't seem to get multiple locations to populate like Google has it in their example.
Could anyone please let me know what I need to add to get 11 markers to show up that will give a description of what I want.
I can see that Google has multiple locations giving a quick description of what they are.
PS: I already have a key I just need to know how to include "X" number of markers with a description attached.
Attached is the link to googles example:
Google Maps API
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Place searches</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
var map;
var infowindow;
function initMap() {
var pyrmont = {lat: -33.867, lng: 151.195};
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: pyrmont,
radius: 500,
type: ['store']
}, callback);
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
</script>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>
</body>
</html>
You need to try this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {
lat: -25.363,
lng: 131.044
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
This is the code I have, based on the example at https://developers.google.com/maps/documentation/javascript/examples/event-simple , but instead of zooming in when clicked on a marker, I want to show a messagebox (alert()):
<!DOCTYPE html>
<html>
<head>
<title>Simple click event - modified</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatlng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatlng
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Click to show alert'
});
marker.addListener('click', alert('Hello World!'));
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap" async defer>
</script>
</body>
</html>
Of course, instead of YOUR_API_KEY , I filled in my own API key from Google Maps API v3.
Whenever I load this page, the alert shows as soon as the page is loaded, and clicking on the marker has no effect at all.
The problem is in the addlistener, the command for the messagebox has to be in between a function() { ... }:
marker.addListener( 'click', function() { alert('Hello World!'); } );
Will solve the problem!
I'm trying to toggle layers of an existing map created on maps.google.com with google V3 API.
To toggle (display / hide) the layer I'm using .setMap function with map/null as argument.
My problem is that I've not found a way to get the list of the existing layers. So I've hardcoded the values in mapLayerNames, but I would have prefer to get them from 'map' variable. Which API am I missing from the doc?
here comes my code: lid are the layer Ids I'm looking for in the url...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var mapLayerNames = [
"http://www.google.com/maps/d/u/1/kml?mid=z_wfVyI764I4.kPvsE6js2GAg&lid=z_wfVyI764I4.kIQKW-gOFhmU",
"http://www.google.com/maps/d/u/1/kml?mid=z_wfVyI764I4.kPvsE6js2GAg&lid=z_wfVyI764I4.k2u4vYNOkUIA",
"http://www.google.com/maps/d/u/1/kml?mid=z_wfVyI764I4.kPvsE6js2GAg&lid=z_wfVyI764I4.kcPBYmgvyhbI"
];
var map;
var ctaLayer = [];
function initialize() {
var paris = new google.maps.LatLng(43.5742118,1.4538968);
var mapOptions = {
zoom: 11,
center: paris
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (var i=0; i<mapLayerNames.length; i++) {
ctaLayer = new google.maps.KmlLayer({
url: mapLayerNames[i]
});
ctaLayer.setMap(map);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
In my app I want to store application-defined data on each latLng in a path.
I have got this to work using the code example below, but I would like to know whether this is an undocumented fluke that just 'happens' to work and could get broken in the future, or is it perfectly valid code that should always work?
In short, is 'getPath' guaranteed to return the same latLng objects that were passed in, or can it pass back new ones with the same lat and the same lng but anything else that google doesn't care about might not still be there?
Thanks for any assistance
Click on the line, and it should alert "one two three".
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52.0, -1.5),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var polyline = new google.maps.Polyline({
map: map,
strokeColor: "blue",
strokeThicknedss: 2
});
polyline.setPath([
getLatLng(51.9, -1.4, "one"),
getLatLng(52.0, -1.5, "two"),
getLatLng(52.0, -1.6, "three")
]);
google.maps.event.addListener(polyline, "click", function() {
var path = this.getPath().getArray();
var datas = [];
for(var i = 0; i < path.length; i++) {
var ll = path[i];
datas.push(ll.data);
}
alert(datas.join("\n"));
});
}
function getLatLng(lat, lng, data) {
var ll = new google.maps.LatLng(lat, lng);
ll.data = data;
return ll;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
Well according to the docs getPath() 'retrieves the first path'. And you've just set the path using setPath()... I'm not sure Google are going to mess with that data; your approach seems sound to me.
I found that the best way for storing polylines is to use Google's encoding function in the geometry library.
var polylineToStore = google.maps.geometry.encoding.encodePath(polyline.getPath());
This sets the polylineToStore variable to a string. When you want to reuse that encoded polyline you only need to decode it:
polyline.setPath(google.maps.geometry.encoding.decodePath(polylineToStore))
https://developers.google.com/maps/documentation/javascript/geometry#Encoding
So I'm working on a custom google maps tour type application and I'm wondering how to get media to popup when I click a link within a google maps marker. Ideally this is what I would like to happen:
1. User clicks on marker and the normal white box comes up like on real Google Maps.
2. Within that text box I would like to have a button that will launch media that I have stored on a SQL server somewhere. This media could be audio, pictures, or video.
The code I have so far is below. If anyone could let me know how to do this, or point me in the right direction that would be awesome!
Thanks
<!doctype html>
<html>
<head>
<title>HuskyWalk Application Demo</title>
<meta name="viewport" conmtent="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #mapcanvas {
margin: 0;
padding: 0;
height: 98%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var iteCoords = new google.maps.LatLng(41.806501, -72.252769);
//var mapCoords = new google.maps.LatLng(navigator.getCurrentPosition().coords.latitude, navigator.getCurrentPosition().coords.longitude);
//var mapCoords = new navigator.getCurrentPosition().coords;
function initialize() {
//var position = new navigator.geolocation.getCurrentLocation(showPosition);
var mapOptions = {
zoom: 18,
center: iteCoords,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
google.maps.event.addListenerOnce(map, "bounds_changed", watchStart);
var marker = createMarker(); //creates marker
}
function watchStart() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
alert("Geolocation is not supported by this browser.");
}
}
function createMarker() {
var marker = new google.maps.Marker({
position: iteCoords,
map: map,
title: 'ITEB',
});
google.maps.event.addListener(marker, "click", onMarker_clicked);
return marker;
}
function onMarker_clicked() {
alert(this.get('id'));
}
</script>
</head>
<body onload="initialize()">
<div id="mapcanvas"></div>
<div>
<p>Maps provided by Google Maps</p>
</div>
</body>
</html>
I know there is going to need to be some stuff in the onMarker_Clicked() method most likely, I'm just not sure what.
You'll want to use an InfoWindow and call its open() method from the click event handler.
See also the section in the google maps developer guide https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows