La ventana de información no se muestra correctamente en mi mapa al hacer clic en un marcador. El sitio web está aquí.

También notará que el control del mapa tampoco se muestra correctamente.

var map;
var locations = <?php print json_encode(di_get_locations()); ?> ;
var markers = []
jQuery(function ($) {
    var options = {
        center: new google.maps.LatLng(51.840639771473, 5.8587418730469),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), options);

    for (var i = 0; i < locations.length; i++) {
        makeMarker(locations[i]);
    }
    centerMap();

});

function makeMarker(location) {
    var markerOptions = {
        map: map,
        position: new google.maps.LatLng(location.lat, location.lng)
    };
    var marker = new google.maps.Marker(markerOptions);
    markers.push(marker);
    var content = '';

    var infowindow = new google.maps.InfoWindow({
        content: "test",
        size: new google.maps.Size(50, 50),
        disableAutoPan: true
    });


    google.maps.event.addListener(marker, 'click', function (e) {
        infowindow.open(map, marker);
    });
}

function centerMap() {
    map.setCenter(markers[markers.length - 1].getPosition());
}
0
Mayank Awasthi 1 sep. 2014 a las 11:39

2 respuestas

La mejor respuesta

Había resuelto este problema antes. Google Map no se mostrará correctamente cuando cargue el mapa en un lienzo "display: none". La victoria modal de Bootstrap estará oculta al principio. Por lo tanto, debe asegurarse de que el lienzo del mapa no se pueda ocultar antes de que Google Map termine de cargarse.

Mi trabajo es mover el lienzo a una posición que el usuario no pueda ver y cargar el mapa en él. Después de unos segundos (quizás 500 ms), mueva el mapa a la posición correcta (en su caso, es el cuerpo modal).

Javascript:

$(function(){
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    setTimeout(function(){
        $('.modal-body').append($("#map").css("margin-top","0px").get(0));
    },500);
});
2
Rohit JAin php 1 sep. 2014 a las 07:51

Debe intentar usar solo una instancia del objeto de ventana de información y usar el método setContent() dentro de su detector de eventos de clic de marcador.

for (var i = 0; i < locations.length; i++) {

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        title: locations[i][0]
    });

    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));

    markers.push(marker);
}

Para referencia: JSFiddle demo

0
MrUpsidown 1 sep. 2014 a las 11:09