javascript - 未捕获（承诺中）类型错误：无法读取 null 的属性“0”。如果超过 4 个标记，谷歌地图地理编码器

Question

我有一个错误：Uncaught (in promise) TypeError: Cannot read property '0' of null at map.js:211 at geocoder.js:5 at TS (geocoder.js:3) when I'll tr​​y too mark谷歌地图中超过 4 个标记。为什么 gmap 和地理编码器向我发送错误？知道我做错了什么吗？

我的谷歌地图代码：

JS 和 HTML：

function initGoogleMap() {
        //Google Map script
        var $googleMaps = $('#map, .page_map');
        if ( $googleMaps.length ) {
            $googleMaps.each(function() {
                var $map = $(this);

                var lat;
                var lng;
                var map;



                //dark style
                var styles = [
                    {
                        "featureType": "all",
                        "elementType": "labels.text.fill",
                        "stylers": [
                            {
                                "color": "#ffffff"
                            }
                        ]
                    },
                    {
                        "featureType": "all",
                        "elementType": "labels.text.stroke",
                        "stylers": [
                            {
                                "color": "#000000"
                            },
                            {
                                "lightness": 13
                            }
                        ]
                    },
                    {
                        "featureType": "all",
                        "elementType": "labels.icon",
                        "stylers": [
                            {
                                "visibility": "off"
                            }
                        ]
                    },
                    {
                        "featureType": "administrative",
                        "elementType": "geometry.fill",
                        "stylers": [
                            {
                                "color": "#000000"
                            }
                        ]
                    },
                    {
                        "featureType": "administrative",
                        "elementType": "geometry.stroke",
                        "stylers": [
                            {
                                "color": "#144b53"
                            },
                            {
                                "lightness": 14
                            },
                            {
                                "weight": 1.4
                            }
                        ]
                    },
                    {
                        "featureType": "landscape",
                        "elementType": "all",
                        "stylers": [
                            {
                                "color": "#08304b"
                            }
                        ]
                    },
                    {
                        "featureType": "poi",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "color": "#0c4152"
                            },
                            {
                                "lightness": 5
                            }
                        ]
                    },
                    {
                        "featureType": "road.highway",
                        "elementType": "geometry.fill",
                        "stylers": [
                            {
                                "color": "#000000"
                            }
                        ]
                    },
                    {
                        "featureType": "road.highway",
                        "elementType": "geometry.stroke",
                        "stylers": [
                            {
                                "color": "#0b434f"
                            },
                            {
                                "lightness": 25
                            }
                        ]
                    },
                    {
                        "featureType": "road.arterial",
                        "elementType": "geometry.fill",
                        "stylers": [
                            {
                                "color": "#000000"
                            }
                        ]
                    },
                    {
                        "featureType": "road.arterial",
                        "elementType": "geometry.stroke",
                        "stylers": [
                            {
                                "color": "#0b3d51"
                            },
                            {
                                "lightness": 16
                            }
                        ]
                    },
                    {
                        "featureType": "road.local",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "color": "#000000"
                            }
                        ]
                    },
                    {
                        "featureType": "transit",
                        "elementType": "all",
                        "stylers": [
                            {
                                "color": "#146474"
                            }
                        ]
                    },
                    {
                        "featureType": "water",
                        "elementType": "all",
                        "stylers": [
                            {
                                "color": "#021019"
                            }
                        ]
                    }
                ];

                //markers
                var $markers = $map.find('.marker');

                //map settings
                var address = $markers.first().find('.marker-address').text() ? $markers.first().find('.marker-address').text() : 'london, baker street, 221b';
                var geocoder = new google.maps.Geocoder();


                var draggable = $map.data('draggable') ? $map.data('draggable') : true;
                var scrollwheel = $map.data('scrollwheel') ? $map.data('scrollwheel') : false;

                geocoder.geocode({
                    address: address
                }, function(data){

                    lat = data[0].geometry.location.lat();
                    lng = data[0].geometry.location.lng();

                    var center = new google.maps.LatLng(lat, lng);
                    var settings = {
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        zoom: 6,
                        draggable: draggable,
                        scrollwheel: scrollwheel,
                        center: center,
                        styles: styles
                    };
                    map = new google.maps.Map($map[0], settings);

                    var infoWindows = [];

                    $($markers).each(function(index) {

                        var $marker = $(this);
                        var markerTitle = $marker.find('.marker-title').text();

                        //building info widnow HTML code
                        var markerDescription = '';
                        markerDescription += markerTitle ? '<h3 class="makret-title">' + markerTitle + '</h3>' : '';
                        markerDescription += $marker.find('.marker-description').html() ? '<div class="marker-description">' + $marker.find('.marker-description').html() + '</div>' : '';
                        if(markerDescription) {
                            markerDescription = '<div class="map_marker_description">' + markerDescription + '</div>';
                        }

                        geocoder.geocode({
                            address: $marker.find('.marker-address').text()
                        }, function(data){
                            var iconSrc = $marker.find('.marker-icon').attr('src');

                            var lat = data[0].geometry.location.lat();
                            var lng = data[0].geometry.location.lng();

                            var center = new google.maps.LatLng(lat, lng);

                            var marker = new google.maps.Marker({
                                position: center,
                                title: markerTitle,
                                map: map,
                                icon: iconSrc
                            });

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

                            infoWindows.push(infowindow);

                            google.maps.event.addListener(marker, 'click', function() {
                                for (var i=0;i<infoWindows.length;i++) {
                                    infoWindows[i].close();
                                }
                                infowindow.open(map,marker);
                            });
                        });
                    });
                });
            }); //each Google map
        }//google map length
    }
    window.initGoogleMap=initGoogleMap;

