Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Gogle Maps API

Posted by: Graniteman1 Sep 20 2021, 12:14 PM

Hi friends,

I cant find any reason to why the map shouldnt show and I have tried all solutions to similiar issues i could find online.
I am quite new to coding so I figured i would check with a more experienced crowd.

So basically nothing shows up in my browser when i run it.

The API is fresh and has been changed twice with same result.
I tried adding a "width" element to the style, nothing changed.

Here is a https://stackoverflow.com/questions/54548735/google-maps-not-showing-html/54548894
I tried everything there to no avail.

Thanks to anyone taking a look.

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=AIzaSyBnKZLeLQvXat0WSFLFwTLbXDKpY0H_BuA">
</script>

<script type="text/javascript">
    function initialize() {
    var myoptions = {
        center: new google.maps.LatLng(56.102156616656956, 12.869099262357109),
        zoom: 8,
        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 ="width:100%; height:100%"></div>
</body>

</html>