Hello everyone, I am looking to add markers on a map. In order to do this, I need to extract longitude and latitude from a database table.
1- I have used JavaScript to display the map (Google Maps).
var map;
var initialize;
initialize = function(){
var latLng = new google.maps.LatLng(x,y);
var myOptions = {
zoom : 14,
center : latLng,
mapTypeId : google.maps.MapTypeId.TERRAIN,
maxZoom : 20
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
var marker = new google.maps.Marker({
position : latLng,
map : map,
title : "sousse"
//icon : "marker_sousse.gif"
});
2- I retrieve Longitude and Latitude from the database and store them in two String Lists using Java:
package beans;
import .
.
.
.
.
@ManagedBean(name = "js")
@RequestScoped
public class Map {
ArrayList<String> Listlat = new ArrayList<String>();
ArrayList<String> Listlng = new ArrayList<String>();
GestionAnalyseLocal m;
ResultSet resultSet;
public Map() {
try {
Class.forName("com.mysql.jdbc.Driver");
Connection connect = DriverManager.getConnection("jdbc:mysql://localhost:3306/pfedb", "root", "");
Statement statement = connect.createStatement();
resultSet = statement.executeQuery("select * from t_analyse");
} catch (Exception e) {
System.out.println("erreur" + e);
e.printStackTrace();
}
}
public ArrayList<String> ExtractLat(ResultSet rs) {
try {
while (rs.next()) {
Listlat.add(rs.getString("latitude"));
}
} catch (Exception e) {
System.out.println("erreur" + e);
e.printStackTrace();
}
return Listlat;
}
public ArrayList<String> ExtractLng(ResultSet rs) {
try {
while (rs.next()) {
Listlng.add(rs.getString("Longitude"));
}
} catch (Exception e) {
System.out.println("erreur" + e);
e.printStackTrace();
}
return Listlng;
}
}
3- Now, I am trying to find a solution to replace the x and y in the js function with the two lists... Here is the HTML page:
<!DOCTYPE html>
<html >
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:p="http://primefaces.org/ui"
template="/WEB-INF/template/template.xhtml"
>
<ui:define name="title">Map</ui:define>
<ui:define name="content">
<head>
<link rel="stylesheet" href="jquery-ui-1.8.12.custom.css" type="text/css" />
</head>
<style type="text/css">
#container{position:relative;width:990px;margin:auto;}
#container #map{width:500px;height:500px;margin:auto;}
</style>
<body>
<div id="container">
<div id="map">
<p>Please wait while the map is loading...</p>
</div>
</div>
<!-- Include Javascript -->
<script type="text/javascript" src="resources/js/jquery.min.js"></script>
<script type="text/javascript" src="resources/js/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="resources/js/functions.js"></script>
</body>
</ui:define>
</ui:composition>
</html>
Note: I am not very familiar with JavaScript. :(