Google Map API v3 is not appearing

Question

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>

geocodezip · Answer 1 · 2013-06-04T19:27:23.220

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 knew it probably had something to do with my API key. That was it. Thanks. — user2441895, Jun 04 '13 at 18:36
While you don't _need_ a key for the v3 API, you can use one, and need one if you want to track usage with the API console. So if your key is valid, that wouldn't be the problem. — geocodezip, Jun 04 '13 at 18:43

score 0 · Answer 2 · answered Jun 04 '13 at 18:12

<!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>

I get an empty rectangle that spans across the entire page. No map though. — user2441895, Jun 04 '13 at 18:15
the above html is working and it is showing a marker near palo alto. — vasanth, Jun 04 '13 at 18:19
I knew it probably had something to do with my API key. That was it. Thanks. — user2441895, Jun 04 '13 at 18:28

score 0 · Answer 3 · answered Jun 04 '13 at 18:21

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>

I knew it probably had something to do with my API key. That was it. Thanks. — user2441895, Jun 04 '13 at 18:27

Google Map API v3 is not appearing

3 Answers3