CODEWITHSUNDEEP
javascriptgoogle-maps
Pradeep Neo
Pradeep Neo

Reputation: 161

Overlay in google maps

I have a problem with overlays in google maps.

the problem is iam using latitude and longitude from the database to display overlay but its not showing the overlay

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*" %>
            <%
                Connection connection = null;
                boolean foundResults = false;
                ResultSet set = null;
                Statement statement = null;         
                String lat=null;
                String lng=null;
            %>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 
var map;
function initialize()
{
    var myLatLng = new google.maps.LatLng(18.9, 72.8);   
    var myOptions = {
                        zoom: 11,
                        center: myLatLng,
                        mapTypeId: google.maps.MapTypeId.TERRAIN
                    };    
    map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);   
    see();
    }
    function see()
    {
        <%
                    int count=0;
                    try 
                    {
                        Class.forName("org.postgresql.Driver");
                        connection = DriverManager.getConnection("jdbc:postgresql://localhost:5432/postgres","postgres", "password");
                        statement = connection.createStatement();
                        set = statement.executeQuery("SELECT count(lat) from latng");
                        while(set.next())
                        {
                            count = set.getInt(1);
                        }
                    }
                    catch(Exception e)
                    {
                    }
            %>
        var locations = new Array(<%= count%>);
        for(i = 0; i < locations.length; i++)
        {
            locations[i] = new Array(<%= count%>);
        }
        <%
            int i=0;
            try
            {
                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 latng");
                while(set.next())
                {
                    lat=set.getString(1);
                    lng=set.getString(2);
        %>
                    locations[<%= i %>][0]=<%= lat%>;
                    locations[<%= i %>][1]=<%= lng%>;   
                    <%
                        i++;
                }
                    %>
                    var i;
                    var infowindow = new google.maps.InfoWindow();
                    var marker;
                    for (i = 0; i < locations.length; i++)
                    {
                        marker = new google.maps.Marker({position: new google.maps.LatLng(locations[i][0],locations[i][1]),map: map});

                            var flightPlanCoordinates=[new google.maps.LatLng(locations[i][0],locations[i][1])];
                            var flightPath = new google.maps.Polyline({
                                                                    path: flightPlanCoordinates,
                                                                    strokeColor: "#FF0000",
                                                                    strokeOpacity: 1.0,
                                                                    strokeWeight: 2
                                                                });
                            flightPath.setMap(map);
                    }
        <%

            }
            catch(Exception e)
            {
            }
        %>
    }
</script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width=100%; height:80%"></div>
</body>
</html>

Thanks please some one help me...............

Upvotes: 1

Views: 2168

Answers (2)

KJYe.Name
KJYe.Name

Reputation: 17179

Here is the JSFiddle Demo:

First we create a global variable to hold our polyline points:

var flightPlanCoordinates = [];  //global array to track our Lat Lng needed to plot the polyline

The issue you have is that you aren't feeding the polyline more than one Lat Lng. So, basically, it's not drawing a polyline, because it only has one Lat Lng to create it. You need more than one Lat Lng to create a line of some sort. Thus, we created a global array called flightPlanCoordinates to track the Lat Lng of the polyline, and pushes the locations Lat Lng to it with in the for loop. After the for loop is over we then create the polyline overlay and set it with the current map:

function see() {
    var locations = new Array(3); //(<%= count%>);
    for (i = 0; i < locations.length; i++) {
        locations[i] = new Array(2); //This one is wrong!! (<%= count%>);
    }

    for (i = 0; i < locations.length; i++) {
        locations[i][0] = 18.9 + i / 100;
        locations[i][1] = 72.8 + i / 100;
    }

    var i;
    var infowindow = new google.maps.InfoWindow();
    var marker;
    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][0], locations[i][1]),
            map: map
        });

        //pushing Lat Lng to use to create polyline
        flightPlanCoordinates.push(new google.maps.LatLng(locations[i][0], locations[i][1]));
    }

    var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    flightPath.setMap(map);
}

Further note, your info window doesn't really have anything to show for. There's no click event associate w/ marker to open it.

Upvotes: 2

M&#39;vy
M&#39;vy

Reputation: 5774

Ok, not a full answer for the moment but I got a working thing to begin with :

(As usual without JSP code)

Check it, and feed me back if this would be a problematic case in your scenario. 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 
var map;
function initialize()
{
    var myLatLng = new google.maps.LatLng(18.9, 72.8);   
    var myOptions = {
                        zoom: 11,
                        center: myLatLng,
                        mapTypeId: google.maps.MapTypeId.TERRAIN
                    };    
    map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);   
    see();
}

    function see()
    {

        var locations = new Array(3); //(<%= count%>);
        for(i = 0; i < locations.length; i++)
        {
            locations[i] = new Array(2); //This one is wrong!! (<%= count%>);
        }


    for(i = 0; i < locations.length; i++) {
                    locations[i][0]=18.9 + i/100;
            locations[i][1]=72.8 + i/100; 
    }


                    var i;
                    var infowindow = new google.maps.InfoWindow();
                    var marker;
                    for (i = 0; i < locations.length; i++)
                    {
                        marker = new google.maps.Marker({position: new google.maps.LatLng(locations[i][0],locations[i][1]),map: map});

                            var flightPlanCoordinates=[new google.maps.LatLng(locations[i][0],locations[i][1])];
                            var flightPath = new google.maps.Polyline({
                                                                    path: flightPlanCoordinates,
                                                                    strokeColor: "#FF0000",
                                                                    strokeOpacity: 1.0,
                                                                    strokeWeight: 2
                                                                });
                            flightPath.setMap(map);
                    }


    }
</script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width=100%; height:80%"></div>
</body>
</html

Upvotes: 2

Related Questions