All geek questions in one place

Google Maps API Map Not Displaying

I cannot make my map appear when I use the Google Maps API. I am trying to create an application and it will not work there, but it is also broken on this testing page that I did. Does anyone know what 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 am very confused!

+3
source share
3 answers

Give your map_canvasdiv 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 htmland body, as Google does in the APIs :

<style type="text/css"> 
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
+18
source

, CSS div, . css.. , : 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;
}
+2

it also seems to not display on my client site either. He worked up to two days ago. Maybe google updated js and something broke? Because on my side nothing has changed ...

-1
source

Source: https://habr.com/ru/post/1765411/

More articles:


All Articles