i'm tring to create an html file whith google API to display on google MAPS a KML File.
this is the HTML Code:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
//center: {lat: 41.919, lng: 12.493}
center: {lat: 41.876, lng: -87.624}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'file://///MYSERVER/test/LIME.kml',
//url:'http://googlemaps.github.io/kml-samples/kml/Placemark/placemark.kml',
map: map
});
}
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
> <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<div id="map"></div>
<script>
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDhqMRJ2JhGTThtp_eSvVuvP_ackvhmOEE&callback=initMap">
</script>
</body>
</html>
when i launch the html, the google maps start but my kml is not visualized.
Help!!
Thanks in advance Vincenzo
Your KML file must be accessible on the public Internet - that is, it must be accessible to any machine which is connected to the internet.Make sure your kml file is publicly accessible
Related
Google API map not displaying when I load my code in a google chrome browser. I created my authentication key with in a new project on the Google Cloud Platform.
I've tried generating a new authentication key on the Google Cloud platform by creating a new project, but that did not seemed to work.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#map{
height:100%;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="output">Complete JavaScript Course </div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?
key=<<my key>>"></script>
<script src="app.js">
window.onload = init;
var m = document.getElementById('map');
function init() {
navigator.geolocation.getCurrentPosition(placeMap);
}
function placeMap(data) {
var options = {
center: {
lat: data.coords.latitude
, lng: data.coords.longitude
}
, zoom: 5
}
var map = new google.maps.Map(m, options);
console.dir(data);
}
</script>
</body>
</html>
As I've already stated, the google map api will not display a map of my actual location.
You have two issues with the posted code.
Your map div doesn't have a size, you need to define the size of html and body so the #map 100% height has something to reference:
<style>
#map{
height:100%;
}
</style>
should be:
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
you have an unneeded src on your script tag:
<script src="app.js">
should be:
<script>
proof of concept fiddle
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 90%;
}
<div id="output">Complete JavaScript Course </div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script>
window.onload = init;
var m = document.getElementById('map');
function init() {
navigator.geolocation.getCurrentPosition(placeMap);
}
function placeMap(data) {
var options = {
center: {
lat: data.coords.latitude,
lng: data.coords.longitude
},
zoom: 5
}
var map = new google.maps.Map(m, options);
console.dir(data);
}
</script>
You need to access the API using the callback after google maps have already been loaded. This is done by passing in a parameter to google maps initialization by passing in callback as a query parameter. You also need to activate your api to have Javascript functionality
<!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%;
}
/* 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(position) {
map = new google.maps.Map(document.getElementById('map'), {
center: position,
zoom: 8
});
}
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
initMap({
lng: position.coords.longitude, lat: position.coords.latitude});
});
} else {
initMap({lat: -34.397, lng: 150.644});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCD9OuD6hAbRm5JNSEpkCTE6HzhaOp5uCc&callback=getLocation"
async defer></script>
</body>
</html>
copy paste from google instructions:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="capture"></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=AIzaSyC8kDz25qFYhy1UYiPyrzvcOpkiwZz9C4o&callback=initMap"
async defer></script>
</body>
</html>
and I'm still getting this error of google:
"Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details."
Why it's so complicated?
Here is my API Key
It's simple. You did not activate the API key. I do not recall exactly where in the process this happens or how but it is one of the steps when you created the key.
Google Maps API error: ApiNotActivatedMapError
And included in the console message is the link to your instructions on what to do: https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error`
I have set up the most basic google map view in an html page, following the guide here, but I cannot get the map to show. I know this must be very simple, I've tried a lot of fixes, but it doesn't seem to work with linked css and js.
Please note that it works when I use the code in one page, without linking, but doesn't when I use external CSS and JS.
Here's my html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" src="css/mapstyle.css">
</head>
<body>
<div id="map"></div>
<script src="js/map.js">
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUA3LnXH-B5z9GlGh_Gyrebh-xpQoYQMY&callback=initMap">
</script>
</body>
</html>
JS:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
CSS:
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
Here's fiddle: JSFiddle
You need to call initMap() function when loading page like (if using JQuery):
var map;
$(document).ready(function(){
initMap();
});
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
document.add
}
Fiddle
Add script of google map before your map.js. Because it need to load Google Map script in your js
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUA3LnXH-B5z9GlGh_Gyrebh-xpQoYQMY> </script>
<script src="js/map.js"></script>
<link rel="stylesheet" type="text/css" src="css/mapstyle.css">
</head>
<body>
<div id="map"></div>
</body>
</html>
With your fiddle I get an error in the javascript console: Uncaught TypeError: window.initMap is not a function. This is because the initMap function is wrapped in and local to the window.onload function, so it is not globally available as the callback routine for the API.
To fix it, set the "Frameworks & Extensions" in the fiddle to "No Library (pure JS)" and "No wrap - in <head>
Note that you have a typo in your posted code:
<link rel="stylesheet" type="text/css" src="css/mapstyle.css">
should be:
<link rel="stylesheet" type="text/css" href="css/mapstyle.css">
working fiddle
code snippet:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
I am using google maps javascript api V3 to create maps in our adobe flex based application. I am using flex iframes to communicate between flex and javascript api. I am having two issues.
I call a function in html file to create the map in div tag in html. Then map shows up but when I call another function to create the marker, I get stack overflow error. On analyzing this issue I found that somehow it is unable to get the reference of map which was created previous method. Is there a way to resolve this. Please find the code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Markers</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"
type="text/javascript"></script>
</head>
<body>
<div id="map-canvas" style="width: 650px; height: 250px;"></div>
<script type="text/javascript">
var map;
var DFWCenter = new google.maps.LatLng(32.9017,-97.0405770);
function showMap()
{
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 15,
center: DFWCenter,
mapTypeId: google.maps.MapTypeId.HYBRID
});
}
function createCustomMarker(station,lat1, lang1){
var marker= new google.maps.Marker({
position: new google.maps.LatLng(lat1,lang1),
map: map
});
marker.setMap(map);
}
</script>
</body>
</html>
#deejay: If you r not getting the reference of map, u can try this by taking it as a global variable, I tried this and was not able to produce your case as it was working simply fine, when I first call showMap() and then createCustomMarker().
Check fiddle.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Markers</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
var DFWCenter = new google.maps.LatLng(32.9017, -97.0405770);
function showMap() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 15,
center: DFWCenter,
mapTypeId: google.maps.MapTypeId.HYBRID
});
createCustomMarker(DFWCenter.A, DFWCenter.F);
}
function createCustomMarker(lat1, lang1) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat1, lang1),
map: map
});
marker.setMap(map);
}
</script>
</head>
<body onload="showMap()">
<div id="map-canvas" style="width: 650px; height: 250px;"></div>
</body>
</html>
I am working with Google Maps and I want to load the map in an external file, where I can use jQuery to set up the rest of the page.
I have made three changes to the Hello World example: I've included jQuery, I've initialised the map in an external file, and I've removed the onload event in the <body> tag. And I now have a blank screen where there used to be a map, and no console errors to give me a clue.
This is my HTML:
<!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 src="./js/jquery.js"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true">
<script src="./js/maps.js"></script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
This is maps.js in full:
$(document).ready(function () {
console.log('document ready');
function initializeMap() {
console.log('initialize');
var myOptions = {
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"),
myOptions);
}
initializeMap();
});
I don't see any of the console statements. I also don't see a map - just a blank screen.
I must be doing something stupid, but what is it?
You're missing an </script> after src="http://maps.googleapis.com/maps/api/js?sensor=true">