Маркеры не отображаются на карте Google, но никаких ошибок в консоли

Ответ 1

Если у вас есть коллекция маркеров, я думаю, вам следует использовать этот способ, итерации по коллекции и присвоение элемента i:

for(var i =0; i<locations.length; i++){
  addMarker(locations[i].lat, locations[i].lng);
}

доказательство концептуальной скрипты

Ответ 2

Вы можете попробовать, изменив ниже.

while ($row = mysqli_fetch_assoc($result)) {
    //Assuming "lat" is column name in tester table. Please change it if required.
    $lat= $rows['lat'];

    //Assuming "lng" is column name in tester table. Please change it if required.
    $lng= $rows['lng'];

    $list[] = array('lat' => $lat, 'lng' => $lng);
}

Ответ 3

Я сделал это с использованием прототипов, код намного чище. Пример (предположим, что вы используете jquery):

Создайте 3 скрипта:

• Карта script
• JSONParser script
• Главная script

Сначала Создайте прототипы для работы с картами google:

 var MapUtil = (function($) {

    var mapProp = {
        center: new google.maps.LatLng(-38.4529181, -63.5989206),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    /**
     * @returns
     * Maps options for create a google map
     */
    function getMapProperties() {
        return mapProp;
    }

    /**
     * Create simple marker
     * @param lat
     * Latitude for the marker
     * @param lng
     * Longitude for the marker
     * @param myMap
     * Actual map
     * @returns
     * Return a new google map marker
     */
     function simpleMarker(lat, lng, myMap) {
         var marker = new google.maps.Marker({
             //add the marker options
             position: new google.maps.LatLng(lat, lng),
             draggable:true,
             animation: google.maps.Animation.DROP,
             map: myMap,
         });

        return marker;
     }

    return {
        getMapProperties: getMapProperties,
        simpleMarker: simpleMarker,
    };

})(jQuery);

Затем создайте JSONParser для преобразования объектов JSON в javascript:

var JSONParser = (function($){

    /**
     * @return An array with the markers parsed
     */
    function getMarkers(json) {
        var markers = [];
        for (int i = 0; i < json.length; i++) {
            markers.push({json[i].lat,json[i].lng});
        }

        return markers;
    }

    return {
        getMarkers : getMarkers,
    };

})(jQuery);

И вы главный script:

$(document).ready(function() {
    var myMap = null;

    //add the map to the page
    google.maps.event.addDomListener(window, 'load', initialize);

    /**
     * Init Google Maps
     */
    function initialize() {
        var map=new google.maps.Map(document.getElementById("googleMap"), 
                MapUtil.getMapProperties());
        myMap = map;

        createMarkers();
    }

    function createMarkers() {
        //retrieve the information
        $.ajax({             
            type: 'post',
            url: 'MarkersController.php',
            data: {},
            success: function (data) {
                var json= $.parseJSON(data);
                var markers = JSONParser.getMarkers(json);

                for (var i = 0; i < markers.length; i++) {
                    MapUtil.simpleMarker(marker[i].lat, marker[i].lng, myMap);
                }
            }
        });
    }
});

Затем добавьте скрипты в html в следующем порядке:

<script src="...path.../map-utils.js"></script>
<script src="...path.../json-pareser.js"></script>
<script src="...path.../main.js"></script>

Для других функций о карте или json добавьте дополнительные методы!

Ответ 4

Вы хотите использовать что-то вроде этого:

google.maps.event.addListenerOnce(map, 'idle', function(){
  // Code Here..but jquery might load first or last.. see below.
});

Если я не ошибаюсь, ваш DOM готов к вашей карте. Я обычно создаю функцию, которая вызывается дважды, вторая вызывает загрузку JS... поэтому первый вызов обычно jQuery, а второй - карты, готовые. Затем запустите любой связанный с картой код.

Пример того, как я это делаю.. в очень простых терминах...

var iLoadPoints = 0;
function mapReady() {
    if (iLoadPoints==2) {   // Map & jQuery Ready To Use
        // RUN CODE HERE... At this point, run the getJSON and so on...
    } else {    // Loader Not Ready... Escape function and ignore until next call
        return false;
    }
}

$(function() {
    iLoadPoints += 1;
    mapReady();
});
google.maps.event.addListenerOnce(map, 'idle', function(){
    iLoadPoints += 1;
    mapReady();
});

Я исхожу из предположения, что если вы эхо отобьете lat/long на консоль, что вы их получите... так как в данных действительно существует.

EDIT:, как это было предложено и просто заметили, цикл должен использовать переменную я для выбора текущего элемента в цикле, как показано / , предложенного scaisEdge.

for(var i =0; i<locations.length; i++){
    addMarker(locations[i].lat, locations[i].lng);
}

Изменено из вашего комментария: Я верю, что больше...

var iLoadPoints =0; 
function mapReady(){ 
    if(iLoadPoints === 2){
        initialize(); 
    }else {
        return false;
    }
} 
google.maps.event.addListenerOnce(map, 'idle', function(){ 
    iLoadPoints+=1; 
    mapReady(); 
}); 
google.maps.event.addDomListener(window, 'load', function(){
    iLoadPoints+=1; 
    mapReady(); 
}); 

Вы также можете сократить mapReady на что-то большее.

function mapReady(){ 
    if(iLoadPoints === 2) initialize(); 
} 

Вся идея mapReady - это простая уловка... Вы можете добавить инструкцию if к функции инициализации. Тот же эффект, вся концепция - вам нужно подождать два по-разному по времени готовых событий, это можно сделать с помощью два булеана или другие методы.

В прошлом тестировании, если я загружаю веб-сайт из своего локального хоста и имею что-то вроде карт google. Локальный jQuery будет мгновенным, а gmaps всегда будут отставать. Поэтому время от времени я получаю отказ от загрузки уже настроенных/ориентированная на данные карта.

Или еще больше.. это само по себе должно работать одинаково..

var iLoadPoints =0; 
google.maps.event.addListenerOnce(map, 'idle', function(){ 
    iLoadPoints+=1; 
    if (iLoadPoints===2) initialize(); 
}); 
google.maps.event.addDomListener(window, 'load', function(){
    iLoadPoints+=1; 
    if (iLoadPoints===2) initialize(); 
});