вывод гугл мап на jsp странице

407

05 мая 2017, 19:01

Необходимо разместить гугл карту на jsp странице в мавен проекте с использованием js. Пробовал такой вариант:

    <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="content-type" content="text/html">
  <title>GoogleMap</title>
    <script>
        function initMap() {
            var uluru = {lat: -25.363, lng: 131.044};
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: uluru
            });
            var marker = new google.maps.Marker({
                position: uluru,
                map: map
            });
        }
    </script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyAk40H0NzyY7u9TyOwrPUju2aY1F6a8pvA&callback=initMap"></script>
</head>
<body>    
<h2>Google script</h2>
<div id="map" style="height:90%; margin:0px; padding:0px;"></div>
<br />
<img src="resources/ok.png">
</body>
</html>

пробовал подключать скрипт с ключем и без ключа и все равно карта не отображается, пробовал в функции function initMap() { прописывать alert("test") то при загрузке страницы алерт появляется. Кажется что ошибка в скприпте подключения апишки

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyAk40H0NzyY7u9TyOwrPUju2aY1F6a8pvA&callback=initMap"></script>

хотя он взят с офф документации.

В чем может быть причина?

Answer 1

Вот мой вариант, переместил Ваш js-код в конец body

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" language="java" %> 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="text/html">
    <title>GoogleMap</title>
</head>
<body>
<h2>Google script</h2>
<div id="map" style="height:90%; margin:0px; padding:0px;"></div>
<br />
<img src="resources/ok.png">
<script>
    function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: uluru
        });
        var marker = new google.maps.Marker({
            position: uluru,
            map: map
        });
    }
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyAk40H0NzyY7u9TyOwrPUju2aY1F6a8pvA&callback=initMap"></script>
</body>
</html>