On click of a marker the map need to be zoomed and multiple markers need to created at certain places
i have a problem on markers in google maps.
The problem is i need to create multiple markers on the map on clicking of a particular marker on the map
can u help me please....
please help me....
thanks
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*" %>
<%!
int i=1;
Connection connection = null;
boolean foundResults = false;
ResultSet set = null;
Statement statement = null;
String city;
String ip;
String sysname;
String sess;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps API Sample</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script>
<script type="text/javascript">
var map;
var geocoder;
var address=sel.options[sel.selectedIndex].value;
document.write(address);
function createMarker(point,html,what)
{
var test = address;
var marker = new GMarker(point,{id:what, name:"foo", description:"baz"});
GEvent.addListener(marker, "click", function() {
//marker.openInfoWindowHtml(html);
window.location.href="/geomapMidware.jsp?"+test+"";
});
return marker;
}
function initialize()
{
map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(79, 0, true), 8);
map.addControl(new GMenuMapTypeControl(true,false));
var point1 = map.getCenter();
var marker = createMarker(point1,'<img src="printers-for-wire-and-network-elements-marking-43844.jpg" width="100" height="100">',"this")
map.addOverlay(marker);
geocoder = new GClientGeocoder();
}
function addAddressToMap(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("Sorry, we were unable to geocode that address");
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
var test=address;
var marker = createMarker(point,'<a href="#"><img src="printers-for-wire-and-network-elements-marking-43844.jpg" width="100" height="100"></a>',"this");
//the above code can also written as following
// var marker = createMarker(point,'<form><input type="button" name="b" value="Confirm" title="Click for Details" src="printers-for-wire-and-network-elements-marking-43844.jpg" width="100" height="100" onClick=find()></form>',"this");
map.addOverlay(marker);
marker.openInfoWindowHtml('<b>Coordinates:</b>' + place.Point.coordinates);
}
}
function showLocation(sel)
{
address = sel.options[sel.selectedIndex].value;
开发者_如何转开发 var add1="Delhi"
geocoder.getLocations(add1, addAddressToMap); //when i click on the marker the map should be zoomed
}
function findLocation(address)
{
showLocation();
}
function find()
{
var test=address;
//window.open("/Details.jsp?","winA","width=300,height=300,resizeable=no");
window.location.href="/geomapDetails.jsp?"+test+"";
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
<form name="f1" action="#" onsubmit="showLocation(); return false;">
<%
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 sno,city,ip,sysname FROM test");
while(set.next())
{
}
}
catch(Exception e)
{
e.printStackTrace();
}
%>
</form>
<div id="map_canvas" style="width: 1250px; height: 740px" title="map"></div>
</body>
</html>
when i click on the marker the map should be zoomed
Assuming that you want to display places based on their distance from the user's location. I'll also assume you set the viewport based on the users location (usable example). If you have a fairly large number of possible markers, then you'll want to load only those a short distance distance from the user. I would use a bound box for this, so the answer should look something like the following:
var populateViewport = function(mapObect){
var bounds, markers, i, marker;
bounds = {
topLat: outerRound(mapObect.getBounds().getNorthEast().lat()),
topLng: outerRound(mapObect.getBounds().getNorthEast().lng()),
bottomLat: outerRound(mapObect.getBounds().getSouthWest().lat()),
bottomLat: outerRound(mapObect.getBounds().getSouthWest().lng())
};
markers = getMarkersInBounds(bounds);
for(i=0;i<markers.length;i++){
marker = createMarker(markers[i]); // You already have this.
mapObject.addOverlay(marker);
}
return 'Success';
};
var getMarkersInBounds = function(bounds){
/* I have no idea what your tables look like, but this should return the
* markers that have a lat/lng inside your box.
**/
};
var outerRound = function(_float){
/* Conserve resources by rounding outwards. */
return (_float > 0)? Math.ceil(_float) : Math.floor(_float);
};
加载中,请稍侯......
精彩评论