<section class="page_map">
            <div class="marker">
                    <div class="marker-address">Krasnodar, krasnaya 1</div>
                    <div class="marker-title">Title</div>
                    <div class="marker-description">
                        <p><strong>Krasnodar, krasnaya 1</strong></p>
                    </div>
                    <img class="marker-icon" src="images/map_marker_icon.png" alt="">
                </div>
                
                <div class="marker">
                    <div class="marker-address">Novorossiysk, krasnaya 1</div>
                    <div class="marker-title">Title</div>
                    <div class="marker-description">
                        <p><strong>Novorossiysk, krasnaya 1</strong></p>
                    </div>
                    <img class="marker-icon" src="images/map_marker_icon.png" alt="">
                </div>
                
                <div class="marker">
                    <div class="marker-address">Volgograd, krasnaya 1</div>
                    <div class="marker-title">Title</div>
                    <div class="marker-description">
                        <p><strong>Volgograd, krasnaya 1</strong></p>
                    </div>
                    <img class="marker-icon" src="images/map_marker_icon.png" alt="">
                </div>
                
                <div class="marker">
                    <div class="marker-address">Anapa, krasnaya 1</div>
                    <div class="marker-title">Title</div>
                    <div class="marker-description">
                        <p><strong>Anapa, krasnaya 1</strong></p>
                    </div>
                    <img class="marker-icon" src="images/map_marker_icon.png" alt="">
                </div>
                
                <div class="marker">
                    <div class="marker-address">Moscow, Lenina 1</div>
                    <div class="marker-title">Title</div>
                    <div class="marker-description">
                        <p><strong>Moscow, Lenina 1</strong></p>
                    </div>
                    <img class="marker-icon" src="images/map_marker_icon.png" alt="">
                </div>
</section>

感谢您的帮助！

标签： javascripthtmlgoogle-maps

Answer 1

谢谢大家！我正在制作新的 gmap 脚本，一切正常。例子：

