I have the following HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
#map {
height: 90%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 41.876, lng: -87.624}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'http://ec2-54-198-148-171.compute-1.amazonaws.com/webapp/public/kmlfiles/LargeCoordinates.kml',
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMtoh9P3UkoxbXndKu_HOP7KsVwTRvxGU&callback=initMap">
</script>
</body>
</html>
The KML present here - http://ec2-54-198-148-171.compute-1.amazonaws.com/webapp/public/kmlfiles/LargeCoordinates.kml is not shown on the map.
All my other KML files work ok, just not this one. I believe this is because there are many coordinates in the KML file.
Any help to fix it would be appreciated.
In your 5th placemark/polygon (the big one), the line with the geometry/coordinates seems to be truncated. First clue is that there appear to be missing tags at the end of the line. It ends with only the </MultiGeometry> tag, when it needs to end with: </coordinates></LinearRing></outerBoundaryIs></Polygon></MultiGeometry>.
Looking more closely at the last set of coordinates, they appear to be cut off, ending after the decimal point in the 2nd number: -96.697594,46.
So you'll need to at least add the appropriate tags to close out the line, and probably fix the last coordinate pair (or just remove it). That should give you a valid KML file which should load (so long as the geometry isn't too big for Maps). You'll also want to check the source data to see if additional coordinates are missing from that line, and if so, figure out how to get them back.
To help others with similar issues, do you know how that KML was generated? With what software? Maybe something that can only handle so many characters in the coordinate string?
Related
I was following the example of making a simple map using Google Apps Script and copy-pasted the example code into my own script editor, from docs & sheets. When trying to run it though, it gives an error;
Syntax error. (line 11, file "Code")
The program looks like this;
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<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%; /* This is line 11 */
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
</html>
So, what is the proper syntax?
Removing the
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
didn't affect it.
I tried including my own API key and leaving it as it is above, in case that changed anything, but it didn't.
Here is the link to the tutorial
I feel like I'm making my inexperience obvious by saying what changes I tried, but in case anyone suggests those changes, now they know I've tried it. I think it's bizarre that googles own examples don't work. I've had issues with another example, the one about placing markers on various addresses.
Since the latest release (on Tuesday) of the Google Maps API, every time I drag the little man onto a road and drop it, I get a script error (http://maps.googleapis.com/maps-api-v3/api/js/22/7/intl/en_gb/util.js). The Street View then displays fine - but there is no Address Control and therefore no way to exit from Street View!
A similar script error also happens when specifying v3.23 (the error is http://maps.googleapis.com/maps-api-v3/api/js/23/7/intl/en_gb/util.js instead)!
However, if I set the controlStyle to 'azteca' everything works fine. As this setting will be removed in August, I'm keen to start using the latest version as soon as possible.
Can anyone help?
Here's some code:-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map_canvas { height: 100%; }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MY_KEY&v=3.23"> </script>
<script type="text/javascript">
var map;
function Initialize() {
try{
//google.maps.controlStyle = 'azteca';
map = new google.maps.Map(document.getElementById("map_canvas"), { zoom: 13, center: new google.maps.LatLng(51.41347, -0.83518), mapTypeId: google.maps.MapTypeId.ROADMAP });
return "";
} catch (err) {
return err.message;
}
}
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
If you uncomment the commented line all works fine (but with the old controls).
John
I'm pleased to say that I am now able to answer my own question!
This may be of use to the other poster (Mac21 was it) who was also having this same issue.
The vb.net WebBrowser control is the problem!
In the latest Frozen Release of the Google Maps API, they have stopped supporting IE8 (which is understandable!). The WebBrowser control, by default, uses IE7 for its rendering.
Fortunately, there is a way to over-ride this behaviour by adding a value into a key in the registry. Once this value is in place, the Google Maps API works a treat!
I can't claim any credit for the actual solution as I found it here https://weblog.west-wind.com/posts/2011/May/21/Web-Browser-Control-Specifying-the-IE-Version - so thanks to Rick Strahl!
Enjoy!
John
I'm doing a google map with custom symbols on locations provided by the client. Pasted below is a simplified version. When I set the path to the marker graphic .png in my own hard drive, and view the map in my own browser, everything works fine: The custom markers appear in the correct locations.
However, when I set the path to the marker .png in Dropbox, the marker does not appear on the map- neither with nor without the "?dl=0" suffix that Dropbox adds to the filename. I've also tried keeping the graphic on my Google Drive and pulling it from there; That didn't work either.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>GoogleMapHawthorne It Works!</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 950px; height: 525px;"></div>
<script type="text/javascript">
// locationsSC = locations in Service, Community Asset layer
var locationsSC = [
['Fish Emergency Services', 45.512388, -122.651950],
['Southeast Community Bike Fix-it Station', 45.512360, -122.634061],
['Southeast Kitchen Share', 45.508305, -122.637014],
['Southeast Tool Library', 45.508312, -122.637690],
['Southeast Uplift Neighborhood Coalition', 45.513445, -122.627480]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(45.510000, -122.630930),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
// adding Service, Community Asset markers
var markerSC, sc;
for (sc = 0; sc < locationsSC.length; sc++) {
markerSC = new google.maps.Marker({
position: new google.maps.LatLng(locationsSC[sc][1], locationsSC[sc][2]),
map: map,
icon: {
url: 'https://www.dropbox.com/s/set461kj7rt1zv5/ServiceBrownCog.png',
scaledSize: new google.maps.Size(25, 25)
}
});
google.maps.event.addListener(markerSC, 'click', (function(markerSC, sc) {
return function() {
infowindow.setContent(locationsSC[sc][0]);
infowindow.open(map, markerSC);
}
})(markerSC, sc));
}
</script>
</body>
</html>
Is the problem in my code? Or is it Dropbox?
I'm just beginning to learn JavaAcript; Most of the code is snippets copied (by typing) from various tutorials.
I have no qualms about pasting the actual file path in the code here. That file location is going to be public anyway. If anyone can think of a good reason I shouldn't do this, feel free to say so- and why.
Above all, thanks in advance.
https://www.dropbox.com/s/set461kj7rt1zv5/ServiceBrownCog.png isn't a link to an image. It's a link to a web page that (among other things) shows you the image.
To get a link to the image itself, try https://www.dropbox.com/s/set461kj7rt1zv5/ServiceBrownCog.png?raw=1. For more details, see https://www.dropbox.com/help/201.
I have a fairly straightforward Google Maps implementation running well in Chrome on a Mac. Yet - I am not working on the mobile implementation as well as cross-browser fixes, and have discovered that the map itself is not properly displaying / functioning, let alone the markers and infowindows that should be showing up. The native zoom tool never displays and I can't click anywhere on the map or drag it.
I've been googling and googling but not turning much up. Any hints or help would be much appreciated (while realizing this is not specifically a code question - yet).
I discovered the prob on my own app, but tested using Google's 'hello world' for the maps API, and it's exactly the same issue:
<!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=AIzaSyDSh0tsHL1DQBwI0-xfuQkUezonGxlt39k&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
Your map doesn't have a completely defined size. You need to specify both the height and width, either as percent up to a parent element that has a size or specifically define the size of the div. If the size isn't defined it is zero.
I want to get a map (I only need a picture) that has the road network
but without labels (text on the map). I tried to get such a map from Google API and thought "element:geometry"
works.
But, for example, this link is still full of texts.
How can I obtain a road network map (static picture is ok) without text labels?
Any provider is ok, e.g. Google, Yahoo, Mapquest...
Use this style:
style=feature:all|element:labels|visibility:off
it will hide all labels for all features.
http://maps.google.com/maps/api/staticmap?sensor=false&size=512x512¢er=Brooklyn&zoom=12&style=feature:all|element:labels|visibility:off
I got a better solution:
Create a html file and insert the code below.
<!DOCTYPE html>
<html>
<head>
<title>Mapa GMR Norte</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 customMapType = new google.maps.StyledMapType([
{
elementType: 'labels',
stylers: [{visibility: 'off'}]
}
], {
name: 'Custom Style'
});
var customMapTypeId = 'custom_style';
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 41.4416459, lng: -8.2911885}, // Brooklyn.
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
}
});
map.mapTypes.set(customMapTypeId, customMapType);
map.setMapTypeId(customMapTypeId);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"
async defer></script>
</body>
</html>
Hope it helps! :)
The Google Maps Styled Map Wizard (link below) will allow you to remove labels (and also make tons of other customizations).
https://mapstyle.withgoogle.com/
This is the documentation on map styling for the JavaScript API. There's also a Styled Map Wizard that lets you play with the styles to get exactly what you want.
by "I only need a picture" I take it you don't need to access to API, Google Inc devs still didn't a chance to apply all the features from the old maps to the new design.
However you can still access it by going to https://maps.google.com/?output=classic
and you can go to settings and customise "tick labels off" and so forth...