0

I use google map api with jsp and the ajax will update the database to display on the google map. It did not work. The map is empty.It looks like the google map didn't get (lat,lng) and how to fix it?

<%@ page language="java" contentType="text/html;charset=utf-8" import="java.io.*"    import="java.util.*" import="java.sql.*"%> 
<% //response.setHeader("refresh","5"); %>  
<html>
<head>


 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 60% ;}

      #map_canvas { height: 100px;width:100px;  }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
    </script>

  <script type="text/javascript">

function showCustomer(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","http://localhost:8080/myapp/data.jsp?q="+str,true);
xmlhttp.send();
}

function initialize() 
{
var marker;
        var mapOptions = {
          center: new google.maps.LatLng(lat,lng),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
                }       

    </script>
  </head>
<body bgcolor="FFFFFF">
<body onLoad="initialize()">

<div id="map_canvas" style="width:50%; height:100%"></div>
<div id="txtHint"></div>
Now time is: <%=new java.util.Date()%>
</body></html>

and the data.jsp:

<%@ page language="java" contentType="text/html;charset=utf-8" import="java.io.*" import="java.util.*" import="java.sql.*"%> 

<% 

Class.forName("org.postgresql.Driver").newInstance(); 
String url="jdbc:postgresql://localhost/postgres"; 
String user="postgres"; 
String password="123456"; 
Connection conn=DriverManager.getConnection(url,user,password); 
Statement stmt=conn.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE); 
String sql="select * from test"; 
ResultSet rs=stmt.executeQuery(sql); 

while(rs.next()){ 
String id = rs.getString("id");
String lat = rs.getString("lat");
String lng = rs.getString("lng");
String time = rs.getString("time");
} 
rs.last();
%> 
<%rs.close();stmt.close();conn.close();%>
Mehdi Karamosly
  • 5,388
  • 2
  • 32
  • 50
alex
  • 27
  • 1
  • 4
  • 1. why use plain javascript for Ajax call when you have many nice and easy framework to take care of the browser compatibility? 2. did you configure the key for the google map ? 3. where you able to display map by hard-coded values ? 4. you can use developer tool F12 on chrome or on IE to debug the ajax response and make sure you are getting correct values. – Mehdi Karamosly Oct 12 '13 at 17:35
  • how can i get(lat,lng) form data.jsp? – alex Oct 12 '13 at 18:14
  • what do you have in test table ? the way you are doing it right now you are pulling all records and overriding id, lat, lng and time, so at the end they get the last data from the last record. it seems that you are not calling your `showCustomer(str)` anywhere in the code. I am not a JSP Guru, but here is how to make ajax calls with servelt, using JSON formt : http://stackoverflow.com/questions/4112686/how-to-use-servlets-and-ajax – Mehdi Karamosly Oct 12 '13 at 18:28

0 Answers0