problem on markers in google maps
iam pradeep i have a problem on google maps the problem is iam creating multiple markers based on the latitude and longitude which(latitude and longitude) i get from my database.
Here comes the problem. when i create the marker, only last marked is loaded on to the map rather than loading all the maps.
Below you can see the code.
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*" %>
<%!
Connection connection = null;
boolean foundResults = false;
ResultSet set = null;
Statement statement = null;
%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> </script>
<script type="text/javascript">
var locations;
var h = new Array(10);
function initialize()
{
var latlng = new google.maps.LatLng(17.4531555176, 78.4580039978);
var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//google.maps.event.addListener(map, 'zoom_changed', function() { setTimeout(moveToDsnr, 500);});
google.maps.event.addListener(map, 'zoom_changed', function() { setTimeout(moveToAmpp, 500);});
var marker = new google.maps.Marker({position: latlng,map: map,title:"Hyderabad"});
google.maps.event.addListener(marker, 'click', function() { map.setZoom(12);});
}
function moveToAmpp()
{
<%
St开发者_开发问答ring lat=null;
String lng=null;
int i=0;
try
{
Class c = Class.forName("org.postgresql.Driver");
connection = DriverManager.getConnection("jdbc:postgresql://localhost:5432/postgres","postgres", "password");
statement = connection.createStatement();
set = statement.executeQuery("SELECT lat, lng FROM latlng");
while(set.next())
//for(i=0;set.next();i++)
{
lat=set.getString(1);
lng=set.getString(2);
%>
alert(<%= lat%>);
alert(<%= lng%>);
locations = [['Dilsukhnagar', <%= lat%>, <%= lng%>, 1]];
alert(locations);
var map = new google.maps.Map(document.getElementById("map_canvas"),{zoom: 12,center: new google.maps.LatLng(17.38,78.48),mapTypeId:google.maps.MapTypeId.ROADMAP});
var infowindow = new google.maps.InfoWindow();
var marker;
var i;
//alert(locations.length);
alert(locations[0][0]);
alert(locations[0][1]);
alert(locations[0][2]);
alert(locations[0][3]);
for (i = 0; i < locations.length; i++)
{
marker = new google.maps.Marker({position: new google.maps.LatLng(locations[i][1],locations[i][2]),map: map});
alert("done");
google.maps.event.addListener(marker, 'click', (
function(marker, i)
{
return function()
{
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})
(marker, i));
alert("created");
}
alert("hello");
<%
}
}
catch(Exception e)
{
}
%>
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
So please help me on this. Thank you.
You have a problem when you set locations = [['Dilsukhnagar', lat, lng, 1]];
This reset all the locations table and leaves only one record.
Check this correction: (I remove the JSP because I don't have a server) You will have to rethink the JSP loop to make it work with your DB. You have to initiate a zoom to call on the initialize function. I think you may want to change this because it leads to strange behaviour.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> </script>
<script type="text/javascript">
var locations;
var h = new Array(10);
function initialize()
{
var latlng = new google.maps.LatLng(17.4531555176, 78.4580039978);
var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'zoom_changed', function() { setTimeout(moveToAmpp, 500);});
var marker = new google.maps.Marker({position: latlng,map: map,title:"Hyderabad"});
google.maps.event.addListener(marker, 'click', function() { map.setZoom(12);});
}
function moveToAmpp()
{
var locations = new Array(2);
for(i = 0; i < locations.length; i++) {
locations[i] = new Array(4);
}
<%
String lat=null;
String lng=null;
int i=0;
try
{
Class c = Class.forName("org.postgresql.Driver");
connection = DriverManager.getConnection("jdbc:postgresql://localhost:5432/postgres","postgres", "password");
statement = connection.createStatement();
set = statement.executeQuery("SELECT lat, lng FROM latlng");
while(set.next())
{
%>
/* Can be embedded into JSP loop */
locations[<%= i %>][0]="SomeThing You get from your DB?";
locations[<%= i %>][1]=<%= lat%>;
locations[<%= i %>][2]=<%= lng%>;
locations[<%= i %>][3]="Something you get from your DB?";
<% i++;
}
%>
var map = new google.maps.Map(document.getElementById("map_canvas"),{zoom: 12,center: new google.maps.LatLng(17.38,78.48),mapTypeId:google.maps.MapTypeId.ROADMAP});
var infowindow = new google.maps.InfoWindow();
var marker;
var i;
for (i = 0; i < locations.length; i++)
{
marker = new google.maps.Marker({position: new google.maps.LatLng(locations[i][1],locations[i][2]),map: map});
//alert("done");
google.maps.event.addListener(marker, 'click', (
function(marker, i)
{
return function()
{
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})
(marker, i));
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Does it work for you?
加载中,请稍侯......
精彩评论