Google Maps is not displaying on an HTML page

Question

I'm using GMaps to display a map on an html page but it gives this error on page

Oops! Something went wrong.

This page didn't load Google Maps correctly. See the JavaScript console for technical details.

And these errors in the console

EDIT: I've generated the API Key and added it to the URL and now I'm only getting this error

Uncaught TypeError: Cannot read property 'prototype' of undefined

I have also checked this thread: Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null

And tried the snippets posted there instead of my own, but I got the same errors.

This is my code

HTML

<div id="map_canvas" class="height-400 grayscale"></div>

JS and Includes

<script type="text/javascript" src="//maps.google.com/maps/api/js?key=AIzaSyDPN1LpoBuDzlvGox2qcREeDCnKu-hsGs4"></script>
<script type="text/javascript" src="assets/plugins/gmaps.js"></script>
<script type="text/javascript">

jQuery(document).ready(function(){

    /**
     @BASIC GOOGLE MAP
     **/
    var map2 = new GMaps({
        div: "#map_canvas",
        lat: -12.043333,
        lng: -77.028333,
        scrollwheel: false
    });

    var marker = map2.addMarker({
        lat: -12.043333,
        lng: -77.028333,
        title: "Company, Inc."
    });

});

</script>

Answer 1

Try here to get an API key (Google account needed):

https://console.developers.google.com/apis/api/maps_backend/

For more information:

https://developers.google.com/maps/documentation/javascript/get-api-key