4

I can't get my map to appear when I'm using the Google Maps API. I am trying to build an application, and it won't work there, but it is also broken in this testing page I've made. Does anyone know what it is that I'm doing wrong?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
    console.log("Initializing...");
  var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
}
</script>
</head>

<body onload="initialize()">
<div id="map_canvas" style="height: 100%; width: 100%;"></div>
</body>
</html>

Thanks for any help. I'm very confused!

Daniel Vassallo
  • 337,827
  • 72
  • 505
  • 443
Tim Rogers
  • 41
  • 1
  • 1
  • 2
  • This is related, and perhaps answers the question http://stackoverflow.com/a/10210153/1330710 – rolfk Sep 17 '13 at 12:51

3 Answers3

19

Give your map_canvas div a fixed width and height, and your example will work fine:

<div id="map_canvas" style="width: 500px; height: 400px;"></div>

Otherwise, set the height to your html and body as Google does in the API tutorials:

<style type="text/css"> 
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
Daniel Vassallo
  • 337,827
  • 72
  • 505
  • 443
  • Hi Thanks, I Have same problem and use your solution, but now my entire page become google map...How fix that? – Mostafa Jan 03 '18 at 06:18
2

You might wanna make some custom CSS for that div that contains the map. i did the below coding in my css.. Hope it helps :D cheers !!

.map
{
/*    padding:5px;*/
    float:left;
    background-image:url('../images/mapContainer.png');
    width: 155px;
    height: 123px;
    background-repeat: no-repeat;
}
.mapImage
{
    padding-top: 4px;
    padding-left: 4px;
    width: 146px;
    height: 114px;
}
.mapAndInfoContainer
{
    float:left;
    width: 100%;
    height: 120px;
}
user1890884
  • 21
  • 2
-1

it seems like it is not showing up on my client's live site as well. It was working up until couple of days ago. Perhaps google updated js and something broken? Because nothing changed on my side...

fresh.
  • 1