Google maps and Markers, JSP

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

Question

I am working on a web application with Java EE and I would like to dynamically add markers to the Google map placed on my JSP page with coordinates from my database. I have the following code, but I can't pinpoint the issue

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <style type="text/css">
  html, body{
height:100%;
margin: 0;
padding: 0;
  }
    #map_canvas{
height:700px;
width: 700px;
  }
  #map-canvas { height: 100% }
  </style>
  <sql:setDataSource var="enterdata" 
            driver="com.mysql.jdbc.Driver" 
            user="root" password="root" 
            url="jdbc:mysql://localhost/google_maps" />


        <script type="text/javascript" src="http://maps.google.com/maps/api/js?           sensor=false"></script>


       <script type="text/javascript">


       var markers = [
           <c:forEach var="s" items="${list.rows}">
[<c:out value="${s.latitude}"/>,<c:out value="${s.longitude}"/>]
        </c:forEach>        ];   




function initialize(){
    var latlng = new google.maps.LatLng(markers[0][1],markers[0][2]);
    var mapOptions={
        zoom: 6, // 0 à 21
        center: new google.maps.LatLng(36,5), // centre de la carte
        mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID, TERRAIN
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var infowindow = new google.maps.InfoWindow(), marker, i;

    for (i = 0; i < markers.length; i++) {  
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(markers[i][1], markers[i][2]),
            map: map
        });


        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(markers[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));

    }
}
  google.maps.event.addDomListener(window, 'load', initialize);
   </script>
   </head>
   <body onload="initialize()">
    <div id="map_canvas"></div>
    <sql:query var = "users" dataSource="${dataSource}">
             select longitude,latitude from map
             </sql:query>
    <p class="info">${ message }</p>
    </body>
        </html>
Was it helpful?

Solution

If I understand properly this part

var markers = [
           <c:forEach var="s" items="${list.rows}">
[<c:out value="${s.latitude}"/>,<c:out value="${s.longitude}"/>]
        </c:forEach>

there are only 2 fields in output array. In that case indexes used to create LatLng are wrong and should be changed to use 0 and 1:

position: new google.maps.LatLng(markers[i][0], markers[i][1]),

Otherwise, you will have to include also information for infowindow content.

OTHER TIPS

There is a comma missing after the cout. This is needed to correctly process the array. Inside the c:forEach loop to create the markers add a comma after:

value="${s.longitude}"/>],

Also the other issue is markers[i][0] and markers[i][1] as mentioned.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top