We Keep Coding

Add marker with label in google map's every end of polyline

I've multiple polylines, I want a marker on every end and start of polyline with a label, I am tracking bike movement, I am getting the polyline but i need to display the time on poly line or on the end point, if i can show the time in the polyline it would be great. I am developing a tracking system, i am getting the lat long, of start and end points i am also abple to draw polylines, i want to display time on the polyline or at least display a marker on every end and show the time... below is my code
var bikearray = [];
$('#searchbtn').on('click', function() {
$.ajax({
url:'http://metrobikes.in/api/a2b-bike-movement-on-map',
method:"GET",
data : {
start_Date : "2017-12-11",
end_date : "2018-01-24",
bike_number : "KA-51-D-6109"
},
}).done(function(data){
bikearray = data.result.data;
initMap();
});
});
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(12.98966, 77.653637),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
for(i = 0; i < bikearray.length; i++){
var from_lat = parseFloat(bikearray[i].from_lat);
var from_long = parseFloat(bikearray[i].from_long);
var to_lat = parseFloat(bikearray[i].to_lat);
var to_long =parseFloat(bikearray[i].to_long);
var linecolor = bikearray[i].colour;
console.log(bikearray[i].from_lat);
var bikePath = new google.maps.Polyline({
path: [
{lat: from_lat, lng: from_long},
{lat: to_lat, lng: to_long}
],
icons: [{
icon: lineSymbol,
repeat:'35px',
offset: '100%'
}],
geodesic: true,
strokeColor: linecolor,
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
bikePath.setMap(map);
}
}

To add a marker to the beginning and end of the polyline, add a marker to the beginning point and to the ending point. To add the time in an InfoWindow on the end marker, add that as well (and trigger a click on it to open it):
for(i = 0; i < bikearray.length; i++){
var from_lat = parseFloat(bikearray[i].from_lat);
var from_long = parseFloat(bikearray[i].from_long);
var startMarker = new google.maps.Marker({
map: map,
position: {lat: from_lat, lng: from_long}
});
var to_lat = parseFloat(bikearray[i].to_lat);
var to_long =parseFloat(bikearray[i].to_long);
var endMarker = new google.maps.Marker({
map: map,
position: {lat: to_lat, lng: to_long}
});
var time = bikearray[i].time;
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(endMarker, 'click', (function(marker, time, infowindow) {
return function(evt) {
infowindow.setContent(time);
infowindow.open(map, marker);
}})(endMarker, time, infowindow));
google.maps.event.trigger(endMarker, 'click');
var linecolor = bikearray[i].colour;
proof of concept fiddle
code snippet:
var bikearray = [{
from_lat: 12.98966,
from_long: 77.653637,
to_lat: 12.9715987,
to_long: 77.5945626,
colour: "blue",
time: "12:00"
},
{
from_lat: 13.0826802,
from_long: 80.2707184,
to_lat: 12.9922145,
to_long: 77.7159,
colour: "red",
time: "11:00"
},
]
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(12.98966, 77.653637),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
for (i = 0; i < bikearray.length; i++) {
var from_lat = parseFloat(bikearray[i].from_lat);
var from_long = parseFloat(bikearray[i].from_long);
var startMarker = new google.maps.Marker({
map: map,
position: {
lat: from_lat,
lng: from_long
}
});
var to_lat = parseFloat(bikearray[i].to_lat);
var to_long = parseFloat(bikearray[i].to_long);
var endMarker = new google.maps.Marker({
map: map,
position: {
lat: to_lat,
lng: to_long
}
});
var time = bikearray[i].time;
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(endMarker, 'click', (function(marker, time, infowindow) {
return function(evt) {
infowindow.setContent(time);
infowindow.open(map, marker);
}
})(endMarker, time, infowindow));
google.maps.event.trigger(endMarker, 'click');
var linecolor = bikearray[i].colour;
console.log(bikearray[i].from_lat);
var bikePath = new google.maps.Polyline({
path: [
{
lat: from_lat,
lng: from_long
},
{
lat: to_lat,
lng: to_long
}
],
icons: [{
icon: lineSymbol,
repeat: '35px',
offset: '100%'
}],
geodesic: true,
strokeColor: linecolor,
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
bikePath.setMap(map);
}
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

Looks like this was already answered in Text Within Polyline Google Maps V3
One solution would be using this library from github:
https://github.com/googlemaps/js-map-label
You could use it like this:
var labelPosition = new google.maps.LatLng(middle_lat, middle_long);
var mapLabel = new MapLabel({
text: "Your text",
position: labelPosition ,
map: map,
fontSize: 12
});
You would have to calculate the Middle-Point between the two points.

Fill variable with values from click event

I am trying to make a routeplanner which allows users to click on random points on the map and create a route.
Now I'm having some trouble getting the values into the polyline variable.
I have searched around on Google but I can't seem to find a way to keep adding values on top of already existing values. These values come from the click event on the map.
So how do I add values to a variable with the same format on each click event?
function initMap() {
var location = {
lat: 51.3554957,
lng: 5.4533268000000135
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: location
});
google.maps.event.addListener(map, "click", function(event) {
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
console.log(latitude + ', ' + longitude);
});
var flightPlanCoordinates = [{
lat: 37.772,
lng: -122.214
},
{
lat: 21.291,
lng: -157.821
},
{
lat: -18.142,
lng: 178.431
},
{
lat: -27.467,
lng: 153.027
}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 600px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpQwkFGfliyQ_B52NBJFEyQd1_fD8gV6g&callback=initMap">
</script>
</body>
</html>
Expected result (4 clicks):
var flightPlanCoordinates = [{
lat: 37.772,
lng: -122.214
},
{
lat: 21.291,
lng: -157.821
},
{
lat: -18.142,
lng: 178.431
},
{
lat: -27.467,
lng: 153.027
}
];

Take a look at the following:
function initMap() {
var flightPlanCoordinates = [];
var location = {
lat: 51.3554957,
lng: 5.4533268000000135
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: location
});
google.maps.event.addListener(map, "click", function(event) {
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
console.log(latitude + ', ' + longitude);
flightPlanCoordinates.push({lat: latitude, lng: longitude});
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
});
}
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 600px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpQwkFGfliyQ_B52NBJFEyQd1_fD8gV6g&callback=initMap">
</script>
</body>
</html>

How to make google Map Api polyline with pin?

I've been created polyline maps like this
but I want set pin in every point...
like this one :
How i can do that?
this is my javascript's code...
<script>
latawal = <?php echo json_encode($locationawal['lat'])?>;
longawal = <?php echo json_encode($locationawal['lon'])?>;
var GoogleMaps = function () {
var mapPolylines = function() {
var map = new GMaps({
div: '#gmap_polylines',
lat: latawal,
lng: longawal,
click: function(e){
console.log(e);
}
});
path = [
<?php foreach ($locationawal10 as $row){ ?>
[<?php echo json_encode($row['lat'])?>, <?php echo json_encode($row['lon'])?>],
<?php } ?>
];
map.drawPolyline({
path: path,
strokeColor: 'Red',
strokeOpacity: 0.6,
strokeWeight: 4
});
}
return {
//main function to initiate map samples
init: function () {
mapPolylines();
}
};
}();
</script>
Thanks before.... I hope someone can help me about this... sorry for my bad english..

It seems you need to make multiple markers. You will be using the latlang values from your latawal and longawal json files for each marker as LatLng values for the markers. Check this SO thread for additional reference.
I did a quick demo for you to convey the idea. You may need to modify parts which needs cleaner coding. This is the relevant part:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 0, lng: -180},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var flightPlanCoordinates = [
{lat: -32.342841, lng: 119.882813},
{lat: -32.194209, lng: 144.492188},
{lat: -19.248922, lng: 145.546875},
{lat: -18.916680, lng: 124.804688}
];
var markerCoordinates = [
[-32.342841, 119.882813],
[-32.194209, 144.492188],
[-19.248922, 145.546875],
[-18.916680, 124.804688]
];
var marker, i;
for (i = 0; i < markerCoordinates.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(markerCoordinates[i][i-i], markerCoordinates[i][1]),
map: map,
title: 'Hello World!'
});
}
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
This is what it looks like:
It would defintely help if you read the docs about Markers too.

Simplest solution is to process the path and add markers at each vertex.
for (var i=0; i<path.length; i++) {
map.addMarker({
lat: path[i].lat,
lng: path[i].lng,
})
}
proof of concept fiddle
code snippet:
function initialize() {
latawal = 41.5;
longawal = -72.4;
var GoogleMaps = function() {
var mapPolylines = function() {
var map = new GMaps({
div: '#gmap_polylines',
lat: latawal,
lng: longawal,
zoom: 8,
click: function(e) {
console.log(e);
}
});
path = [{
lat: 42,
lng: -72
}, {
lat: 41,
lng: -72.4
}, {
lat: 41.5,
lng: -72.6
}];
map.drawPolyline({
path: path,
strokeColor: 'Red',
strokeOpacity: 0.6,
strokeWeight: 4
});
for (var i = 0; i < path.length; i++) {
map.addMarker({
lat: path[i].lat,
lng: path[i].lng,
})
}
}
return {
//main function to initiate map samples
init: function() {
mapPolylines();
}
};
}();
GoogleMaps.init();
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#gmap_polylines {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js"></script>
<div id="gmap_polylines"></div>

Is my javascript good for google maps API?

I'm using squarespace to build my website and want to insert a custom map from google maps javascript api. I've followed tutorial from W3school and from Google's own tutorial to build my map and follow steps as below :
What I'm trying to archive is a map like this
google map example
Step 1: Insert a embed block for html
<div id= "map"></div>
Step 2: insert javascript in page header
<script
src="http://maps.google.cn/maps/api/js?key=my-key">
</script>
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById(‘map'), {
zoom: 12,
center: {lat: 48.877412, lng: 2.359221},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Define the LatLng coordinates for the polygon's path.
var 10th = [
{lat: 48.883863, lng: 2.349500},
{lat: 48.870752, lng: 2.347915},
{lat: 48.867593, lng: 2.363981},
{lat: 48.872958, lng: 2.377065},
{lat: 48.877800, lng: 2.370605},
{lat: 48.882765, lng: 2.370164},
{lat: 48.884218, lng: 2.368480},
{lat: 48.884670, lng: 2.360258},
{lat: 48.883863, lng: 2.349500}
];
// Construct the polygon.
var 10th = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
10th.setMap(map);
}
</script>
Step 3 : in custom css section
#googleMap {
width: 100%;
height: 380px;
}
But so far, I got either a blank page once javascript injected or error page (with code visible on top of the page... )
Here the link to my webpage on SquareSpace https://handa-cheng-a3wm.squarespace.com/1starrondissement
Thanks !

You have few typos in your code:
var 10th = [...] // invalid variable name
^---
Variables names in JavaScript must not begin with numbers. And you have defined the function but didn't run it.
You have not set height for #map in css.
<div id= "map"></div>
#googleMap { // <== this is not correct id as used in html above
width: 100%;
height: 380px;
}
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 48.877412, lng: 2.359221},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Define the LatLng coordinates for the polygon's path.
var points = [
{lat: 48.883863, lng: 2.349500},
{lat: 48.870752, lng: 2.347915},
{lat: 48.867593, lng: 2.363981},
{lat: 48.872958, lng: 2.377065},
{lat: 48.877800, lng: 2.370605},
{lat: 48.882765, lng: 2.370164},
{lat: 48.884218, lng: 2.368480},
{lat: 48.884670, lng: 2.360258},
{lat: 48.883863, lng: 2.349500}
];
// Construct the polygon.
var polygon = new google.maps.Polygon({
paths: points,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
polygon.setMap(map);
}
initMap();
#map {
height: 300px;
}
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<div id="map"></div>

