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()
{
<%
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())
//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?
Related
I am a beginner at google maps.
I am trying to toggle google map markers based on there type.
When I unchecked the check-box the marker disappears and upon checking it again the markers do not appears back on the map.
I have tried changing setmap to setvisible in toggleGroup function but that also did not worked .
</style>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Beautiful India</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("parsingxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
html = "<div style=\"position: relative; float: left; width: 225px; height: 80px; border: 0px coral solid;\">" + html + "</div>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
markerGroups[type].push(marker);
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
var markerGroups = { "bar": [], "restaurant": [] };
function toggleGroup(type) {
for (var i = 0; i < markerGroups[type].length; i++) {
var marker = markerGroups[type][i];
if (marker.getMap()==null) {
marker.setVisible(true);
} else {
marker.setVisible(false);
}
}
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="panel">
<input type="checkbox" id="bar" onclick="toggleGroup('bar')"CHECKED/>
bar
<input type="checkbox" id="bar" onclick="toggleGroup('restaurant')"CHECKED/>
restaurant
</div>
<div id="map" </div>
</body>
</html>
Your issue:
You are mixing 2 different things here: getMap() and getVisible().
How to use:
To render a marker on the map, use:
marker.setMap(map); // where "map" is your map instance
To remove a marker from the map:
marker.setMap(null);
To show a hidden marker:
marker.setVisible(true);
To hide a marker:
marker.setVisible(false);
How to fix:
You should adapt your toggleGroup function accordingly.
Details:
marker.setMap(null);
marker.setVisible(true); // marker will not be shown since it's not on the map anymore
im currenty undataking a project which includes a google map API!im loading markers on the map using mysql from my database. now what am trying to accomplish is something like this i have seen before http://www.tanesco.co.tz/index.php?option=com_wrapper&view=wrapper&Itemid=155
I want to create a link on the displayed table which when clicked it opens up an info window on the map....I completely have no idea where to start
This is my map code
<?php include("connect.php");
?>
<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" type="text/css" rel="stylesheet" media="screen" />
<title>AzamTv Customer Database</title>
<style type="text/css">
<!--
.style2 {color: #999999}
.style3 {color: #666666}
.style4 {color: #FF0000}
.style5 {color: #3366FF}
-->
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script language="javascript" type="text/javascript">
function downloadUrl(url,callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
//Get element by ID where the function return tand get the latitude and longitude
//do not embed any thing before authorized permition to google.
function load() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
center: new google.maps.LatLng( -6.801859, 39.282503),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("mapxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var licence_number = markers[i].getAttribute("Licence_number");
var phone = markers[i].getAttribute("phone");
var business_image = markers[i].getAttribute("business_image");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
//Creating image
var image_src= "<div><img width='100' height='100' src=' "+ business_image +"' /></div>";
var html = "<b>" +"<h4>Business Name:</h4>"+ name + "</b> <br/><br/>"+"<h4>Address:</h4>" + address + "</b> <br/><br/>"+"<h4>Licence Type:</h4>" + licence_number + "</b> <br/><br/>" + "<h4>Phone:</h4>" + phone + "</b> <br/><br/>"+"<h4>Image:</h4>" + image_src + "</br> Zoom out Zoom in" ;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
//If u wanna change the markers by adding custom ones of ur own add here
var customIcons = {
TIN: {
icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'
},
VAT: {
icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png'
}
};
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
// Pan map center to marker position
map.panTo(marker.getPosition());
var c= map.getZoom()+3;
var maxZoom=map.mapTypes[map.getMapTypeId()].maxZoom;
if(c<=maxZoom){
map.setZoom(c+3);
}
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function doNothing() {}
function zoomout() {
var d = map.getZoom();
if(d>0){
map.setZoom(d-1);
}
// e = map.getCenter();
// map.setZoom(d - 1);
// map.setCenter(e.Longitude, e.Latitude);
// should be: map.setCenter(e.lat(), e.lng());
}
function zoomin() {
var x = map.getZoom();
var maxZoom=map.mapTypes[map.getMapTypeId()].maxZoom;
if(x<maxZoom){
map.setZoom(x+1);
}
// y = map.getCenter();
// map.setZoom(x + 1);
// map.setCenter(y.Longitude, y.Latitude);
// should be: map.setCenter(y.lat(), y.lng());
}
</script>
<script language="javascript" type="text/javascript">
//Script For The Search
function cleartxt()
{
formsearch.searched1.value="";
}
function settxt()
{
if(formsearch.searched1.value=="")
{
formsearch.searched1.value="Search Customer";
}
}
</script>
</head>
<body onLoad="load()">
<div id="map" style="width: 100%; height: 80%"></div>
</body>
</html>
Thank you all in advance
You create markers like
var marker = new google.maps.Marker({
position: myLatlng,
title:"Your title"
});
create links which on click trigger
infowindow.open(map,marker);
thats all i guess.
EDIT: You could identify which marker needs to be shown by href-parameter
I have read though hundreds of posts to the site - all have been very helpful, but I am stuck where so many others have been - closure issues. My map loads, my markers load, but the infamous infowindow is always displaying the last record's data.
http://harvest.cals.ncsu.edu/applications/kim_test/map/map_test.cfm
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 700px; height: 700px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(35.8189, -78.6447),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
<cfquery name="alumniMap" datasource="mydatasource" maxrows="10">
Select MapLatitude, mapLongitude, ID, entity_name
From tbl_jeffScholarsAlumni
Order by ID
</cfquery>
<cfset p = 1>
<cfloop query="alumniMap" >
<cfoutput>
var #toScript(alumniMap.mapLatitude, "latitude")#;
var #toScript(alumniMap.mapLongitude, "longitude")#;
var #toScript(alumniMap.ID, "ncsuID")#;
var #toScript(alumniMap.entity_name, "ncsupeep")#;
var #toScript(p, "thisMark")#;
</cfoutput>
var locations = [
['this is me ' + ncsupeep + '...' , latitude, longitude, thisMark],
];
<cfset p = p + 1>
var infowindow = new google.maps.InfoWindow();
var marker, 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
});
}
for (i = 0; i < locations.length; i++) {
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</cfloop>
</script>
</body>
</html>
Amend this code:
for (i = 0; i < locations.length; i++) {
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
To:
for (i = 0; i < locations.length; i++) {
bindInfoWindow(marker, map, infowindow, locations[i][0]);
}
Add a new function like so:
function bindInfoWindow(marker, map, infowindow, strDescription) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(strDescription);
infowindow.open(map, marker);
});
}
i'm trying to figure out the code shown of this page with the V2 https://google-developers.appspot.com/maps/documentation/javascript/v2/examples/streetview-data?hl=es for the V3 of googlemaps but i can't refresh the position of the orange icon when navigating with the streetview.... any ideas?
Another point... how can i get the actual lat long when navigating on both views?
Here's some code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Zone -</title>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=false">
</script>
<script>
$(function(){
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
initialize();
});
var map;
var myPano;
var panoClient;
var nextPanoId;
var panorama;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var fenwayPark = new google.maps.LatLng(42.345573,-71.098326);
var fenwayPOV = {yaw:370.64659986187695,pitch:-20};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
panoClient = new google.maps.StreetViewService();
//map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(fenwayPark, 15);
google.maps.event.addListener(map, "click", function(overlay, latlng) {
// latlng will be null if the info window has been clicked.
if (latlng) {
panoClient.getNearestPanorama(latlng, showPanoData);
}
});
var panoramaOptions = {
position: fenwayPark,
pov: {
heading: 34,
pitch: -20
}
};
myPano = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
//map.setStreetView(myPano);
myPano.setPano(fenwayPark, fenwayPOV);
google.maps.event.addListener(myPano, "error", handleNoFlash);
panoClient.getPanoramaByLocation(fenwayPark, 50, processSVData);
//myPano.setStreetView(myPano);
}
function processSVData(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
var marker = new google.maps.Marker({
position: data.location.latLng,
map: map,
title: data.location.description
});
google.maps.event.addListener(marker, 'click', function() {
var markerPanoID = data.location.pano;
// Set the Pano to use the passed panoID
myPano.setPano(markerPanoID);
myPano.setPov({
heading: 270,
pitch: 0,
zoom: 1
});
myPano.setVisible(true);
});
}
}
</script>
</head>
<body>
</body>
</html>
I'm trying to display a couple of markers on a Google map, and allow the user to center the map on a marker when they click that marker.
However, when the user clicks on any marker, the map always centers on the last marker I create in my code.
Here is the full code I am using:
<!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: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34, 150),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var myLatLng = new google.maps.LatLng(34,-150);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title:'test' + 1
});
google.maps.event.addListener(marker, 'click', function(){map.setCenter(marker.getPosition());});
myLatLng = new google.maps.LatLng(20,-87);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title:'test' + 2
});
google.maps.event.addListener(marker, 'click', function(){map.setCenter(marker.getPosition());});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Spent a while on this, consulting the Google maps api references, but just cannot figure out why it is not working.
Any insights appreciated - thanks.
mMap.setOnMarkerClickListener(new OnMarkerClickListener()
{
#Override
public boolean onMarkerClick(Marker marker)
{
int yMatrix = 200, xMatrix =40;
DisplayMetrics metrics1 = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics1);
switch(metrics1.densityDpi)
{
case DisplayMetrics.DENSITY_LOW:
yMatrix = 80;
xMatrix = 20;
break;
case DisplayMetrics.DENSITY_MEDIUM:
yMatrix = 100;
xMatrix = 25;
break;
case DisplayMetrics.DENSITY_HIGH:
yMatrix = 150;
xMatrix = 30;
break;
case DisplayMetrics.DENSITY_XHIGH:
yMatrix = 200;
xMatrix = 40;
break;
case DisplayMetrics.DENSITY_XXHIGH:
yMatrix = 200;
xMatrix = 50;
break;
}
Projection projection = mMap.getProjection();
LatLng latLng = marker.getPosition();
Point point = projection.toScreenLocation(latLng);
Point point2 = new Point(point.x+xMatrix,point.y-yMatrix);
LatLng point3 = projection.fromScreenLocation(point2);
CameraUpdate zoom1 = CameraUpdateFactory.newLatLng(point3);
mMap.animateCamera(zoom1);
marker.showInfoWindow();
return true;
}
});