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>
Related
I am trying to generate map onclick on same division and same variable "map" using following script, it's not functioning, I don't know how to destroy old map and recreate please someone help me.. this is what I have tried so far..
Here is link to fiddle
JS
function map(lat,lon){
jQuery(document).ready(function () {
var centerPosition = new google.maps.LatLng(lat, lon);
var options = {
zoom: 16,
center: centerPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
});
}
var lat =22, lon = 75;
map(lat,lon);
HTML
<div id="map"></div>
<button onclick="map(15,90)" >15 90</button>
<button onclick="map(22,80)" >22 80</button>
CSS
#map {
height: 300px;
width: 500px;
}
button{ width:70px;height:40px;}
function map(lat,lon){
// jQuery(document).ready(function () {
var centerPosition = new google.maps.LatLng(lat, lon);
var options = {
zoom: 16,
center: centerPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
//});
}
i didn't make test for it, just look through to check the syntax
i test it, your fiddle's issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>- jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js"></script>
<style type='text/css'>
#map { height: 300px; width: 500px; }
button { width: 70px; height: 40px;}
</style>
<script type='text/javascript'>
function map(lat, lon) {
var centerPosition = new google.maps.LatLng(lat, lon);
var options = {
zoom: 16,
center: centerPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
}
</script>
</head>
<body>
<div id="map"></div>
<button onclick="map(15,90)">15 90</button>
<button onclick="map(22,80)">22 80</button>
</body>
</html>
I'm trying to customize google map but I have a small problem.
Here is the css code:
#map-canvas {
width: 100%;
height: 500px;
}
and the js code:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
And this is how I initialize the map in html. This example actually works.
<div id="map-canvas"></div>
But when I trying to put my map into some div e.g:
<div>
<div id="map-canvas"></div>
</div>
It doesn't work. How to fix that ?
/// EDIT
Please put this into example.html and try to run. Nothing happens for me.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div>
<div id="map-canvas"></div>
</div>
</body>
</html>
Your parent div should have height and width defined.
<body>
<div style="height:100%; width:100%;">
<div id="map-canvas"></div>
</div>
</body>
Try This.
For more detail:
Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag
Nothing seems wrong in your code ,it works fine just seprated css.I have checked and tested.
DEMO
This question already has answers here:
Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag
(8 answers)
Closed 9 years ago.
I can't get my Google map to appear in any browser. I even tried copying mostly the sample code below from Google's example and build off of that, but I can't even get that to appear. Any ideas what could be wrong below? NOTE: I actually DO put my API key where I have "I PUT MY KEY IN HERE". :)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=I PUT MY KEY IN HERE&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(
document.getElementById('map-canvas'), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(37.4419, -122.1419),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map-canvas { height: 100%}
</style>
</head>
<body>
<div id="bb_map">
<p>Visit a Diner Near You</p>
<div id="map-canvas"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(
document.getElementById('map-canvas'), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(37.4419, -122.1419),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map-canvas { width : 100%;
height : 300px;
border: solid thin #333;
margin-top: 20px;}
</style>
</head>
<body>
<div id="bb_map">
<p>Visit a Diner Near You</p>
<div id="map-canvas"></div>
</div>
</div>
</body>
</html>
You dont need a key in V3 of this API :)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title></title>
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 500px;
width: 500px;
}
</style>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'My Place!'
});
}
</script>
</head>
<body onload="initialize();">
<div id="map-canvas"></div>
</body>
</html>
Your map doesn't have a size so you can't see it
<div id="map-canvas" style="height:500px; width:600px"></div>
You also are not including the API script (I get an error "google is not defined" in the javascript console), this works for me locally:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(
document.getElementById('map-canvas'), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(37.4419, -122.1419),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style type="text/css">
html,body,#bb_map { height: 100%; width:100%;}
#map-canvas { height: 100%; width:100%;}
</style>
</head>
<body>
<div id="bb_map">
<p>Visit a Diner Near You</p>
<div id="map-canvas"></div>
</div>
</div>
</body>
</html>
working example
I am using the sample code from google as below. When I try to zoom out to minimum, there appear about 8 maps. WHat is wrong with it? As my understanding, there should only one world map when zoom out to minimum? Is there any parameter I can set?
Here is the code:
<!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=AIzaSyAoQaaN9DLOjrVigdieAL_a1ZkFapkZ8_Y&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
map.setZoom(3);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></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">