I've made the route on the map. The route generated using some coordinates which completed with additional information (speed). I want when the route is hover, a tooltip will appear and showing information (speed) at those coordinates. I confuse how to display the tooltip of speed.
<html>
<head>
<title>Polyline Route v3 Example</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var locations = [
{"speed":"13","lat":"-6.246192976751192","lon":"106.79324626922607"}, {"speed":"33","lat":"-6.245723710157699","lon":"106.79603576660156"}, {"speed":"23","lat":"-6.245723710157699","lon":"106.79796695709229"}, {"speed":"43","lat":"-6.243334710069922","lon":"106.79800987243652"},
{"speed":"12","lat":"-6.245723810157699","lon":"106.79796725709229"}, {"speed":"1","lat":"-6.245723860157699","lon":"106.79796735709229"}, {"speed":"45","lat":"-6.245723890157699","lon":"106.79797755709229"}, {"speed":"21","lat":"-6.245723910157699","lon":"106.79797895709229"}
];
var map;
function createRouteMap(){
var listRoute = [];
for (var i = 0; i < locations.length; i++) {
listRoute.push(new google.maps.LatLng(locations[i].lat, locations[i].lon));
}
var mapOptions = {
zoom: 16,
center: listRoute[Math.ceil(listRoute.length/2)],
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
showMap(listRoute);
createMarkers(locations);
}
function showMap(listRoute){
if((listRoute.length < 1) || (listRoute == null)){
jQuery("#map_canvas").html('<div class="alert alert-info"> <strong>Empty Trail!</strong> This trip still has no trail </div>'+
'<div class="btn-toolbar"> <p><code>The gps device </code>in the car still not sent position!</p> </div>');
}else{
var flightPath = new google.maps.Polyline({
path: listRoute,
strokeColor: "#FF0000",
strokeOpacity: 5,
strokeWeight: 3.7
});
flightPath.setMap(map);
}
}
function createMarkers(locations) {
for (var i = 0; i < locations.length; i++) {
var point = locations[i];
var myLatLng = new google.maps.LatLng(point.lat, point.lon);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'greencirclemarker.png',
title: point.speed
});
}
}
$(document).ready(function() {
createRouteMap();
});
</script>
</head>
<body>
<div id="map_canvas" style="height:400px; border:1px 00f solid;"></div>
</body>
</html>
Your "speeds" are associated with points. You have a couple of options:
add markers and display the speed on mouseover of the marker (or as a tooltip of the marker)
render each segment of the line as a separate polyline with its own mouseover event handler. You will need to specify how to apply the speeds to the line segments. There are more complicated ways to do it with a single polyline, but with a mouseover event may have performance issues.
Related
I'm trying to show directional points with poly line in google maps API but it creates a error. Anybody help to solve this problem.
Error: polyline-map.php:50 Uncaught ReferenceError: google is not defined
at polyline-map.php:50
<div id="map_canvas" style="height:400px; width:400px"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var map;
var polyline;
var markers = [ new google.maps.LatLng(17.43495, 78.50898333),
new google.maps.LatLng(17.43495, 78.50898333),
new google.maps.LatLng(17.43938333, 78.52168333),
new google.maps.LatLng(17.43708333, 78.52925),
new google.maps.LatLng(17.4366, 78.53336667)
];
function init() {
var directionsService = new google.maps.DirectionsService();
var moptions = {
center: new google.maps.LatLng(17.43938333, 78.52168333),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), moptions);
var iconsetngs = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
var polylineoptns = {
strokeOpacity: 0.8,
strokeWeight: 3,
map: map,
icons: [{
repeat: '70px', //CHANGE THIS VALUE TO CHANGE THE DISTANCE BETWEEN ARROWS
icon: iconsetngs,
offset: '100%'}]
};
polyline = new google.maps.Polyline(polylineoptns);
var z = 0;
var path = [];
path[z] = polyline.getPath();
for (var i = 0; i < markers.length; i++) //LOOP TO DISPLAY THE MARKERS
{
var pos = markers[i];
var marker = new google.maps.Marker({
position: pos,
map: map
});
path[z].push(marker.getPosition()); //PUSH THE NEWLY CREATED MARKER'S POSITION TO THE PATH ARRAY
}
}
window.onload = init;
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=init">
</script>
When you load the Google Maps Javascript API v3 asynchronously (async defer &callback=init), you can't use any of the google.maps namespace until it has loaded (when the callback function runs).
If you want to define the coordinates for your polyline outside of the init function, use LatLngLiteral anonymous objects:
Change:
var markers = [ new google.maps.LatLng(17.43495, 78.50898333),
new google.maps.LatLng(17.43495, 78.50898333),
new google.maps.LatLng(17.43938333, 78.52168333),
new google.maps.LatLng(17.43708333, 78.52925),
new google.maps.LatLng(17.4366, 78.53336667)
];
To:
var markers = [ {lat:17.43495,lng: 78.50898333},
{lat:17.43495,lng: 78.50898333},
{lat:17.43938333,lng: 78.52168333},
{lat:17.43708333,lng: 78.52925},
{lat:17.4366,lng: 78.53336667}
];
proof of concept fiddle
code snippet:
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
<div id="map_canvas"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var map;
var polyline;
var markers = [ {lat:17.43495,lng: 78.50898333},
{lat:17.43495,lng: 78.50898333},
{lat:17.43938333,lng: 78.52168333},
{lat:17.43708333,lng: 78.52925},
{lat:17.4366,lng: 78.53336667}
];
function init() {
var directionsService = new google.maps.DirectionsService();
var moptions = {
center: new google.maps.LatLng(17.43938333, 78.52168333),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), moptions);
var iconsetngs = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
var polylineoptns = {
strokeOpacity: 0.8,
strokeWeight: 3,
map: map,
icons: [{
repeat: '70px', //CHANGE THIS VALUE TO CHANGE THE DISTANCE BETWEEN ARROWS
icon: iconsetngs,
offset: '100%'
}]
};
polyline = new google.maps.Polyline(polylineoptns);
var z = 0;
var path = [];
path[z] = polyline.getPath();
for (var i = 0; i < markers.length; i++) //LOOP TO DISPLAY THE MARKERS
{
var pos = markers[i];
var marker = new google.maps.Marker({
position: pos,
map: map
});
path[z].push(marker.getPosition()); //PUSH THE NEWLY CREATED MARKER'S POSITION TO THE PATH ARRAY
}
}
window.onload = init;
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=init">
</script>
I have a map where there can be n number of marker plotted on the google map, when the user draw the polygon on the map I need to know the makers plotted inside the polygon.
I tried to draw the polygon on the map which is as shown below
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"> </script>
<style>
html,body{height:100%;margin:0}
#map_canvas{height:90%;}
</style>
<script>
function initialize() {
var myLatLng = {lat: 52.5498783, lng: 13.425209099999961};
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(52.5498783, 13.425209099999961),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
google.maps.event.addDomListener(map.getDiv(),'mousedown',function(e){
//do it with the right mouse-button only
if(e.button!=2)return;
//the polygon
poly=new google.maps.Polyline({map:map,clickable:false});
//move-listener
var move=google.maps.event.addListener(map,'mousemove',function(e){
poly.getPath().push(e.latLng);
});
//mouseup-listener
google.maps.event.addListenerOnce(map,'mouseup',function(e){
google.maps.event.removeListener(move);
var path=poly.getPath();
poly.setMap(null);
poly=new google.maps.Polygon({map:map,path:path});
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
Use the right mouse-button to draw an overlay<br/>
<div id="map_canvas"></div>
</body>
</html>
use right mouse button to draw
for now I have only one marker, how to find the number of markers inside the polygon and their latitude and longitude the polygons can be of any shape on the map.
You could utilize containsLocation() function to determine whether marker is located inside a polygon or not.
This example draws a green polygon when the marker falls outside of the specified polygon, and a red polygon when the marker falls inside the polygon.
function initialize() {
var myLatLng = { lat: 52.5498783, lng: 13.425209099999961 };
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(52.5498783, 13.425209099999961),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
google.maps.event.addDomListener(map.getDiv(), 'mousedown', function (e) {
//do it with the right mouse-button only
if (e.button != 2) return;
//the polygon
var poly = new google.maps.Polyline({ map: map, clickable: false });
//move-listener
var move = google.maps.event.addListener(map, 'mousemove', function (e) {
poly.getPath().push(e.latLng);
});
//mouseup-listener
google.maps.event.addListenerOnce(map, 'mouseup', function (e) {
google.maps.event.removeListener(move);
var path = poly.getPath();
poly.setMap(null);
poly = new google.maps.Polygon({ map: map, path: path });
var resultColor = google.maps.geometry.poly.containsLocation(marker.getPosition(), poly) ? 'green' : 'red';
poly.setOptions({ fillColor: resultColor, strokeOpacity: 0.5 });
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body {
height: 100%;
margin: 0;
}
#map_canvas {
height: 90%;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&libraries=geometry"> </script>
Use the right mouse-button to draw an overlay<br />
<div id="map_canvas"></div>
To get the number of markers inside the polygon, one option is to keep references to them in array, then iterate through that array checking to see if the marker is in the polygon or not. To determine if a marker is inside the polygon, the geometry library poly namespace method containsLocation can be used:
var markerCnt = 0;
for (var i = 0; i < markers.length; i++) {
if (google.maps.geometry.poly.containsLocation(markers[i].getPosition(), poly)) {
markerCnt++;
}
}
document.getElementById('numberMarkers').innerHTML += "There are " + markerCnt + " markers in the polygon<br>";
proof of concept fiddle
code snippet:
var markers = [];
function initialize() {
var myLatLng = {
lat: 52.5498783,
lng: 13.425209099999961
};
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(52.5498783, 13.425209099999961),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
markers.push(marker);
google.maps.event.addListener(map, 'bounds_changed', makeRandomMarkers);
var poly;
google.maps.event.addDomListener(map.getDiv(), 'mousedown', function(e) {
//do it with the right mouse-button only
if (e.button != 2) return;
//the polygon
if (poly && poly.setMap) {
poly.setMap(null);
}
poly = new google.maps.Polyline({
map: map,
clickable: false
});
//move-listener
var move = google.maps.event.addListener(map, 'mousemove', function(e) {
poly.getPath().push(e.latLng);
});
//mouseup-listener
google.maps.event.addListenerOnce(map, 'mouseup', function(e) {
google.maps.event.removeListener(move);
var path = poly.getPath();
poly.setMap(null);
poly = new google.maps.Polygon({
map: map,
path: path
});
var markerCnt = 0;
for (var i = 0; i < markers.length; i++) {
if (google.maps.geometry.poly.containsLocation(markers[i].getPosition(), poly)) {
markerCnt++;
}
}
document.getElementById('numberMarkers').innerHTML = "There are " + markerCnt + " markers in the polygon<br>";
});
});
}
function getRandom(min, max) {
return Math.random() * (max - min + 1) + min;
}
google.maps.event.addDomListener(window, 'load', initialize);
function makeRandomMarkers() {
var bounds = map.getBounds();
var maxLat = bounds.getNorthEast().lat(); // 70;
var minLat = bounds.getSouthWest().lat(); // 37;
var maxLong = bounds.getNorthEast().lng(); // 50;
var minLong = bounds.getSouthWest().lng(); // -8;
for (var j = 0; j < 50; j++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(getRandom(minLat, maxLat),
getRandom(minLong, maxLong)),
map: map
});
markers.push(marker);
}
}
html,
body {
height: 100%;
margin: 0
}
#map_canvas {
height: 90%;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
Use the right mouse-button to draw an overlay
<br/>
<div id="numberMarkers"></div>
<div id="map_canvas"></div>
below is the code for displaying a Google map with multiple markers. The markers data is coming from DB so it can contain 1 location or multiple locations.
For multiple markers the map is centered and auto zoomed. The problem is if there is only 1 marker , the map zoom in to maximum level. Can someone guide me how to fix the zooming for single marker.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = <?php echo $marker;?>;
$(document).ready(function() {
// Handler for .ready() called.
initializeMaps();
});
function initializeMaps() {
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
zoom: 6
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
map.setCenter(pos);
if(i==0){
map.setZoom(5);
}
bounds.extend(pos);
marker = new google.maps.Marker({
position: pos,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
//alert('asdfsdfdsaf');
}
})(marker, i));
}
map.fitBounds(bounds);
}
</script>
<div id="map_canvas" style="width:100%; height:400px"></div>
call map.fitBounds(bounds) only when there are more than 1 marker
How can I show or hide markers of different groups (Let's say Bars/Cinemas/Parking) , by clicking on a HTML element (a Checkbox in this case)?
my markers are generated into an array from a loop, like this:
markers[i] = new google.maps.Marker({
numero : i,
position: latLng,
map: map,
info: data.Description,
group: data.category,
});
I think I should use :
An onclick on my HTML element, with a Js function.
This Js function should contain this Gmaps Method
setVisible
Like this:
google.maps.event.addListener(marker, 'click', function() {
marker.setVisible(false); // maps API hide call
});
and a Event Trigger :
google.maps.event.trigger(markers[i], 'click');
But now how can I mix this stuff together?
Close. Assuming markers holds an array of all the markers in a given group, you might create an onchange handler for the checkbox that will hide all of the markers in the group like so. In your HTML:
<input id="myCheckbox" type="checkbox" checked="checked" />
And sometime later, in your script,
// handler
function onClickHandler (e) {
var i = 0, marker;
var visible = e.target.checked; // show if checked, otherwise hide
while (marker = markers[i++]) {
marker.setVisible(visible); // maps API hide call
}
}
// bind handler to checkbox.
document.getElementById('myCheckbox').onchange = onClickHandler;
For reference, check out this fiddle.
Concept is so simple. Just define global array for marker. push all markers and onchange event show/hide the marker. Checkout following code
S##################################NI
<!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>
<title>Test</title>
<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script>
</head>
<body>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript">
function initialize()
{
//SANI: Show hide ker marker
//SANI: Add ker Map
var myLatlng = new google.maps.LatLng(31.553710, 74.358446); //SANI: Lahore di location
var mapOptions = {
zoom: 12,
center: myLatlng,
mapTypeControl: true,
mapTypeControlOptions: { //SANI: Map da style ki hovy
//style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
//mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
mapTypeIds: google.maps.MapTypeId.ROADMAP
},
navigationControl: true,
}
var currentmap = new google.maps.Map(document.getElementById('mapbySani'), mapOptions);
/****************************************************************************************/
var arrMarkers = [];
var markers = [
[31.552174,74.360012,"Info for first marker"],
[31.550547,74.371599,"Info for second marker"],
[31.549943,74.380289,"Info for last marker"]
];
for(var i=0; i < markers.length; i++)
{
var latLng = new google.maps.LatLng(markers[i][0], markers[i][1]); //SANI: sari location lai loop ich
var contentString = markers[i][2]; //SANI: info text vi lya
var infowindow = new google.maps.InfoWindow({content: contentString}); //SANI: info winsow bani
var marker = new google.maps.Marker({
position: latLng,
map: currentmap
}); //SANI: marker lay sary
google.maps.event.addListener(marker, 'click', function()
{
infowindow.open(currentmap,marker);
});
//SANI: marker dy click ty info window show krai
//console.log(marker);
arrMarkers.push(marker);
}
//SANI: show hide ker on click listener ty
$("#allmarkers").change(function()
{
if(this.checked)
{
//marker.setVisible(true);
if (arrMarkers)
{
for( var i = 0, n = arrMarkers.length; i < n; ++i )
{
arrMarkers[i].setVisible(true);
}
}
}else{
if (arrMarkers)
{
for( var i = 0, n = arrMarkers.length; i < n; ++i )
{
arrMarkers[i].setVisible(false);
}
}
}
});
/******************************************************************************************/
//SANI: add ker marker
//addMarker(myLatlng, currentmap);
/******************************************************************************************/
//SANI: add ker polygon
/* var zone1;
var triangleCoords = [
new google.maps.LatLng(25.05730, 55.27144),
new google.maps.LatLng(25.05854, 55.28526),
new google.maps.LatLng(25.05676, 55.28741),
new google.maps.LatLng(25.05357, 55.28741),
new google.maps.LatLng(25.04486, 55.27213),
new google.maps.LatLng(25.04455, 55.25642),
new google.maps.LatLng(25.04284, 55.25342),
new google.maps.LatLng(25.05147, 55.24947),
new google.maps.LatLng(25.05528, 55.25419),
new google.maps.LatLng(25.05738, 55.27153)
];
addPolygon(zone1, triangleCoords, currentmap);*/
}
google.maps.event.addDomListener(window, 'load', initialize); //SANI: Window dy load ty map show ker dy
/* //SANI: S############################# //SANI: Skeleton ################################NI */
function addMarker(keriJagaTy, KeryMapTy)
{
var marker = new google.maps.Marker({
position: keriJagaTy,
map: KeryMapTy,
title: 'Marker added by Sani',
//SANI: jay apni merzi da icon show kerna wa ty
icon:'images/client.png'
});
}
function addPolygon(keraZone, KerijagaTy, KeryMapTy)
{
keraZone = new google.maps.Polygon({
paths: KerijagaTy,
strokeColor: "#3299CC",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#3299CC",
fillOpacity: 0.05
});
keraZone.setMap(KeryMapTy);
}
/* //SANI: S############################# //SANI: END Skeleton ################################NI */
</script>
<div>
<table>
<tr>
<td><input type="checkbox" value="marker" id="allmarkers" /><label>Marker</label></td>
</tr>
</table>
</div>
<div id="mapbySani" style="width: 100%; height: 600px;"></div>
</body>
</html>
S##################################NI
thanks
I have never worked with Google maps API.
For the school project I am working on; I need to get a direction between two locations (this is easy part and I think I can do this),
However I also need to put an X mark; at every 10 miles along the way.
Is this even possible?
Thank You.
Ok, here's a working solution that draws markers every 200 miles (I was working on big distances to check it worked on geodesic curved lines, which it does). To make this work for you, just change all the coordinates, and change 200 to 10
<!DOCTYPE html>
<html>
<head>
<title>lines with markers every x miles</title>
<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>
<!--- need to load the geometry library for calculating distances, see http://www.svennerberg.com/2011/04/calculating-distances-and-areas-in-google-maps-api-3/ --->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var startLatlng = new google.maps.LatLng(54.42838,-2.9623);
var endLatLng = new google.maps.LatLng(52.908902,49.716793);
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(51.399206,18.457031),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var startMarker = new google.maps.Marker({
position: startLatlng,
map: map
});
var endMarker = new google.maps.Marker({
position: endLatLng,
map: map
});
// draw a line between the points
var line = new google.maps.Polyline({
path: [startLatlng, endLatLng],
strokeColor: "##FF0000",
strokeOpacity: 0.5,
strokeWeight: 4,
geodesic: true,
map: map
});
// what's the distance between these two markers?
var distance = google.maps.geometry.spherical.computeDistanceBetween(
startLatlng,
endLatLng
);
// 200 miles in meters
var markerDistance = 200 * 1609.344;
var drawMarkers = true;
var newLatLng = startLatlng;
// stop as soon as we've gone beyond the end point
while (drawMarkers == true) {
// what's the 'heading' between them?
var heading = google.maps.geometry.spherical.computeHeading(
newLatLng,
endLatLng
);
// get the latlng X miles from the starting point along this heading
var newLatLng = google.maps.geometry.spherical.computeOffset(
newLatLng,
markerDistance,
heading
);
// draw a marker
var newMarker = new google.maps.Marker({
position: newLatLng,
map: map
});
// calculate the distance between our new marker and the end marker
var newDistance = google.maps.geometry.spherical.computeDistanceBetween(
newLatLng,
endLatLng
);
if (newDistance <= markerDistance) {
drawMarkers = false;
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>