javascript - html 格式的谷歌地图。无法显示 map

Question

我在显示谷歌地图时遇到问题。我在 google api 管理器( key 等)中完成了所有操作。但我的 javascript/html 代码现在有问题:

这是控制台错误:-

这是片段代码 html:-

    <div id="map" style="width:100%; height: 300px;"></div>

    <form id="mapForm" class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" id="form" placeholder="Gdzie jesteś?">
        </div>  
        <button type="submit" class="btn btn-primary">Pokaż trasę</button>
        <button id="findPosition" class="btn btn-info hidden" title="Wykryj moją lokalizację">
        <span class="glyphicon glyphicon-screenshot"></span>
        </button>
    </form>
<script async defer src="http://maps.google.com/maps/api/js?key=AIzaSyB0QcbklwQFRlSb4-Y3wFS2_QAVh0omNTY&language=pl&callback=init"></script>

下面是 JS 代码:-

(function(){

var map = {

    makeMap: function() {

        var loc = this.location.split(","),
            pos = new google.maps.LatLng(loc[0], loc[1]);

        var mapOptions = {
            zoom: 16,
            center:pos,
            mapTypeId: google.maps.mapTypeId.ROADMAP
        }

        this.mapObj = new google.maps.Map(document.querySelector("#map"), mapOptions);
    },

    init: function(options){

        if(!options.location) return;

        try { google.maps.event.addDomListener(window, "load", this.makeMap.bind(this)); } catch(e) { return; } );

        this.options = options;
        this.location = this.options.location;
    }
}
map.init({
    location: "52.6884592,28.7404605",
    mapMarker: "img/map_marker.png"
});
})();

如何显示此 map ？非常感谢您的回答:-*

Answer 1

使用此代码:

function initMap() {
var myLatLng = {
    lat: 52.6884592,
    lng: 28.7404605
};

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
});
var ico = 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png'
var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: ico,
    title: 'Hello World!'
});

}