Adding multiple characters to markers using Google Maps API

Problem:
Adding multiple characters to markers using Google Maps API.
Minimal Working Example (MWA):
In the example below I map a line between two airports (PEK and FRA) but the markers don't seem to allow for multiple characters.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Polyline</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var flightPath;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 39.782, lng: 116.387},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var flightPathCoordinates = [
{lat: 39.782, lng: 116.387},
{lat: 50.026, lng: 8.543}
];
var myPEK = {lat: 39.782, lng: 116.387};
var myFRA = {lat: 50.026, lng: 8.543};
flightPath = new google.maps.Polyline({
path: flightPathCoordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
addLine();
var marker = new google.maps.Marker({
position: myPEK,
map: map,
label: 'PEK',
title: 'Beijing'
});
var marker = new google.maps.Marker({
position: myFRA,
map: map,
label: 'FRA',
title: 'Frankfurt'
});
}
function addLine() {
flightPath.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrI9AcuDk0DxHVFjbAsSZz2DMm4zqsdCA&callback=initMap">
</script>
</body>
</html>
Desired output:
Get markers to work with multiple characters.
Add labels that allow for at least 3 characters.
Any other solution that would show the IATA code for the airports.

If you need a map Label you can use an extension library called google-maps utility libraries v3 map label ..
You can find the code at : https://github.com/googlemaps/js-map-label
add this library to your
aMapLabel = new MapLabel({
text: 'Your Text',
position: mapLabelCenter,
strokeColor: '#FFFFFF',
fontColor: '#FFFFFF',
map: map,
fontSize: 24,
strokeWeight: 0,
align: 'left'
});
marker.bindTo('map', aMapLabel);
marker.bindTo('position', aMapLabel);
or you can use also https://github.com/googlemaps/v3-utility-library/tree/master/markerwithlabel
These two are the better solution for manage label (or markers with label) in google maps

Working solution (not optimised):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>TravelTools Google Map</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-map-label/src/maplabel-compiled.js"></script>
<script>
var flightPath;
var map;
function init() {
var myLatlng = new google.maps.LatLng(39.782, 116.387);
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var flightPathCoordinatesPEKFRA = [
{lat: 39.782, lng: 116.387},
{lat: 50.026, lng: 8.543}
];
var flightPathCoordinatesPEKCDG = [
{lat: 39.782, lng: 116.387},
{lat: 49.012, lng: 2.55}
];
flightPathPEKFRA = new google.maps.Polyline({
path: flightPathCoordinatesPEKFRA,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPathPEKCDG = new google.maps.Polyline({
path: flightPathCoordinatesPEKCDG,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
var map = new google.maps.Map(document.getElementById('map'), myOptions);
flightPathPEKFRA.setMap(map);
flightPathPEKCDG.setMap(map);
// PEK
var myPEK = new MapLabel({
text: 'PEK',
position: new google.maps.LatLng(39.782, 116.387),
map: map,
fontSize: 11,
align: 'center'
});
myPEK.set('position', new google.maps.LatLng(39.782, 116.387));
var marker = new google.maps.Marker();
marker.bindTo('map', myPEK);
marker.bindTo('position', myPEK);
// FRA
var myFRA = new MapLabel({
text: 'FRA',
position: new google.maps.LatLng(50.026, 8.543),
map: map,
fontSize: 11,
align: 'center'
});
myFRA.set('position', new google.maps.LatLng(50.026, 8.543));
var marker = new google.maps.Marker();
marker.bindTo('map', myFRA);
marker.bindTo('position', myFRA);
// CDG
var myCDG = new MapLabel({
text: 'CDG',
position: new google.maps.LatLng(49.012, 2.55),
map: map,
fontSize: 11,
align: 'center'
});
myCDG.set('position', new google.maps.LatLng(49.012, 2.55));
var marker = new google.maps.Marker();
marker.bindTo('map', myCDG);
marker.bindTo('position', myCDG);
marker.setDraggable(true);
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>