尝试将google map api添加到我的网站

Question

Can someone help me out and tell me why my map isn't appearing at all on the page even after I've added my API key? What Have I written wrong?

https://jsfiddle.net/hute2o63/3/

<h3>MY Demo Map</h3>
<div id="map-canvas"></div>

Answer 1

Below is what you are going to want to have to get your map working :)

Depending on what you're trying to achieve can vary in what you need to have on your page.

HTML:

<h3>MY Demo Map</h3>
<div id="canvas-map"></div>
<script>
  function initMap() {
    var uluru = {lat: 0, lng: 0};
    var map = new google.maps.Map(document.getElementById('canvas-map'), {
    zoom: 4,
    center: uluru
    });
  }
</script>

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap">
</script>

CSS:

#canvas-map {
    width: 100%;
    height: 400px;
    background-color: grey;
}

Here is the link on how to create your Map as well: https://developers.google.com/maps/documentation/javascript/adding-a-google-map

Good luck and Happy coding :)