Problema JS Google Maps - Mappa non caricata

[Axelloid]

Ciao ragazzi, scrivo qui perchè spero potrete aiutarmi
ho un semplice <div id="map"></div> che si collega a 2 file JS (premetto di non capire nulla di JS, ho preso un template per fare il tutto.
Se guardo il sito in locale mi fa tranquillamente vedere la mappa con tanto di punto rosso dove gli dico io, se invece lo carico online, mi da errore: "

Google Maps non è stata caricata correttamente. Per i dettagli tecnici, consulta la console JavaScript."

se apro la console mi dice "js?sensor=false:32 Google Maps API error: MissingKeyMapError"
Il problema c'è sia con browser Chrome, sia con Microsoft Edge.
vi allego il codice JS se potete darmi una mano, e il sito dove c'è il tutto http://www.alessiopopolo.info/contacts.html
Grazie
Alessio

(function($){
    $.fn.mapmarker = function(options){
        var opts = $.extend({}, $.fn.mapmarker.defaults, options);


        return this.each(function() {
            // Apply plugin functionality to each element
            var map_element = this;
            addMapMarker(map_element, opts.zoom, opts.center, opts.markers);
        });
    };


    // Set up default values
    var defaultMarkers = {
        "markers": []
    };


    $.fn.mapmarker.defaults = {
        zoom    : 8,
        center    : 'United States',
        markers    : defaultMarkers
    }


    // Main function code here (ref:google map api v3)
    function addMapMarker(map_element, zoom, center, markers){
        //console.log($.fn.mapmarker.defaults['center']);


        //Set center of the Map
        var myOptions = {
          zoom: zoom,
          zoomControl: true,
          panControl: false,
          scrollwheel: false,
          mapTypeControl: false,
          streetViewControl: false,
          styles: 
                [{"featureType":"landscape","stylers":[{"hue":"#FFBB00"},{"saturation":43.400000000000006},{"lightness":37.599999999999994},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#FFC200"},{"saturation":-61.8},{"lightness":45.599999999999994},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":51.19999999999999},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":52},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#0078FF"},{"saturation":-13.200000000000003},{"lightness":2.4000000000000057},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#00FF6A"},{"saturation":-1.0989010989011234},{"lightness":11.200000000000017},{"gamma":1}]}],
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(map_element, myOptions);
        var geocoder = new google.maps.Geocoder();
        var infowindow = null;
        var baloon_text = "";


        geocoder.geocode( { 'address': center}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                //In this case it creates a marker, but you can get the lat and lng from the location.LatLng
                map.setCenter(results[0].geometry.location);
            }
            else{
                console.log("Geocode was not successful for the following reason: " + status);
            }
        });


        //run the marker JSON loop here
        $.each(markers.markers, function(i, the_marker){
            latitude=the_marker.latitude;
            longitude=the_marker.longitude;
            icon=the_marker.icon;
            var baloon_text=the_marker.baloon_text;


            if(latitude!="" && longitude!=""){
                var marker = new google.maps.Marker({
                    map: map, 
                    position: new google.maps.LatLng(latitude,longitude),
                    animation: google.maps.Animation.DROP,
                    icon: icon
                });


                // Set up markers with info windows 
                google.maps.event.addListener(marker, 'click', function() {
                    // Close all open infowindows
                    if (infowindow) {
                        infowindow.close();
                    }


                    infowindow = new google.maps.InfoWindow({
                        content: baloon_text
                    });


                    infowindow.open(map,marker);
                });
            }
        });
    }


})(jQuery);

[Vindav]

https://developers.google.com/maps/d...error-messages

[ciro78]

Ciao Axelloid,
occhio al regolamento(titoli generici)

[Axelloid]

Ciao Axelloid,
occhio al regolamento(titoli generici)

Scusate, pensavo andasse bene. La pagina linkata comunque l'avevo vista anch'io, ma non ho idea di cosa correggere perché in locale lo script funziona senza problemi. Altri aiuti?