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.

How combine two Google Maps API

I use Google Maps API for two things on my website:
First for displaying map:
jQuery(document).ready(function($) {
function initialize_business() {
var map_move = $(document).width() > 850 ? true : false;
var map_center = new google.maps.LatLng(parseFloat($('#business_sidebar_map').attr('data-lat')), parseFloat($('#business_sidebar_map').attr('data-lng')));
var map_options = {
zoom: 14,
center: map_center,
zoomControl: false,
scaleControl: false,
draggable: false,
scrollwheel: false,
mapTypeControl: false,
streetViewControl: false,
};
var map = new google.maps.Map(document.getElementById('business_sidebar_map'), map_options);
new google.maps.Marker({
position: map_center,
map: map,
icon: js_string.template_directory + '/images/marker.png'
});
}
google.maps.event.addDomListener(window, 'resize', initialize_business);
google.maps.event.addDomListener(window, 'load', initialize_business);
});
and for this map I need next api link:
<script src="https://maps.googleapis.com/maps/api/js"></script>
Secondly I use Google Map API for finding of GPS from my Address:
function google_geocoding() {
var autocomplete = new google.maps.places.Autocomplete(document.getElementById('address'), {
types: ['geocode'],
componentRestrictions: {country: 'cz'},
});
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert('Bohužel jsme nanašli žádnou lokaci');
return;
}
document.getElementById('address_lat').value = place.geometry.location.lat();
document.getElementById('address_lng').value = place.geometry.location.lng();
});
}
and for this event I need next api link:
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&region=cz&callback=google_geocoding"></script>
In console I see next bug:
You have included the Google Maps API multiple times on this page.
So I probably need to combine Google script links to one, but I don't know how.
Thanks for help

I find solution:
Call google maps API once
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&region=cz">
Insted of callback param I simple Call the function so final script is:
jQuery(document).ready(function($) {
if($('#business_sidebar_map').length > 0) {
function initialize_business() {
var map_move = $(document).width() > 850 ? true : false;
var map_center = new google.maps.LatLng(parseFloat($('#business_sidebar_map').attr('data-lat')), parseFloat($('#business_sidebar_map').attr('data-lng')));
var map_options = {
zoom: 14,
center: map_center,
zoomControl: false,
scaleControl: false,
draggable: false,
scrollwheel: false,
mapTypeControl: false,
streetViewControl: false,
};
var map = new google.maps.Map(document.getElementById('business_sidebar_map'), map_options);
new google.maps.Marker({
position: map_center,
map: map,
icon: js_string.template_directory + '/images/marker.png'
});
}
google.maps.event.addDomListener(window, 'resize', initialize_business);
google.maps.event.addDomListener(window, 'load', initialize_business);
}
if($('#address').length > 0) {
function google_geocoding() {
var autocomplete = new google.maps.places.Autocomplete(document.getElementById('address'), {
types: ['geocode'],
componentRestrictions: {country: 'cz'},
});
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert('Bohužel jsme nanašli žádnou lokaci');
return;
}
document.getElementById('address_lat').value = place.geometry.location.lat();
document.getElementById('address_lng').value = place.geometry.location.lng();
});
}
google_geocoding();
}
});

Google Map now showing Marker is I add custom icon

My code is given below. It is working now but if I uncomment icon line ( //icon: 'http://108.163.162.202:8080/finex/img/map_marker.png'), all the marker and their title do not display.
I want to add my custom marker in my page and my code does not allowing me.
Please help.
$(function() {
var locations = [
['Jersey City', 40.7178746, -74.0718356],
['Bronx', 40.8504989, -73.84934,5 ],
['Union City', 40.7667435, -74.0303289],
['Queens', 40.651018, -73.871192],
['Ridgefield', 40.8256436, -74.0153092]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: new google.maps.LatLng(40.7590615, -73.969231),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
mapTypeControl: false,
scaleControl: false,
navigationControl: true,
draggable: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
});
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,
title: locations[i][0],
//icon: 'http://108.163.162.202:8080/finex/img/map_marker.png',
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(marker.title);
infowindow.open(map, marker);
}
})(marker, i));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div style="height:300px;width:500px;" id="map"></div>

