Develop Reference

Angular-google-maps Get markers Coordinates to draw Polyline

I'm trying to draw a line with polyline using angular-google-maps (doc here).
I'm not very familiar with AngularJS so I've got some difficuties to do what I want to do.
I'am able to print markers on the map with this function :
function addPosition (position, refresh) {
if (! _.mHas(position, "longitude", "latitude", "username")) {
console.log("That's not a proper position entry !");
return;
}
if (position.latitude === '' || position.longitude === '' ) return;
vm.map.markers.push({
id : vm.map.markers.length,
coords : {
longitude : position.longitude,
latitude : position.latitude
},
name : position.username,
options : {
icon : 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
draggable : false
}
});
if (refresh) {
$timeout(function () {
vm.map.control.refresh();
}, 5);
}
}
I want to draw a Polyline between my markers but I don't have the good logic to take all coordinates from my markers and create a path with them.
I know I have to do something like :
function userLocation (position){
var lat = position.latitude;
var lng = position.longitude;
var pathLine = [new google.maps.LatLng(lat, lng)];}
And then draw the Polyline with something like this:
$scope.polylines = [{
path: pathLine,
stroke: {
color: '#000000',
weight: 3
},
editable: false,
draggable: false,
geodesic: true,
visible: true,
}];
With my "logic" i'm stuck in concept where I get coordinates forEach markers and it give me path results with : coordinates of my first marker and coordinates NULL, and , NULL coordinates and coordinates of my second marker.
I've created a JSFiddle with the code if you need here, without the $scope.Polyline.

Since you are utilizing angular-google-maps library and want
to draw a Polyline between my markers but I don't have the good logic
to take all coordinates from my markers and create a path with them.
and given that data for markers is represented in the following format:
[
{
id : vm.map.markers.length,
coords : {
longitude : position.longitude,
latitude : position.latitude
},
name : position.username,
options : {
icon : 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
draggable : false
}
}
//...
]
data for Polyline could be generated like this:
vm.map.polyline = vm.map.markers.map(m => m.coords);
Example
angular
.module("mapApp", ["uiGmapgoogle-maps"])
.controller("mapCtrl", function($scope) {
vm = this;
vm.map = {
center: {
latitude: -24.9923319,
longitude: 125.2252427
},
zoom: 4,
lineStyle: {
color: "#333",
weight: 5,
opacity: 0.7
},
markers : [
{
coords: {
latitude: -33.8473567,
longitude: 150.6517955
},
name: "Sydney",
id: 1
},
{
coords: {
latitude: -37.9716929,
longitude: 144.772958
},
name: "Melbourne",
id: 3
},
{
coords: {
latitude: -34.9998826,
longitude: 138.3309812
},
name: "Adelaide",
id: 4
},
{
coords: {
latitude: -32.0391738,
longitude: 115.6813556
},
name: "Perth",
id: 5
},
{
coords: {
latitude: -12.425724,
longitude: 130.8632684
},
name: "Darwin",
id: 6
},
{
coords: {
latitude: -16.8801503,
longitude: 145.5768602
},
name: "Cairns",
id: 7
}
],
};
vm.map.polyline = vm.map.markers.map(m => m.coords);
});
.angular-google-map-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="https://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div ng-app="mapApp" ng-controller="mapCtrl as vm">
<ui-gmap-google-map
center='vm.map.center'
zoom='vm.map.zoom'>
<ui-gmap-markers models="vm.map.markers" coords="'coords'" idkey="'id'" ></ui-gmap-markers>
<ui-gmap-polyline path="vm.map.polyline" draggable="false" geodesic="true" stroke="vm.map.lineStyle" fit="false"></ui-gmap-polyline>
</ui-gmap-google-map>
</div>

Uncaught ReferenceError: google is not defined