var map;
                var InforObj = [];
                var centerCords = {
                    lat: 46.993908,
                    lng: 41.313053
                };
                var mapPointers = 'http://www.teknic.co.in/images/map-icon.png'; //
                
                var mapStyle =  [{"elementType":"geometry","stylers":[{"hue":"#ff4400"},{"saturation":-68},{"lightness":-4},{"gamma":0.72}]},{"featureType":"road","elementType":"labels.icon"},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"hue":"#0077ff"},{"gamma":3.1}]},{"featureType":"water","stylers":[{"hue":"#00ccff"},{"gamma":0.44},{"saturation":-33}]},{"featureType":"poi.park","stylers":[{"hue":"#44ff00"},{"saturation":-23}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"hue":"#007fff"},{"gamma":0.77},{"saturation":65},{"lightness":99}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"gamma":0.11},{"weight":5.6},{"saturation":99},{"hue":"#0091ff"},{"lightness":-86}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"lightness":-48},{"hue":"#ff5e00"},{"gamma":1.2},{"saturation":-23}]},{"featureType":"transit","elementType":"labels.text.stroke","stylers":[{"saturation":-64},{"hue":"#ff9100"},{"lightness":16},{"gamma":0.47},{"weight":2.7}]}];

                var markersOnMap=[{placeName:"\tул. Дружбы Народов, 5, Славянск-на-Кубани, Краснодарский край, Россия, 353562\t",LatLng:[{lng:38.1394794,lat:45.2358332}]},{placeName:"\tНижнебаканская, Краснодарский край, Россия, 353365\t",LatLng:[{lng:37.8649618,lat:44.8649744}]},{placeName:"\tТорговая ул., 6, г. Крымск, Краснодарский край, Россия, 353332\t",LatLng:[{lng:38.0279095,lat:44.9087682}]},{placeName:"\tул. Маршала Жукова, 9, г. Крымск, Краснодарский край, Россия, 353389\t",LatLng:[{lng:38.0054887,lat:44.9179805}]},{placeName:"\tул. Дружбы Народов, 65, Славянск-на-Кубани, Краснодарский край, Россия, 353562\t",LatLng:[{lng:38.1187295,lat:45.2273617}]},{placeName:"\tКоммунистическая ул., 172, г. Крымск, Краснодарский край, Россия, 353380\t",LatLng:[{lng:37.9636163,lat:44.9368218}]},{placeName:"\tВеликовечное, Краснодарский край, Россия\t",LatLng:[{lng:39.7571015,lat:44.9293507}]},{placeName:"\tСтроительная ул., 34, Славянск-на-Кубани, Краснодарский край, Россия, 353565\t",LatLng:[{lng:38.1051728,lat:45.284883}]},{placeName:"\tВоскресенский, Краснодарский край, Россия\t",LatLng:[{lng:37.3254308,lat:44.9666185}]},{placeName:"\tВодный, Краснодарский край, Россия, 353820\t",LatLng:[{lng:38.359437,lat:45.2836529}]},{placeName:"\tулица Гаражная & Кра́сная у́лица, Светлый Путь, Краснодарский край, Россия, 353527\t",LatLng:[{lng:37.6503348,lat:45.2021466}]},{placeName:"\tТимашевск, Краснодарский край, Россия\t",LatLng:[{lng:38.9547015,lat:45.6093387}]},{placeName:"\tВерхневеденеевский, Краснодарский край, Россия, 352617\t",LatLng:[{lng:39.776667,lat:44.831389}]},{placeName:"\tПарковая ул., 62а, Анапа, Краснодарский край, Россия, 353451\t",LatLng:[{lng:37.3388889,lat:44.8916561}]},{placeName:"\tТимашевская ул., 2Б, Кореновск, Краснодарский край, Россия, 353181\t",LatLng:[{lng:39.4604845,lat:45.4486883}]},{placeName:"\tСоветская ул., Ахтырский, Краснодарский край, Россия\t",LatLng:[{lng:38.2914767,lat:44.8386157}]},{placeName:"\tНовоалексеевское, Краснодарский край, Россия, 352622\t",LatLng:[{lng:39.8649234,lat:44.950531}]},{placeName:"\tКазаче-Малеваный, Краснодарский край, Россия, 353153\t",LatLng:[{lng:39.5484006,lat:45.5308193}]},{placeName:"\tул. Золотая Рыбка, 2, Цемдолина, Краснодарский край, Россия, 353991\t",LatLng:[{lng:37.6997421,lat:44.7686829}]},{placeName:"\tСимферопольское ш., 3, Анапа, Краснодарский край, Россия, 353445\t",LatLng:[{lng:37.3326757,lat:44.906601}]},{placeName:"\tПромышленная ул., 44, Павловская, Краснодарский край, Россия, 352040\t",LatLng:[{lng:39.7782244,lat:46.1283363}]},{placeName:"\tКраснодарская ул., Павловская, Краснодарский край, Россия, 352040\t",LatLng:[{lng:39.742936,lat:46.1410759}]},{placeName:"\tул. Свердликова, 1, Каневская, Краснодарский край, Россия, 353730\t",LatLng:[{lng:38.970512,lat:46.094396}]},{placeName:"\tул. Бабушкина, 25, Краснодар, Краснодарский край, Россия, 350047\t",LatLng:[{lng:38.9360968,lat:45.053092}]},{placeName:"\tул. Дальняя, 4 корпус 1, Краснодар, Краснодарский край, Россия, 350051\t",LatLng:[{lng:38.9666902,lat:45.0621422}]},{placeName:"\tШоссейная ул., 28, Армавир, Краснодарский край, Россия, 352942\t",LatLng:[{lng:41.1338991,lat:44.92318}]},{placeName:"\tПервомайская ул., 560, Белая Глина, Краснодарский край, Россия, 353040\t",LatLng:[{lng:40.9095535,lat:46.0762493}]},{placeName:"\tЕ́йское, Краснодарский край, Россия\t",LatLng:[{lng:38.2702941,lat:46.6825784}]},{placeName:"\tКазанская, Краснодарский край, Россия\t",LatLng:[{lng:40.4267114,lat:45.411074}]},{placeName:"\tПервомайская ул., 61, Старонижестеблиевская, Краснодарский край, Россия, 353840\t",LatLng:[{lng:38.4299066,lat:45.3818087}]},{placeName:"\tул. Шоссейная, 2, Кропоткин, Краснодарский край, Россия, 352394\t",LatLng:[{lng:40.5335622,lat:45.4381898}]},{placeName:"\tСтаромышастовская, Краснодарский край, Россия\t",LatLng:[{lng:39.0743226,lat:45.3394939}]},{placeName:"\tул. Ростовское ш., 52, Краснодар, Краснодарский край, Россия, 350087\t",LatLng:[{lng:39.0109181,lat:45.1267007}]},{placeName:"\tул. Армавирское ш., 49, Краснодарский край, Россия, 352502\t",LatLng:[{lng:40.7465962,lat:44.6556311}]},{placeName:"\tул. Армавирская, 155, Красная Поляна, Краснодарский край, Россия, 352947\t",LatLng:[{lng:41.1030577,lat:45.0467419}]},{placeName:"\tНовопокровская, Новопокровское с/п, Краснодарский край, Россия\t",LatLng:[{lng:40.6935587,lat:45.9604987}]},{placeName:"\tул. Гибридная, 7, Тимашевск, Краснодарский край, Россия, 352702\t",LatLng:[{lng:38.9413729,lat:45.6337028}]},{placeName:"\tТроллейбусная ул., 14/2, Ростов-на-Дону, Ростовская обл., Россия, 344065\t",LatLng:[{lng:39.76782,lat:47.266334}]},{placeName:"\tул. 2-я Луговая, 2, Ростов-на-Дону, Ростовская, Россия, 344002\t",LatLng:[{lng:39.7060757,lat:47.1998152}]},{placeName:"\tМ-4, Россия\t",LatLng:[{lng:39.9744693,lat:47.4397203}]},{placeName:"\tпер. Шоссейный, 4, Каменоломни, Ростовская обл., Россия, 346483\t",LatLng:[{lng:40.2050544,lat:47.6804948}]},{placeName:"\tул. Нансена, 134Б, Ростов-на-Дону, Ростовская обл., Россия, 344038\t",LatLng:[{lng:39.7191153,lat:47.2438537}]},{placeName:"\tул. Добровольского, 7А, Ростов-на-Дону, Ростовская обл., Россия, 344092\t",LatLng:[{lng:39.7036159,lat:47.287684}]},{placeName:"\tпр. Королева, 19 корпус 1, Ростов-на-Дону, Ростовская обл., Россия, 344113\t",LatLng:[{lng:39.712294,lat:47.295716}]},{placeName:"\tул. Ларина, 45а/1в, Ростов-на-Дону, Ростовская обл., Россия, 344068\t",LatLng:[{lng:39.7150481,lat:47.2576899}]},{placeName:"\tпр. Стачки, 181, Ростов-на-Дону, Ростовская обл., Россия, 344058\t",LatLng:[{lng:39.6470429,lat:47.211552}]},{placeName:"\tул. Доватора, 150А, Ростов-на-Дону, Ростовская обл., Россия, 344049\t",LatLng:[{lng:39.6008529,lat:47.236855}]},{placeName:"\tул. Ерёменко, 44А, Ростов-на-Дону, Ростовская обл., Россия, 344015\t",LatLng:[{lng:39.629481,lat:47.232186}]},{placeName:"\tЛесопарковая ул., 90Б, Ростов-на-Дону, Ростовская обл., Россия, 344041\t",LatLng:[{lng:39.646787,lat:47.228011}]},{placeName:"\tул. Доватора, 75, Ростов-на-Дону, Ростовская обл., Россия, 344041\t",LatLng:[{lng:39.640384,lat:47.24083}]},{placeName:"\tул. Нансена, 101, Ростов-на-Дону, Ростовская обл., Россия, 344038\t",LatLng:[{lng:39.6990399,lat:47.24546}]},{placeName:"\tул. Вавилова, 61/1, Ростов-на-Дону, Ростовская обл., Россия, 344064\t",LatLng:[{lng:39.683674,lat:47.272205}]},{placeName:"\tул. Таганрогская, 130/3, Ростов-на-Дону, Ростовская обл., Россия, 344016\t",LatLng:[{lng:39.64061,lat:47.256507}]},{placeName:"\tул. Вятская, 118А, Ростов-на-Дону, Ростовская обл., Россия, 344065\t",LatLng:[{lng:39.769402,lat:47.279458}]},{placeName:"\tМясниковский р-н, Ростовская обл., Россия\t",LatLng:[{lng:39.4818222,lat:47.4188686}]},{placeName:"\tШахты, Ростовская обл., Россия\t",LatLng:[{lng:40.2355138,lat:47.7236224}]},{placeName:"\tул. Шоссейная, 20, Кропоткин, Краснодарский край, Россия, 352394\t",LatLng:[{lng:40.5339891,lat:45.4373936}]},{placeName:"\tДжигинка, Краснодарский край, Россия, 353424\t",LatLng:[{lng:37.3425322,lat:45.1329273}]},{placeName:"\tул. Таманская, 84, Виноградный, Краснодарский край, Россия, 353422\t",LatLng:[{lng:37.3283777,lat:45.0520969}]},{placeName:"\tСеверский р-н, Краснодарский край, Россия\t",LatLng:[{lng:38.6823614,lat:44.8586124}]},{placeName:"\tпер. Иванова, 14, Шахты, Ростовская, Россия, 346519\t",LatLng:[{lng:40.1968877,lat:47.7296358}]},{placeName:"\tул. Халтурина & ул. Розы Люксембург, Армавир, Краснодарский край, Россия, 352900\t",LatLng:[{lng:41.1369062,lat:44.9991973}]},{placeName:"\tул. Мира, 50а, Армавир, Краснодарский край, Россия, 352919\t",LatLng:[{lng:41.139392,lat:44.98948}]},{placeName:"\tАрмавир, Краснодарский край, Россия\t",LatLng:[{lng:41.1111326,lat:44.9873603}]},{placeName:"\tул. Степная, 2, Пластуновская, Краснодарский край, Россия, 353206\t",LatLng:[{lng:39.252323,lat:45.3053089}]},{placeName:"\tРостов - Таганрог, Пятихатки, Ростовская обл., Россия\t",LatLng:[{lng:39.211705,lat:47.3003109}]},{placeName:"\tПоляковское ш., 22Б, Таганрог, Ростовская, Россия, 347939\t",LatLng:[{lng:38.8585024,lat:47.2075935}]},{placeName:"\tЦентральная ул., 21, Красногорняцкий, Ростовская обл., Россия, 346474\t",LatLng:[{lng:40.198446,lat:47.6498001}]},{placeName:"\tКурчанская, Краснодарский край, Россия, 353525\t",LatLng:[{lng:37.5715291,lat:45.2241466}]},{placeName:"\tПобеда Революции пр-т., 119а, Шахты, Ростовская обл., Россия, 346524\t",LatLng:[{lng:40.2059913,lat:47.6939508}]},{placeName:"\tДачная ул., 272г, Шахты, Ростовская обл., Россия, 346518\t",LatLng:[{lng:40.1487246,lat:47.7105009}]},{placeName:"\tКагальницкое ш., 30а, Азов, Ростовская обл., Россия, 346780\t",LatLng:[{lng:39.3853392,lat:47.0883387}]},{placeName:"\tул. Красноарме́йская, 296, Егорлыкская, Ростовская, Россия, 347660\t",LatLng:[{lng:40.6304265,lat:46.5612789}]},{placeName:"\tТрактовая ул., 79, Сальск, Ростовская обл., Россия, 347640\t",LatLng:[{lng:41.490119,lat:46.4709169}]},{placeName:"\tПластунская ул., 38, Ленина, Краснодарский край, Россия, 350037\t",LatLng:[{lng:39.198144,lat:45.0193076}]},{placeName:"\tВолгоград, Волгоградская обл., Россия\t",LatLng:[{lng:44.5133035,lat:48.708048}]},{placeName:"\tВолгоград, Волгоградская обл., Россия\t",LatLng:[{lng:44.5133035,lat:48.708048}]},{placeName:"\tАнгарская ул., 8А, Волгоград, Волгоградская обл., Россия, 403003\t",LatLng:[{lng:44.4940871,lat:48.7149997}]},{placeName:"\tул. им. Землячки, 12, Волгоград, Волгоградская обл., Россия, 400048\t",LatLng:[{lng:44.468828,lat:48.7484054}]},{placeName:"\tул. им. Землячки, 29Б, Волгоград, Волгоградская, Россия, 400117\t",LatLng:[{lng:44.4999609,lat:48.7601079}]},{placeName:"\tул. Краснополянская, 51, Волгоград, Волгоградская обл., Россия, 400075\t",LatLng:[{lng:44.4919292,lat:48.7844668}]},{placeName:"\tул. Ростовское ш., 3, Краснодар, Краснодарский край, Россия, 350010\t",LatLng:[{lng:38.9853722,lat:45.0647898}]},{placeName:"\tул. Дзержинского, 227, Краснодар, Краснодарский край, Россия, 350005\t",LatLng:[{lng:38.981472,lat:45.1023064}]},{placeName:"\tул. Западная, 3ж, Аксай, Ростовская обл., Россия, 346720\t",LatLng:[{lng:39.8482959,lat:47.256145}]},{placeName:"\tул. Николая Отрады, 15, Волгоград, Волгоградская обл., Россия, 400125\t",LatLng:[{lng:44.63699,lat:48.822166}]},{placeName:"\tпросп. Университетский, 98, Волгоград, Волгоградская обл., Россия, 400062\t",LatLng:[{lng:44.4315029,lat:48.6432171}]},{placeName:"\tМариупольское ш., 71Б, Таганрог, Ростовская, Россия, 347939\t",LatLng:[{lng:38.8245751,lat:47.2203368}]}];

                window.onload = function () {
                    initMap();
                };

                function addMarker() {
                    for (var i = 0; i < markersOnMap.length; i++) {
                        var contentString = '<div id="content"><h6>' + markersOnMap[i].placeName +
                            '</h6></div>';

                        const marker = new google.maps.Marker({
                            position: markersOnMap[i].LatLng[0],
                            map: map,
                            icon: mapPointers,
                        });

                        const infowindow = new google.maps.InfoWindow({
                            content: contentString,
                            maxWidth: 400
                        });

                        marker.addListener('click', function () {
                            closeOtherInfo();
                            infowindow.open(marker.get('map'), marker);
                            InforObj[0] = infowindow;
                        });
                    }
                }

                function closeOtherInfo() {
                    if (InforObj.length > 0) {
                        /* detach the info-window from the marker ... undocumented in the API docs */
                        InforObj[0].set("marker", null);
                        /* and close it */
                        InforObj[0].close();
                        /* blank the array */
                        InforObj.length = 0;
                    }
                }

                function initMap() {
                    map = new google.maps.Map(document.getElementById('map'), {
                        zoom: 7,
                        center: centerCords,
                        styles: mapStyle
                    });
                    addMarker();
                }

#map {
  width: 100%;
  height: 600px;
}

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=&amp;callback=initGoogleMap"></script>