Как включить карту Google в приложение

Этот вопрос специфичен для дизайна. У меня есть приложение, которое отображает позиции на карте все работает "отлично". Но теперь мне нужно спроектировать пользовательский интерфейс, который выходит за рамки карты (кнопки, формы и т. Д.), Они будут расположены на одной стороне карты, но по какой-либо причине карта отображается после изменения некоторых страниц CSS.

Я немного отчаялся, так как не работает ни мой собственный CSS, ни bootstrap (2.3.0), foundation (3.2.5). Карта просто не отображается, в консоли нет ошибок. Событие в лучшем случае отображается на карте, но с графическими сбоями (неправильное управление масштабированием, плохое положение маркеров и т. Д.) Что может происходить и как я могу это исправить. Должен ли я использовать iframe? или есть лучшее решение?

Я читал о max-width: none исправить, но это ничего не решает. Чтобы уточнить, что я использую карты не являются статичными.

Я могу отлично работать с картами, если попробую с простой разметкой и стилями

index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My App</title>

        <link rel="stylesheet" href="/css/styles.css" media="all">
    </head>
    <body>
        <div id="map" class="map_canvas"></div>
        <script src="https://maps.googleapis.com/maps/api/js?&v=3.exp&sensor=false"></script>
        <script src="/js/app.js"></script>
    </body>
</html>

styles.css

html, body, .map_canvas {
    margin: 0;
    padding: 0;
    height: 100%;
}

app.js

google.maps.event.addDomListener(window, 'load', function() {

    options = {
        zoom: 15,
        center: new google.maps.LatLng(10.472937,-73.262308),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map'), options);    
});

Но, очевидно, этого недостаточно для сборки приложения.

Источник

2 ответа

Решение

Решение, которое включает использование iframes, так как кажется, что это единственный способ, которым карта не подвержена влиянию остальной части CSS

index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My App</title>    
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
    </head>
    <body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span3"></div>
            <div class="span9">
                <iframe id="map_container" src="/map.html" frameborder="0"></iframe>
            </div>
        </div>
    </div>
    <script src="https://maps.googleapis.com/maps/api/js?&v=3.exp&sensor=false"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="/js/app.js"></script>
    </body>
</html>

map.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mapa</title>
    <link rel="stylesheet" href="/css/map-styles.css" media="all">
</head>
<body>
    <div id="map" class="map_canvas"></div>
</body>
</html>

Карта-styles.css

html, body, .map_canvas {
    margin: 0;
    padding: 0;
    height: 100%;
}

app.js

google.maps.event.addDomListener(window, 'load', function() {

    var options = {
            zoom: 15,
            center: new google.maps.LatLng(10.472937,-73.262308),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        },
        $iframe = $('#map_container'),
        map_el = $iframe.contents().find('#map')[0],
        map = new google.maps.Map(map_el, options);

        // Match iframe size to parent
        $iframe.width($iframe.parent().width());
        $iframe.height($iframe.parent().height());
});
Источник

Смотрите эту ссылку, я надеюсь, что это поможет вам http://jqueryui.com/spinner/

Источник
Другие вопросы по тегам