I did this in my project
<input type="hidden" value="http://108.163.162.202:8080" id="baseUrl" >
var baseUrl=$('#baseUrl').val();
icon: new google.maps.MarkerImage(
baseUrl+'images/marker-new.png',
null,
null,
// new google.maps.Point(0,0),
null,
new google.maps.Size(36, 36)
),

The image has limited access with .htaccess. I have to enter username and password. Perhaps this is the problem? ;)
In addition you can leave the comma after the icon statement if nothing is following.

How do I make Google Maps info windows fit the contents perfectly in all browsers?

You can see in the below example that the maps "info windows" render differently in every browser (sometimes the content is cut off, sometimes the info windows have scroll bars).
Anyone know how to make my Google Maps "info windows" fit the content perfectly in all browsers?
Example html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script>
function map_initialize() {
var myMapInfo = [
{
id: "122",
name: "Test1 Caravan Park",
latlng: new google.maps.LatLng(-38.43746, 144.87258)
},
{
id: "121",
name: "Test2 Family Holidays",
latlng: new google.maps.LatLng(-38.38098, 144.91090)
},
{
id: "123",
name: "Test3 Frankston Holiday Park",
latlng: new google.maps.LatLng(-38.17425, 145.14136)
},
{
id: "125",
name: "Test4 Holiday Park",
latlng: new google.maps.LatLng(-38.33165, 144.98331)
},
{
id: "124",
name: "Test5 Port Harbour Caravan Park",
latlng: new google.maps.LatLng(-38.24634, 145.24469)
},
];
var map = new google.maps.Map(document.getElementById("map-canvas"), {
center: new google.maps.LatLng(0, 0),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.BOTTOM_LEFT
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
},
zoomControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.BOTTOM_LEFT
}
});
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
for (var i = 0; i < myMapInfo.length; i++) {
var marker = new google.maps.Marker({
position: myMapInfo[i].latlng,
map: map,
title: myMapInfo[i].name
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent('<div class=\"myInfoHead\">' + myMapInfo[i].name + '</div>');
infoWindow.open(map, marker);
}
})(marker, i));
}
var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < myMapInfo.length; i++) {
latlngbounds.extend(myMapInfo[i].latlng);
}
latlngbounds.extend( new google.maps.LatLng(-38.032345,145.343456) ); //add Berwick Vic to the latlngbounds for top padding
map.fitBounds(latlngbounds);
////draw a rectangle of the latlngbounds - handy for debuging
//new google.maps.Rectangle({
// bounds: latlngbounds,
// map: map,
// fillColor: "#000000",
// fillOpacity: 0.2,
// strokeWeight: 0
//});
}
google.maps.event.addDomListener(window, 'load', map_initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width:100%; height:500px;"></div>
</body>
</html>

For anyone else having this issue you just need to override Google's default css like this:
.gm-style-iw{
height: 100% !important;
overflow: hidden !important;
width: auto !important;
}
Important Note: You will also need to make sure that you use the correct javascript url..
CORRECT URL:
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
INCORRECT URL (which is unfortunately used on Google's api pages - https://developers.google.com/maps/documentation/javascript/examples/map-simple:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

Google Maps API 3 - Info Window Issue [duplicate]

This question already has answers here:
Google Maps JS API v3 - Simple Multiple Marker Example
(15 answers)
Closed 9 years ago.
What do I need to add & where - to make my markers popup the info window, using my var locations txt?
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var brooklyn = new google.maps.LatLng(48.1391265, 11.580186300000037);
var MY_MAPTYPE_ID = 'custom_style';
function initialize() {
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(48.1391265, 11.580186300000037),
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
panControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [ { stylers: [ { hue: "#098AAD" } ] } ]
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
setMarkers(map, locations);
}
var locations = [
['Plano TX', 33.01984, -96.69889, 13],
['Hemel Hempstead UK', 51.75324, -0.44863, 12],
['Dubai', 25.27114, 55.30748, 11],
['San Francisco CA', 37.77493, -122.41942, 10],
['Chicago IL', 41.87811, -87.62980, 9],
['New York NY', 40.71435, -74.00597, 8],
['Troy MI', 42.60559, -83.14993, 7],
['Santa Monica CA', 34.01945, -118.49119, 6],
['St Peters MO', 38.78747, -90.62989, 5],
['Pittsford NY', 43.09062, -77.51500, 4],
['Las Vegas NV', 36.11465, -115.17282, 3],
['Haidian Beijing', 39.95991, 116.29805, 2],
['New Delhi', 28.63531, 77.22496, 1]
];
function setMarkers(map, locations) {
var image = {
url: 'images/marker-rmg.png',
size: new google.maps.Size(32, 32),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(16, 32)
};
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
shape: shape,
title: location[0],
zIndex: location[3]
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="height: 300px;"></div>

Create a global variable (or within your setMarkers function), infowindow:
var infowindow = new google.maps.InfoWindow({
content: ""
});
Then within your loop, call a new function, passing various parameters you'll require:
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
shape: shape,
title: location[0],
zIndex: location[3]
});
bindInfoWindow(marker, map, infowindow, location[0]);
}
Then create a new global function which binds the click event to markers and opens the infowindow with the specified content:
function bindInfoWindow(marker, map, infowindow, strDescription) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(strDescription);
infowindow.open(map, marker);
});
}
Update: here's the complete code I'd use
<script>
var map;
var brooklyn = new google.maps.LatLng(48.1391265, 11.580186300000037);
var MY_MAPTYPE_ID = 'custom_style';
var locations = [
['Plano TX', 33.01984, -96.69889, 13],
['Hemel Hempstead UK', 51.75324, -0.44863, 12],
['Dubai', 25.27114, 55.30748, 11],
['San Francisco CA', 37.77493, -122.41942, 10],
['Chicago IL', 41.87811, -87.62980, 9],
['New York NY', 40.71435, -74.00597, 8],
['Troy MI', 42.60559, -83.14993, 7],
['Santa Monica CA', 34.01945, -118.49119, 6],
['St Peters MO', 38.78747, -90.62989, 5],
['Pittsford NY', 43.09062, -77.51500, 4],
['Las Vegas NV', 36.11465, -115.17282, 3],
['Haidian Beijing', 39.95991, 116.29805, 2],
['New Delhi', 28.63531, 77.22496, 1]
];
function bindInfoWindow(marker, map, infowindow, strDescription) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(strDescription);
infowindow.open(map, marker);
});
}
function setMarkers(map, locations) {
var infowindow = new google.maps.InfoWindow({
content: ""
});
var image = {
url: 'images/marker-rmg.png',
size: new google.maps.Size(32, 32),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(16, 32)
};
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var i, location, myLatLng, marker;
for (i = 0; i < locations.length; i++) {
location = locations[i];
myLatLng = new google.maps.LatLng(location[1], location[2]);
marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
shape: shape,
title: location[0],
zIndex: location[3]
});
bindInfoWindow(marker, map, infowindow, location[0]);
}
}
function initialize() {
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(48.1391265, 11.580186300000037),
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
panControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [ { stylers: [ { hue: "#098AAD" } ] } ]
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
setMarkers(map, locations);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

You need to bind click event to your markers i.e after the markers are created you need to store them in an array. Then add the below code
var marker = new google.maps.Marker({
position: position
});
var infowindow = new google.maps.InfoWindow({
content:"Any content or latitude longitude info"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Here its bit tricky, i.e if there are multiple markers then you need build the marker variable accordingly. In your case may be you can append the for loop counter 'i' to the marker variable such as marker_+i and then fire the click event on those variables inside the same loop.