Как заставить карты моего местоположения отображаться в oop с помощью API Карт Google? - PullRequest
Новая
       5

Как заставить карты моего местоположения отображаться в oop с помощью API Карт Google?

0 голосов
/ 11 марта 2020

Я разработал все oop местоположений на карте, используя Углеродные поля для WordPress. Текст отображения местоположения и структуры карт возвращается из API Google, но карты не отображаются и в консоли разработчика отсутствуют ошибки. Я ударил стену. Чего мне не хватает?

Перед запуском l oop я включаю API 

<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY"></script>

Я строю местоположения l oop в файле php с

Я проверил, что все значения являются правильными при передаче в функцию в моих включенных скриптах. js file.

mapId извлекается из атрибута данных в элементе map. 

<div id="map1" class="map" data-map="{&quot;value&quot;:&quot;42.6022909,-87.8485679&quot;,&quot;lat&quot;:&quot;42.6022909&quot;,&quot;lng&quot;:&quot;-87.8485679&quot;,&quot;zoom&quot;:&quot;12&quot;,&quot;address&quot;:&quot;3203 Washington Road, Kenosha, WI&quot;,&quot;mapId&quot;:&quot;map1&quot;}">

Затем я проведу oop через элементы карты в jQuery и убедитесь, что элемент находится в DOM, прежде чем передавать идентификатор элемента в функцию initMap карт Google. 

jQuery(document).ready(function($) {
        jQuery('.map').each(function (index, Element) {
            let mapJsonData = jQuery(this).data("map");
            let mapId = this.id;
            let lng = mapJsonData.lng;
            let lat = mapJsonData.lat;
            let zoom = mapJsonData.zoom;
            console.log(mapJsonData);
            var thisMap = document.getElementById(mapId);
            console.log("mapId", mapId);
            if (thisMap) {
                initMap(mapId, lat, lng, zoom);
            }

        }); 

});

В функции initMap я снова использую document.getElementById (mapId), чтобы убедиться, что элемент находится в DOM. 

function initMap(mapId, lat, lng, zoom) {
    console.log("mapId initMap", mapId);
    var thisMap = document.getElementById(mapId);
    if (thisMap) {
        var map = new google.maps.Map(thisMap, myOptions);
        var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
        var myOptions = {
            zoom: parseFloat(zoom),
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: false,
            mapTypeControl: true,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
            }
        };

        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        })
    }
}

Я получаю код отображения Google, когда я просматриваю исходный код и вижу в консоли не было ошибок, и я убедился, что для определения высоты карты было включено CSS. 

.map {
    width: 100%;
    height: 328px;
}

Пример данных о местоположении, использованных для отображения карты 

value: "43.1002943,-87.9535443"
lat: "43.1002943"
lng: "-87.9535443"
zoom: "12"
address: "3237 W. Glendale Avenue"
mapId: "map2"
...