Is there any way to create a "sidebar" from a KML file when using the Google Maps API?
I'm loading the markers on the map using something like this:
var myMarkerLayer = new google.maps.KmlLayer('http://example.com/WestCoast.kml');
This works great so far, but how can I grab that data and loop through the points?
I would like to avoid using a third party library, if possible- although jQuery is OK.
KML is just an XML document so you can just process it using jQuery to extract the data you need. You can store the coordinates and placenames in a local array and use this data for any purpose you want eg. you can use it to navigate to a point on the map when a person clicks on a place name on a sidebar.
Below is an example on how to process the KML file and implement the navigation based on the data in the file..One word of caution I would not do this with large KML files as it doubles the load time (browser has to load the file to process the features)...
<script type="text/javascript" src= "http://maps.google.com/maps/api/js?sensor=false">
</script>
<script src="../js/jquery-1.4.2.min.js">
</script>
<script>
var map;
var nav = [];
$(document).ready(function(){
//initialise a map
init();
$.get("kml.xml", function(data){
html = "";
//loop through placemarks tags
$(data).find("Placemark").each(function(index, value){
//get coordinates and place name
coords = $(this).find("coordinates").text();
place = $(this).find("name").text();
//store as JSON
c = coords.split(",")
nav.push({
"place": place,
"lat": c[0],
"lng": c[1]
})
//output as a navigation
html += "<li>" + place + "</li>";
})
//output as a navigation
$(".navigation").append(html);
//bind clicks on your navigation to scroll to a placemark
$(".navigation li").bind("click", function(){
panToPoint = new google.maps.LatLng(nav[$(this).index()].lng, nav[$(this).index()].lat)
map.panTo(panToPoint);
})
});
function init(){
var latlng = new google.maps.LatLng(-43.552965, 172.47315);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
})
</script>
<html>
<body>
<div id="map" style="width:600px;height: 600px;">
</div>
<ul class="navigation">
</ul>
</body>
</html>
This isn't possible. Check the docs:
http://code.google.com/apis/maps/documentation/javascript/overlays.html#KMLLayers
Under "KML Feature Data":
Because KML may include a large number of features, you may not access feature data from the KmlLayer object directly. Instead, as features are displayed, they are rendered to look like clickable Maps API overlays.
Related
I have to put a Map from Google (Google Maps or GoogleMyMaps) in a website. I need the map to show a lot of different places all over my country (about 200 places). I already have a GoogleMyMaps with all the places.
But I need the map to have a zoom limitation/restriction : I want people NOT TO KNOW exactly where the places are, which means the zoom must stop before it gets accurate enough.
I know you can control the zoom with GoogleMaps JS API with something like
var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);
But I dont know how to add places on a Google Maps (still I have them all on a GoogleMyMaps).
Thank you for your time
Thank you everyone for your help.
So most of the time, GoogleMyMaps uses .KML files (as import or export), and it is possible to upload the data from a .KML file into Google Maps.
Here is an example :
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 1, lng: 1}
});
var kmlLayer = new google.maps.KmlLayer({
url: 'THE_KML_FILE_URL',
suppressInfoWindows: true,
map: map
});
kmlLayer.addListener('click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap"
async defer></script>
But note that the KML file has to be online, it does not work on local (Google's API needs to have access to your file).
Then you can customize your Google Map using Google Map Javascript API (https://developers.google.com/maps/documentation/javascript/tutorial).
Thank you everyone for your time
I'm working on a site, and I'm looking to have 1 different Google Map on each page for a list of multiple pages. But I'm unsure as to how to go about this. I'm using a bit of code I found (Listed below.), on W3Schools, but the code they have is for one map on a single page, and multiple maps on a single page. I can't repeat the first function of Javascript even though I show it twice below, because it won't show up on other pages. There may be a way to rewrite it to get it to work, but I'm somewhat new to Javascript.
I've looked for this question, but couldn't come to find one relating to this, only how to create multiple maps per one html file.
I'm using this piece of Javascript on my main.js file rather than using the snippet on each separate page. This is a bit of code I found off of W3Schools. The only change I made was I copied and pasted the function and it's containing code twice -
function myMap() {
var mapCanvas = document.getElementById("map1");
var mapOptions = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom: 5
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
function myMap() {
var mapCanvas = document.getElementById("map2");
var mapOptions = {
center: new google.maps.LatLng(42.859822,-97.15901),
zoom: 5
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
And I'm using this piece of HTML on my first HTML page -
<div id="map1" style="width:100%;height:500px"></div>
And this one on my second -
<div id="map2" style="width:100%;height:500px"></div>
As found here on their website -http://www.w3schools.com/graphics/tryit.asp?filename=trymap_basic.
And as mentioned in the title I'm referencing the Google Maps Javascript API.
This is my structure to call the files I'm using, that I place on each HTML sheet.
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link href="https://fonts.googleapis.com/css?family=Cardo|Roboto:100,300,500" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"> </script>
You can only have one function with a given name in a scope. To load the map onto separate pages, if the <div> id is the same, you can use the same file with a single function in it:
main.js:
function myMap() {
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom: 5
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
include it in the <body> of your pages like this:
<div id="map"></div>
<script type="text/javascript" src="scripts/SO_20170108_main.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
proof of concept/live example
page1.html
page2.html
common javascript
I used the Google Maps API to render a static map with pins on it.
Image here.
Is there a way to make a popup for the pins like on the standard Google Maps (where you can normally scroll around)?
It's on a WordPress page: http://clairepyper.org/ The table to the left of the map shows modals on clicking a place name. I'm wondering if there is way to get the modals opening from clicking the markers instead/as well?
Thanks.
You use something like this:
<script type="text/javascript">
function init_map(){
var myOptions = {
zoom:14,
center:new google.maps.LatLng(40.26489,-74.533312),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(40.26489,-74.533312)});
infowindow = new google.maps.InfoWindow({content:"<b>Lawton's Service Company, LLC</b><br/>400 Mercer St<br /> Hightstown, NJ 08520" });
google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});
infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);
</script>
You can add an indefinite number of those markers with a LatLng entry, and it's own little box over it.
(Sorry for the lack of code formatting. My browser is not showing the cool code tools.)
First time trying to build a map using Google's map API and have hit a roadblock.
I'm trying to make a custom map that has:
Multiple location markers
Custom icons for the markers
A custom url link for each marker so that whenever someone clicks on the marker they go to the url link
The map is for a client that owns a few offices in Soho, London. I've been testing out various code in Google's playground + using w3 schools code tester. I've been finding examples of how to setup the various elements of my map which all work fine when doing it one by one.
However it seems if I wanted to combine all the features of the map that the code needs to be setup differently.
Here's what I have so far:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 300px;"></div>
<script type="text/javascript">
var locations = [
['56-58 Broadwick Street', 51.5053, -0.1481, 5],
['79 Wardour Street', 51.512370, -0.133300, 3],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(51.5132695,-0.1356768),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = new Array();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
AutoCenter();
</script>
</body>
The idea being that the var locations will be the various office locations that my client own. Each one of these office location markers will link to the relevant office page.
Sorry to have to ask you guys but can anyone lead me in the right direction? I thought I could piece all the code together but it seems like if I want to combine all 3 features the code is setup differently.
Thanks for your time.
For starters, rather than have your JS in the body of your document, move it into the head.
And add an event listener for when the window loads to call an initialize function which creates the map:
google.maps.event.addDomListener(window, 'load', initialize);
And move all the JS that's currently not in any function at all, into that initialize function.
I'm not sure the point of your AutoCenter function. If it's just to make the map expand to fit the bounds of your markers, put this into your initialize function too.
Also this may just be a sample of some data rather than what you're actually doing, but that trailing comma after the last item will cause this array to error in IE:
var locations = [
['56-58 Broadwick Street', 51.5053, -0.1481, 5],
['79 Wardour Street', 51.512370, -0.133300, 3],
];
I have a map on my website and I'd like to make some paths on it from kml files. I found geoxml3, and I have this code:
<script type="text/javascript" src="geoxml3.js"></script>
<script type="text/javascript">
var geoXml = null;
var map = null;
var myLatLng = null;
function initialize() {
var mapOptions = {
//stuff
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
geoXml = new geoXML3.parser({
map: map
});
geoXml.parse('paths/path1.kml');
};
</script>
It's from the documentation sample. Now I want to retrieve the path by accessing some property of geoXml, but my browser's debugger claims it's undefined, even though the markers that define the points of the polyline from the kml file show up on the map. How do do draw a path from a file, not necessarily using this method?
Here's the file:
http://pastebin.com/R1PsuumL
I want to create the path from the coords in Folder/Placemark/LineString/coordinates.
Here is your KML rendered with geoxml3.