I try to apply the example Extjs 6 Google Maps but it appears an error google is not defined on GMapPanel.js file. Can anyone help me why this error displays, I mention that I've spent time to read here and on other forum why this error but nothing give me the answer? thanks in advance
viewMap.js
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Google Map',
layout: 'fit',
width: 300,
height: 300,
items: [{
xtype: 'button',
id: 'show-btn',
text: 'Click here'
}]
});
Ext.require([
'Ext.window.*',
'Ext.ux.GMapPanel'
]);
var mapwin;
Ext.get('show-btn').on('click', function () {
// create the window on the first click and reuse on subsequent clicks
if (mapwin) {
mapwin.show();
} else {
mapwin = Ext.create('Ext.window.Window', {
autoShow: true,
layout: 'fit',
title: 'GMap Window',
closeAction: 'hide',
width: 450,
height: 450,
border: false,
x: 40,
y: 60,
mapTypeId: 'google.maps.MapTypeId.ROADMAP',
mapConfOpts: ['enableScrollWheelZoom', 'enableDoubleClickZoom', 'enableDragging'],
mapControls: ['GSmallMapControl', 'GMapTypeControl', 'NonExistantControl'],
items: {
xtype: 'gmappanel',
center: {
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
marker: {title: 'Fenway Park'}
},
markers: [{
lat: 42.339641,
lng: -71.094224,
title: 'Boston Museum of Fine Arts',
listeners: {
click: function (e) {
Ext.Msg.alert('It\'s fine', 'and it\'s art.');
}
}
}, {
lat: 42.339419,
lng: -71.09077,
title: 'Northeastern University'
}]
}
});
}
});
});
GMapPanel.js
Ext.define('Ext.ux.GMapPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.gmappanel',
requires: ['Ext.window.MessageBox'],
initComponent : function(){
Ext.applyIf(this,{
plain: true,
gmapType: 'map',
border: false
});
this.callParent();
},
onBoxReady : function(){
var center = this.center;
this.callParent(arguments);
if (center) {
if (center.geoCodeAddr) {
this.lookupCode(center.geoCodeAddr, center.marker);
} else {
this.createMap(center);
}
} else {
Ext.raise('center is required');
}
},
createMap: function(center, marker) {
var options = Ext.apply({}, this.mapOptions);
options = Ext.applyIf(options, {
zoom: 14,
center: center,
mapTypeId: 'google.maps.MapTypeId.HYBRID'
});
this.gmap = new google.maps.Map(this.body.dom, options);
if (marker) {
this.addMarker(Ext.applyIf(marker, {
position: center
}));
}
Ext.each(this.markers, this.addMarker, this);
this.fireEvent('mapready', this, this.gmap);
},
addMarker: function(marker) {
marker = Ext.apply({
map: this.gmap
}, marker);
if (!marker.position) {
marker.position = new google.maps.LatLng(marker.lat, marker.lng);
}
var o = new google.maps.Marker(marker);
Ext.Object.each(marker.listeners, function(name, fn){
google.maps.event.addListener(o, name, fn);
});
return o;
},
lookupCode : function(addr, marker) {
this.geocoder = new google.maps.Geocoder();
this.geocoder.geocode({
address: addr
}, Ext.Function.bind(this.onLookupComplete, this, [marker], true));
},
onLookupComplete: function(data, response, marker){
if (response != 'OK') {
Ext.MessageBox.alert('Error', 'An error occured: "' + response + '"');
return;
}
this.createMap(data[0].geometry.location, marker);
},
afterComponentLayout : function(w, h){
this.callParent(arguments);
this.redraw();
},
redraw: function(){
var map = this.gmap;
if (map) {
google.maps.event.trigger(map, 'resize');
}
}
});

Get a key on this site https://developers.google.com/maps/documentation/javascript/
After that you have to include the maps url with your like just a parameter in url key=your key in index.html
Then it will work.
The url looks like this
https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap
You have to put it inside the <script></script> tags.

implement a slider using google map api

