Google maps v3 is not showing

StackOverflow https://stackoverflow.com/questions/20733715

题

Please help me. I'm making application using google maps. But is is not displaying and I do not know why! I have already surfed throw internet, but did not find answer why. Some times ago it was working, but markers was not displaying too, can you also answer why. Here is my jsp page:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
    <title>Kid Spy</title>
    <base href="${pageContext.request.contextPath}"/>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?libraries=geometry&v=3&key=AIzaSyBfcW0KZvzDQcydwhJ7iLtsTE0haAEBbT8&sensor=false">
    </script>


    <script>
        var l=0;
        var coordinates;

        function setLength(){
           coordinates = new Array(l);
        }

        function setCoordinates(index, value) {
            if(index == 0)
                setLength();
            coordinates[index] = value;
        }

        function initialize() {
            var mapOptions = {
                maxZoom:50,
                minZoom: 3,
                zoom: 3,
                center: new google.maps.LatLng(0, -180),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                streetViewControl: false
            };
            var map = new google.maps.Map(document.getElementById('map-canvas'),
                    mapOptions);
            if(coordinates != null)  {
            var path = new Array(coordinates.length/2);
            console.log(path.length);
                for(var x = 0; x<path.length;x++){
                    path[x]=new google.maps.LatLng(coordinates[x*2], coordinates[(x*2)+1]);
                }
            }

            var path = new google.maps.Polyline({
                path: path,
                geodesic: true,
                strokeColor: '#FF0000',
                strokeOpacity: 1.0,
                strokeWeight: 2
            });
            path.setMap(map);

            if(typeof path != 'undefined'){
                console.log("Creating marker!")
                var marker = new google.maps.Marker({
                    position: path[path.length-1],
                    map: map,
                    title: 'Hello World!'
                });
            }
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body>

    <c:forEach var="item" items="${message}" varStatus="loop">
    <script>
        l++;
    </script>

    </c:forEach>

<c:forEach var="item" items="${message}" varStatus="loop">
    <script>
        setCoordinates(${loop.index}, ${item});
    </script>
</c:forEach>

    <form:form id="info" action="${pageContext.request.contextPath}/getnames" method="POST">
        <input type="text" id="name" name="name" placeholder="Name">
        <input type="text" id="date" name="date" placeholder="Date {dd.mm.yyyy}">
        <input type="submit" id="confirm">
    </form:form>

    <form:form id="addForm">
        <input type="text" id="name" name="name" placeholder="Name">
        <input type="text" id="pass" name="pass" placeholder="Password">

    </form:form>

<div id="map-canvas"></div>



</body>
</html>

I'm making Spring (maven) project. Thanks!=)

有帮助吗？

解决方案

Your "map-canvas" div doesn't have a size.

<div id="map-canvas" style="height:500px; width:500px;"></div>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top