Google maps and Markers, JSP

H

2

0

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>

Hyoscyamus answered 20/4, 2014 at 17:43 Comment(2)

How many fields do you have in output? 3 or only 2? If there are only two fields than indexes are wrong: markers[i][0], markers[i][1]) should be used. Otherwise, initialize() function is OK. – Septuagesima 20/4, 2014 at 17:54

Welcome to Stack Overflow new user, please try to contain your code to only the relevant portions (for example, remove the CSS code, as it is unlikely to be related to the issue). This will help us provide better answers faster for you. – Modifier 20/4, 2014 at 18:5

E

0

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.

Eda answered 20/4, 2014 at 17:58 Comment(1)

thx for your help, I've already changed that but I have an other problem which is "java.lang.ClassNotFoundException: com.mysql.jdbc.Driver in Eclipse" even after I've included jar file for mysql connectivity – Hyoscyamus 21/4, 2014 at 13:55

W

0

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.

Walke answered 28/4, 2020 at 22:56 Comment(0)

Recommended topics

Hot tags