I have created a webpage which uses Google Map API.
JSfiddle
function initMap() {
var intervalForAnimation;
var count = 0;
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 19.0760, lng: 72.8777},
zoom: 5,
styles: [
{
featureType: 'all',
stylers: [
{ saturation: -80 }
]
},{
featureType: 'road.arterial',
elementType: 'geometry',
stylers: [
{ hue: '#00ffee' },
{ saturation: 50 }
]
},{
featureType: 'poi.business',
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
}
]
});
// Define the symbol, using one of the predefined paths ('CIRCLE')
// supplied by the Google Maps JavaScript API.
var symbolSource = {
path: 'M -2,-2 2,2 M 2,-2 -2,2',
strokeColor: '#FF0000',
strokeWeight: 4
};
var symbolShape = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor: '#0000FF',
strokeOpacity: 1.0
};
var symbolDestination = {
path: 'M -2,-2 2,2 M 2,-2 -2,2',
strokeColor: '#292',
strokeWeight: 4
};
// Create the polyline and add the symbol to it via the 'icons' property.
var line = new google.maps.Polyline({
path: [{lat: -33.918861, lng: 18.423300}, {lat: -35.842160, lng: 18.863525}, {lat: -39.170387, lng: 35.189209}, {lat: -26.331494, lng: 54.228516}, {lat: 0.462885, lng: 61.083984}, {lat: 19.075984, lng: 72.877656}],
icons: [
{
icon: symbolShape,
offset: '0%'
}
],
strokeColor: '#0000FF ',
strokeOpacity: 0,
map: map
});
//Our Secondary polyline for reseting purpose
var line1 = new google.maps.Polyline({
path: [{lat: -33.918861, lng: 18.423300}, {lat: -35.842160, lng: 18.863525}, {lat: -39.170387, lng: 35.189209}, {lat: -26.331494, lng: 54.228516}, {lat: 0.462885, lng: 61.083984}, {lat: 19.075984, lng: 72.877656}],
icons: [
{
icon: symbolSource,
offset: '0%'
}, {
icon: symbolDestination,
offset: '100%'
}
],
strokeColor: '#0000FF ',
strokeOpacity: 0.8,
map: map
});
//Map boundaries
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < line.getPath().getLength(); i++) {
bounds.extend(line.getPath().getAt(i));
}
map.fitBounds(bounds);
function playing() {
intervalForAnimation = window.setInterval(function() {
$("#map").after(animateCircle(line,count));
count = (count+0.2) % 200;
}, 20);
}
$(".play").click(function() {
playing();
pb = new progressBar();
map.controls[google.maps.ControlPosition.RIGHT].push(pb.getDiv());
});
$(".pause").click(function() {
clearInterval(intervalForAnimation);
});
$(".reset").click(function(){
count = 0;
line1.setMap(map);
});
// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line,count) {
var icons = line.get('icons');
//if ((icons[0].offset <= 100 + '%')) {
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
if (count >= 199){
clearInterval(intervalForAnimation);
line1.setMap(null);
};
//n++;
//};
}
}
var intervalForAnimation;
var count = 0;
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 19.0760, lng: 72.8777},
zoom: 5,
styles: [
{
featureType: 'all',
stylers: [
{ saturation: -80 }
]
},{
featureType: 'road.arterial',
elementType: 'geometry',
stylers: [
{ hue: '#00ffee' },
{ saturation: 50 }
]
},{
featureType: 'poi.business',
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
}
]
});
// Define the symbol, using one of the predefined paths ('CIRCLE')
// supplied by the Google Maps JavaScript API.
var symbolSource = {
path: 'M -2,-2 2,2 M 2,-2 -2,2',
strokeColor: '#FF0000',
strokeWeight: 4
};
var symbolShape = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor: '#0000FF',
strokeOpacity: 1.0
};
var symbolDestination = {
path: 'M -2,-2 2,2 M 2,-2 -2,2',
strokeColor: '#292',
strokeWeight: 4
};
// Create the polyline and add the symbol to it via the 'icons' property.
var line = new google.maps.Polyline({
path: [{lat: -33.918861, lng: 18.423300}, {lat: -35.842160, lng: 18.863525}, {lat: -39.170387, lng: 35.189209}, {lat: -26.331494, lng: 54.228516}, {lat: 0.462885, lng: 61.083984}, {lat: 19.075984, lng: 72.877656}],
icons: [
{
icon: symbolShape,
offset: '0%'
}
],
strokeColor: '#0000FF ',
strokeOpacity: 0,
map: map
});
//Our Secondary polyline for reseting purpose
var line1 = new google.maps.Polyline({
path: [{lat: -33.918861, lng: 18.423300}, {lat: -35.842160, lng: 18.863525}, {lat: -39.170387, lng: 35.189209}, {lat: -26.331494, lng: 54.228516}, {lat: 0.462885, lng: 61.083984}, {lat: 19.075984, lng: 72.877656}],
icons: [
{
icon: symbolSource,
offset: '0%'
}, {
icon: symbolDestination,
offset: '100%'
}
],
strokeColor: '#0000FF ',
strokeOpacity: 0.8,
map: map
});
//Map boundaries
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < line.getPath().getLength(); i++) {
bounds.extend(line.getPath().getAt(i));
}
map.fitBounds(bounds);
function playing() {
intervalForAnimation = window.setInterval(function() {
$("#map").after(animateCircle(line,count));
count = (count+0.2) % 200;
}, 20);
}
$(".play").click(function() {
playing();
pb = new progressBar();
map.controls[google.maps.ControlPosition.RIGHT].push(pb.getDiv());
});
$(".pause").click(function() {
clearInterval(intervalForAnimation);
});
$(".reset").click(function(){
count = 0;
line1.setMap(map);
});
// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line,count) {
var icons = line.get('icons');
//if ((icons[0].offset <= 100 + '%')) {
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
if (count >= 199){
clearInterval(intervalForAnimation);
line1.setMap(null);
};
}
}
The Webpage SS
I want to implement a slider which has the limits of the date given by user to it. And the slider should be interactive ie the user can jump forward or backward just by clicking on the slider line eg the slider used in YouTube.
Note:Implementation of slider and controlling the animation of the symbol with the slider line is primary objective. Setting the limits is secondary objective.
I tried implementing it,but wasn't able to get success.

