Карта Google в многостраничной форме.

Question

Карта Google в многостраничной форме.

0

У меня есть multipage форма. Разные страницы разделены по полю, и вы можете перемещаться между ними с помощью кнопок. На втором поле, например, на второй "странице", я хотел бы иметь карту и поле поиска, в котором вы можете ввести свой адрес.

Проблема в том, что карта не будет отображаться на второй странице. Если я помещаю карту вне формы, она показывает и работает по назначению.

Я использую HPNeo Gmaps.js для карты.

HTML:

<fieldset>
 <h2 class="fs-title">Foo</h2>
 <textarea id="" name="" placeholder="" rows="4" cols="50" class=""></textarea>
 <input id="" type="" name="" placeholder="" class="" />
 <textarea id="" name="" class=""></textarea>
 <input id="" type="" name="next" class="next action-button" value="Next" />
</fieldset>
 <!--Page 2-->
<fieldset>
   <h2 class="fs-title">Bar</h2>
   <label for="address">Address:</label>
   <div class="input">
   <input type="text" id="address" name="address" />
   <input type="submit" class="btn" value="Search" />
   </div>
   <div id="mapcontainer"></div>
  </fieldset>

JS:

 var map;
 $(document).ready(function () {
        map = new GMaps({
            div: '#mapcontainer',
            lat: -12.043333,
            lng: -77.028333
        });
        $('geocoding_form').submit(function (e) {
            e.preventDefault();
            GMaps.geocode({
                address: $('#address').val().trim(),
                callback: function (results, status) {
                    if (status == 'OK') {
                        var latlng = results[0].geometry.location;
                        map.setCenter(latlng.lat(), latlng.lng());
                        map.addMarker({
                            lat: latlng.lat(),
                            lng: latlng.lng()
                        });
                    }
                }
            });
        });

CF256 14 апр. 2014, в 12:27

Источник

0

Кажется, проблема с размером. Попробуйте #mapcontainer размеры вручную для #mapcontainer . И если вы знаете, используя консоль браузера, проверьте размеры #mapcontainer в двух случаях.
alpakyol 14 апр. 2014, в 10:03
0

Возможно, ваш #mapcontainer не имеет измерений при создании карты, так как он не отображается. Попробуйте создать карту, когда появится вторая страница.
Steve 14 апр. 2014, в 10:04

Теги:

javascript

jquery

html

google-maps

geocoding

1 ответ

Ещё вопросы

Кажется, проблема с размером. Попробуйте #mapcontainer размеры вручную для #mapcontainer . И если вы знаете, используя консоль браузера, проверьте размеры #mapcontainer в двух случаях.
Возможно, ваш #mapcontainer не имеет измерений при создании карты, так как он не отображается. Попробуйте создать карту, когда появится вторая страница.

Rob Quincey · Accepted Answer · 2014-04-14T08-46-00.000Z

Как говорили другие, это, вероятно, проблема с размерами в том, что, когда карта инициализируется, контейнер карты имеет ширину и высоту 0, так как он скрыт. Вы должны быть в состоянии обойти это путем ожидания инициализации вашей карты до тех пор, пока не появится вторая "страница" (я предполагаю, что у вас есть какой-то JavaScript где-нибудь, который показывает/скрывает, поэтому вы можете просто прикрепить его), или другая альтернатива - событие изменения размера карты, когда оно отображается.

Для проекта, который я выполнял, у меня была аналогичная проблема, за исключением того, что карта изначально была скрыта в модальном диалоговом окне Bootstrap. С этим я также столкнулся с проблемой, что каждый раз, когда карта была скрыта и снова показана после инициализации, карта пошла бы вяло. Опять же, это было связано с тем, что когда карта снова была скрыта, высота и ширина контейнеров карт снова были 0.

Чтобы обойти это, я добавил атрибут "data-attribute" к моему контейнеру карты, названному data-maps-initialized, изначально установленным на false. Когда был показан модальный с картой, я произвел инициализацию Google Maps и установил для этого атрибута значение true. Когда он был скрыт и снова показан, я проверил этот атрибут, и если он был правдой, я активировал событие Resize. Здесь код, который я использовал

var map;
$('#mapsModal').on('shown.bs.modal', function () {
    //if map is not initialized
    if ($('#gMapsContainer').attr('data-maps-initialized') === 'false') {
        initialize();
        $('#gMapsContainer').attr('data-maps-initialized', 'true');
    } else {
        //fire resize event
        google.maps.event.trigger(map, 'resize');

    }
});
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(50.74, -2.3),
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    map = new google.maps.Map(document.getElementById("gMapsContainer"),
        mapOptions);
}

$('#mapsModal').on('shown.bs.modal', function() {... line - мой слушатель, когда модад показан/скрыт, поэтому в вашем случае это будет только то, что у вас есть который показывает/скрывает ваши страницы.

Обратите внимание, что я не говорю, что это лучший способ в мире делать что-то, но это сработало для меня с моей проблемой, и ваши звуки похожи!