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