One option would be to use the jquery-ui slider (from this question: control the animation of the symbol via a slider (in google maps)):
$(function() {
$("#slider").slider({
max: 200,
min: 0,
change: function(event, ui) {
console.log("ui.value=" + ui.value);
var icons = line.get('icons');
icons[0].offset = (ui.value / 2) + '%';
line.set('icons', icons);
}
});
});
proof of concept fiddle
code snippet:
var line;
var line1;
function initMap() {
var intervalForAnimation;
var count = 0;
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 19.0760,
lng: 72.8777
},
zoom: 5,
styles: [{
featureType: 'all',
stylers: [{
saturation: -80
}]
}, {
featureType: 'road.arterial',
elementType: 'geometry',
stylers: [{
hue: '#00ffee'
}, {
saturation: 50
}]
}, {
featureType: 'poi.business',
elementType: 'labels',
stylers: [{
visibility: 'off'
}]
}]
});
// Define the symbol, using one of the predefined paths ('CIRCLE')
// supplied by the Google Maps JavaScript API.
var symbolSource = {
path: 'M -2,-2 2,2 M 2,-2 -2,2',
strokeColor: '#FF0000',
strokeWeight: 4
};
var symbolShape = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor: '#0000FF',
strokeOpacity: 1.0
};
var symbolDestination = {
path: 'M -2,-2 2,2 M 2,-2 -2,2',
strokeColor: '#292',
strokeWeight: 4
};
// Create the polyline and add the symbol to it via the 'icons' property.
line = new google.maps.Polyline({
path: [{
lat: -33.918861,
lng: 18.423300
}, {
lat: -35.842160,
lng: 18.863525
}, {
lat: -39.170387,
lng: 35.189209
}, {
lat: -26.331494,
lng: 54.228516
}, {
lat: 0.462885,
lng: 61.083984
}, {
lat: 19.075984,
lng: 72.877656
}],
icons: [{
icon: symbolShape,
offset: '0%'
}],
strokeColor: '#0000FF ',
strokeOpacity: 0,
map: map
});
//Our Secondary polyline for reseting purpose
var line1 = new google.maps.Polyline({
path: [{
lat: -33.918861,
lng: 18.423300
}, {
lat: -35.842160,
lng: 18.863525
}, {
lat: -39.170387,
lng: 35.189209
}, {
lat: -26.331494,
lng: 54.228516
}, {
lat: 0.462885,
lng: 61.083984
}, {
lat: 19.075984,
lng: 72.877656
}],
icons: [{
icon: symbolSource,
offset: '0%'
}, {
icon: symbolDestination,
offset: '100%'
}],
strokeColor: '#0000FF ',
strokeOpacity: 0.8,
map: map
});
//Map boundaries
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < line.getPath().getLength(); i++) {
bounds.extend(line.getPath().getAt(i));
}
map.fitBounds(bounds);
function playing() {
intervalForAnimation = window.setInterval(function() {
$("#map").after(animateCircle(line, count));
count = (count + 0.2) % 200;
}, 20);
}
$(".play").click(function() {
playing();
pb = new progressBar();
map.controls[google.maps.ControlPosition.RIGHT].push(pb.getDiv());
});
$(".pause").click(function() {
clearInterval(intervalForAnimation);
});
$(".reset").click(function() {
count = 0;
line1.setMap(map);
});
// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line, count) {
var icons = line.get('icons');
//if ((icons[0].offset <= 100 + '%')) {
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
$("#slider").slider("value", count);
if (count >= 199) {
clearInterval(intervalForAnimation);
// line1.setMap(null);
};
//n++;
//};
}
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script>
$(function() {
$("#slider").slider({
max: 200,
min: 0,
change: function(event, ui) {
console.log("ui.value=" + ui.value);
var icons = line.get('icons');
//if ((icons[0].offset <= 100 + '%')) {
icons[0].offset = (ui.value / 2) + '%';
line.set('icons', icons);
}
});
});
</script>
<script>
$(document).ready(function() {
$("#datepickerFrom").datepicker();
});
</script>
<div style="border: 1px solid black; background-color: green; padding: 5px;">
slider
<div id="slider"></div>
</div>
<div>
<!--Play button-->
<button type="button" class="play">Play</button>
<!--Pause button-->
<button type="button" class="pause">Pause</button>
<!--Reset and Stop button-->
<button type="button" class="reset">Reset</button>
</div>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

