All geek questions in one place

Google Maps Overlay

I have a problem with overlays on google maps.

The problem is that iam uses latitude and longitude from the database to display the overlay but not display 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 help me ................

+1
source share
2 answers

Here is the JSFiddle Demo :

First we create a global variable for storing polyline points:

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

The problem is that you do not feed the polyline with more than one Lat Lng. So, in principle, this is not drawing a polyline, because to create it, it has only one Lat Lng. You need more than one Lat Lng to create some kind of string. So we created a global array called flightPlanCoordinates to track the Lat Lng polyline and push the Lat Lng locations to it in the for loop. At the end of the for loop, we create an overlay of the polyline 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); }

In addition, your information window does not really have anything to show. To open it, there is no associated w / marker event event.

+2
source

Ok, not a complete answer at the moment, but I started working with:

(As usual without JSP code)

Check it out and give it back to me if this is a problem 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
+2
source

Source: https://habr.com/ru/post/1343983/

More articles:


All Articles