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>
Related
For the first time I'm trying to incorporate the Google Maps API into a website and it's not working at all. I can't tell if there's something wrong with the code and I'd like to rule that out before trying to create another API Key
I've moved the tag around and tried different styling approaches, but it just doesn't show anything.
<!DOCTYPE html>
<html>
<head>
<script>
function initMap() {
var location = { lat: -30.0327268, lng: -51.2095745 };
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: location
});
}
</script>
<script async defer
src="https://maps.googleapis/maps/api/js?key=AIzaSyBDXh6FfycwxdCaHUbrCWkswSarA77kowY&callback=initMap">
</script>
<title>
</title>
<style>
* {
margin: 0;
padding: 0;
}
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
The URL in the script that you are using is incorrect.
You are using: https://maps.googleapis/maps/api/js?key=AIzaSyBDXh6FfycwxdCaHUbrCWkswSarA77kowY&callback=initMap
The correct URL: https://maps.googleapis.com/maps/api/js?key=AIzaSyBDXh6FfycwxdCaHUbrCWkswSarA77kowY&callback=initMap
Hope this helps!
The below line was not added correctly,
It should be in this form
Below is the updated code in which map is working fine..
<!DOCTYPE html>
<html>
<head>
<script>
function initMap() {
var location = { lat: -30.0327268, lng: -51.2095745 };
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: location
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDXh6FfycwxdCaHUbrCWkswSarA77kowY&callback=initMap"
async defer></script>
<title>
</title>
<style>
* {
margin: 0;
padding: 0;
}
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
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
/* This is the javascript function that makes the map load */
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {
lat: 44.540,
lng: -78.546
},
zoom: 8
});
}
/* This is the basic css */
#map {
width: 500px;
height: 400px;
}
<!-- Javascript called into the html page -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js" async defer></script>
</body>
</html>
your function is not calling use $(document).ready(function()()) for call your function
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
$(document).ready(function() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 44.540, lng: -78.546},
zoom: 8
});
});
</script>
<style>
#map {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
you need to add a DOM listener that will execute the initMap() function on window load.
try this
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(44.540, -78.546),
zoom: 8
});
}
google.maps.event.addDomListener(window, 'load', initMap);
#map {
width: 500px;
height: 400px;
}
<script src="https://maps.googleapis.com/maps/api/js" ></script>
<div id="map"></div>
I'm trying to set up the google map api on my website so for part of a delivery service I'm offering. I copied the code directly from the sample on developers.google.com but for some reason my map wont load on my page!Ive gone through the code multiple times and cant get it to load...HELP!
<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 }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPiGhEEN1WjNHOtVoOMufbwsj_thBse2w&sensor=true">
</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>
The html:
<body onload="initialize()">
<div class="map-canvas" style= "height: 100%">
</div>
</body>
I get a javascript error: Uncaught TypeError: Cannot read property 'ROADMAP' of undefined
This:
mapTypeId: google.maps.mapTypeId.ROADMAP,
Should be:
mapTypeId: google.maps.MapTypeId.ROADMAP,
The major problem is: Uncaught TypeError: Cannot read property 'offsetWidth' of null because your page doesn't have a div with id="map-canvas":
<div class="map-canvas" style= "height: 100%">
Should be:
<div id="map-canvas" style= "height: 100%;">
You are also calling initialize twice, change:
<body onload="initialize()">
To:
<body>
Complete page (works locally):
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<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 }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?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" style= "height: 100%;">
</div>
</body>
</html>
I see three issues
you use getElementById, but you give your div a class of map-canvas
it's *M*apTypeId (capital M)
you need to give your map-canvas div a fixed height
Also, since you are using addDomListener, it's unnecessary to also have an onload event on the body tag too. I would just use addDomListener.
<!DOCTYPE html>
<head>
<title>Google Maps</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPiGhEEN1WjNHOtVoOMufbwsj_thBse2w&sensor=true">
</script>
<style>
#map-canvas{
height: 400px;
}
</style>
</head>
<body>
<div id="map-canvas">
</div>
</body>
<script>
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>
</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">