Angular-google-Maps Markers InfoWindow not showing

Can someone help me and tell me why the showWindow boolean is not changing onclick or mouseover? Or did I not setup the infowindow correctly? I am using http://angular-ui.github.io/angular-google-maps/ . Everything seems to be working but I want the info window to come up when I click on the marker.
.controller('marker',['$scope', 'companies', function($scope, companies) {
$scope.map = {
center: {
latitude: 37,
longitude: -122
},
zoom: 4,
options: {
streetViewControl: false,
panControl: false,
maxZoom: 20,
minZoom: 3
},
dragging: false,
bounds: {},
randomMarkers: [],
doClusterRandomMarkers: true,
currentClusterType: 'standard',
clusterOptions: {
title: 'Hi I am a Cluster!', gridSize: 60, ignoreHidden: true, minimumClusterSize: 2
}
};
$scope.map.markersEvents = {
mouseover: function (marker, eventName, model, args) {
model.options.labelContent = model.title;
newmarker.showWindow = true;
$scope.$apply();
},
mouseout: function (marker, eventName, model, args) {
model.options.labelContent = " ";
newmarker.showWindow = false;
$scope.$apply();
},
click: function (marker, eventName, model, args) {
model.options.labelContent = model.title;
model.showWindow = true;
$scope.$apply();
}
};
companies.success(function(data) {
var markers = [];
data.forEach(function (item){
var newMarker = {
id: item.id,
latitude: item.latitude,
longitude: item.longitude,
content: item.address,
title: item.name,
showWindow: false,
options: {
labelContent: ' ',
labelAnchor: "22 0",
labelClass: "marker-labels",
draggable: false
}
};
markers.push(newMarker);
});
$scope.markers = markers;
})
}]);
Here is the html:
<div ng-controller="marker">
<ui-gmap-google-map center="map.center" zoom="map.zoom" dragging="map.dragging" bounds="map.bounds"
events="map.events" options="map.options" pan="true" control="map.control">
<ui-gmap-markers models="markers" coords="'self'" icon="'icon'"
doCluster="map.doClusterRandomMarkers" clusterOptions="map.clusterOptions" modelsbyref="true"
events="map.markersEvents" options="'options'"
>
<ui-gmap-windows show="showWindow">
<div>
<p>This is an info window</p>
</div>
</ui-gmap-windows>
</ui-gmap-markers>
</ui-gmap-google-map>
</div>

gmap3 How to do it - any event it shows circle

As the topic, how to do that after eg. Clicking on the marker appeared in a circle centered on the parameters of a marker?
How to get: latLng (this marker).
Please help
Code:
function map() {
var x1 = [37.772323, -122.214897];
var x2 = [37.752323, -122.214897];
$('#mapFull').gmap3({
map: {
options: {
center: [37.772323, -122.214897],
zoom: 12,
mapTypeControlOptions: {
mapTypeIds: ['custom_style', google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID]
}
}
},
marker: {
values: [{
latLng: [x1[0], x1[1]],
data: 'x1'
}, {
latLng: [x2[0], x2[1]],
data: 'x2'
}
],
events: {
click: function (marker, event, context) {
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({get: {name: "infowindow"}});
if (infowindow) {
infowindow.open(map, marker);
infowindow.setContent(context.data);
} else {
$(this).gmap3({
infowindow: {
anchor: marker,
options: {content: context.data},
circle: {
center: [37.772323, -122.214897],
radius: 250,
fillColor: "#008BB2",
strokeColor: "#005BB7"
}
}
});
}
}
}
}
});
}

You can add a circle centered on the clicked marker with the following code :
$('#mapFull').gmap3({
map: {
...
},
marker: {
values: [...],
events: {
click: function (marker, event, context) {
...
$(this).gmap3({
circle:{
options:{
center: [ marker.getPosition().lat(), marker.getPosition().lng()],
radius : 250,
fillColor : "#008BB2",
strokeColor : "#005BB7"
}
}
});
}
}
}
});