谷歌地图在HTML中。无法显示地图

时间:2016-12-17 17:17:17

标签: javascript html

我在显示Google地图时遇到问题。我在谷歌api经理(密钥等)做了所有。但是现在我的javascript / html代码存在问题:

这是控制台错误: - enter image description here

这是片段代码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"
});
})();

如何显示此地图?真的,谢谢你的任何答案: - *

2 个答案:

答案 0 :(得分: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 marker = new google.maps.Marker({
     position: myLatLng,
     map: map,
     title: 'Hello World!'
 });

}

答案 1 :(得分: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!'
});

}