заставить карту Google появляться в определенном div [дубликате]

Question

заставить карту Google появляться в определенном div [дубликате]

0

У меня очень простой веб-сайт с набором div, состоящим из баннера (полная ширина), левого меню (200 пикселей) и правого содержимого (600 пикселей). У меня есть пять пунктов меню, которые используют простой скрипт jquery для загрузки содержимого правой стороны при нажатии. Все работает хорошо, за исключением карт Google, которые не будут открываться. когда я получаю localhost/contact.html, он загружается отлично, поэтому функциональность есть. ему просто не нравится встраиваться в общий документ /html.

Код для меню:

    $(document).ready(function() {
    $("#about").on("click", function() {
        $("#content").load("about-us.html");
    });
    $("#candidate").on("click", function() {
        $("#content").load("candidate.html");
    });
    $("#client").on("click", function() {
        $("#content").load("client.html");
    });
    $("#meet").on("click", function() {
        $("#content").load("meet.html");
    });
    $("#contact").on("click", function() {
        $("#content").load("contact.html");
    });
});

Код для contact.html

<body>
    <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
        var myCenter = new google.maps.LatLng(51.510252,-0.086585);

            function initialize()
            {
                var mapProp = {
                    center: myCenter,
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

                var marker = new google.maps.Marker({
                    position: myCenter,
                    animation:google.maps.Animation.BOUNCE
                });

                marker.setMap(map);
            }
    </script>

       <table border="3px">
            <tr><td align="right">
                    t: <br>
                    1st Floor<br>
                    Regis House<br>
                    45 King William Street<br>
                London, EC4R 9AN
                </td>
                <td id="googleMap" width="300px" height="300px">
                </td>
            </tr>
        </table>
        <script type="text/javascript">initialize('googleMap');</script>
</body>

Просто понюхал хром и увидел эту ошибку:

Uncaught ReferenceError: google is not defined VM500:1
(anonymous function) VM500:1
o.extend.globalEval jquery-2.1.0.min.js:2
o.fn.extend.domManip jquery-2.1.0.min.js:3
o.fn.extend.append jquery-2.1.0.min.js:3
(anonymous function) jquery-2.1.0.min.js:3
o.access jquery-2.1.0.min.js:2
o.fn.extend.html jquery-2.1.0.min.js:3
(anonymous function) jquery-2.1.0.min.js:4
j jquery-2.1.0.min.js:2
k.fireWith jquery-2.1.0.min.js:2
x jquery-2.1.0.min.js:4
(anonymous function)

A_nobody 16 фев. 2014, в 16:09

Источник

1

Вам нужно добавить больше информации к вашему вопросу. Здесь ( jsfiddle.net/PdcE9 ) работает Google maps.
Praveen 16 фев. 2014, в 14:21

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Вам нужно добавить больше информации к вашему вопросу. Здесь ( jsfiddle.net/PdcE9 ) работает Google maps.

A_nobody · Answer 1 · 2014-02-25T16-09-00.000Z

Я numpty... это было легко решить в конце концов.., учитывая, что мой компонент является основным, а простой js отключает, я просто должен был поместить вызов API в основной index.html, а не ребенок... так переехал этот

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

в index.html... все работает отлично.. теперь у меня другая проблема с размещением карты в пределах, когда используется Firefox... IE и Chrome отлично с кодом, но Firefox строит карту на всю страницу.