Google Map v3 API: "InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number" - google-maps-api-3

I have been getting the "InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number" message and have reviewed previous posts but can't seem to find which line is causing the issue.
The below code seems to work but throws the above warning. I have tried parseFloat on lat and long values and on setPosition value but no joy.
const flightPlanCoordinates1100_0 = [{
lat: 51.52386762,
lng: -0.059058666
},
{
lat: 51.52394638,
lng: -0.058520453
},
{
lat: 51.52716833,
lng: -0.05617915
}, {
lat: 51.54674506,
lng: -0.059390801
},
];
// define the polyline attributes
const flightPath1100_0 = new google.maps.Polyline({
path: flightPlanCoordinates1100_0,
geodesic: true,
strokeColor: "Aqua",
strokeOpacity: 1.0,
strokeWeight: 2,
draggable: true,
map: map
});
// create an invisible marker for the label listener
labelMarker = new google.maps.Marker({
position: flightPath1100_0,
map: map,
visible: false
});
var myLabel = new Label();
// lets add an event listener, if you move the mouse over the line, it will tell you the track id
flightPath1100_0.addListener('mouseover', function(e) {
labelMarker.setPosition(e.latLng)
myLabel.bindTo('position', labelMarker, 'position');
// Type the Track Id name here, this can be loaded using excel macro
myLabel.set('text', "1100");
myLabel.setMap(map);
});
flightPath1100_0.setMap(map);
google.maps.event.addDomListener(window, 'load', initialize);
}

The issue as MrUpsidDown pointed out was that the position was not in latlng format, the below changes seemed to have worked
labelMarker = new google.maps.Marker({
position: new google.maps.LatLng(flightPath1100_0),
map: map,
visible: false
});

Related

Show radius when click on marker

I want to click on the google marker which will show the google circle (radius). Not sure if the placement of addListener is wrong or am I missing some stuff.
coordinates = [
['Tan Tock Seng Hospital', {lat: 1.3213762, lng: 103.8457089}],
['Singapore General Hospital', {lat: 1.279421747, lng: 103.8345482}],
['Changi General Hospital', {lat: 1.340825885, lng: 103.9494655}],
['Khoo Teck Puat Hospital', {lat: 1.424081019, lng: 103.838578}],
['Ng Teng Fong General Hospital', {lat: 1.333463114, lng: 103.7455669}],
['National University Hospital', {lat: 1.29442026, lng: 103.7836869}]
];
for (var i = 0; i < coordinates.length; i++) {
// Google Marker for Hospital Coordinates
marker = new google.maps.Marker({
position: coordinates[i][1],
map: map,
icon: 'https://maps.google.com/mapfiles/kml/paddle/blu-stars.png',
title: coordinates[i][0]
});
marker_radius = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0,
map: map,
center: coordinates[i][1],
radius: 2000, // in metres
clickable: false
});
marker_radius.setVisible(true); // set circle to invisible
marker_radius.bindTo('center', marker, 'position'); // binds the circle to marker
google.maps.event.addListener(marker, 'click', function() {
marker_radius.setVisible(getVisible() ? false : true);
});
}
You need to use a closure in your event listener:
google.maps.event.addListener(marker, 'click', (function(marker, marker_radius) {
return function () {
marker_radius.setVisible(marker_radius.getVisible() ? false : true);
}
})(marker, marker_radius));
Read here for more information.
Also your Javascript console should tell you that getVisible() is not defined. So you need to change it to marker_radius.getVisible().

About marker Google API v3?

My idea is using handling click event for map to create markers. Then handling click event for marker to show lat() of this marker. But, it always show lat() of final marker in Array. I can't solved this error. Please help me this problem. Thank all
function addMarker(location){
var goldStar = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: "yellow",
fillOpacity: 0.8,
scale: 1,
strokeColor: "gold",
strokeWeight: 14
};
mar = new google.maps.Marker({
position: location,
animation: google.maps.Animation.DROP,
icon: goldStar, //or use image
title: "Hello",
map: map
});
makerArray.push(mar);
//console.log(makerArray.length);
//click_Marker(mar);
google.maps.event.addListener(mar, 'click', function(){
alert(mar.getPosition().lat());
});}
function initialize(){
var mapOptions = {
zoom: 12,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);;
GetCurrentLocation(map);
//Hướng dẫn đi
directionDisplay.setMap(map);
directionDisplay.setPanel(document.getElementById("direction"));
getData();
showListRestaurant();
//Thêm địa điểm vào bản đồ
google.maps.event.addListener(map, 'click', function(event){
addMarker(event.latLng);
});
}
If that is your complete code then you are missing the var declartion on your mar variable.
mar = new google.maps.Marker({
position: location,
animation: google.maps.Animation.DROP,
icon: goldStar, //or use image
title: "Hello",
map: map
});
Should instead have a var at the beginning
var mar = new google.maps.Marker({
position: location,
animation: google.maps.Animation.DROP,
icon: goldStar, //or use image
title: "Hello",
map: map
});
This would explain your problem because each marker you are adding is a reference to the same object, therefore every time you add a new click event to mar, you are in fact updating the click event of the same object. The result being that all the click events have the same value.
Here's a working jsfiddle:
http://jsfiddle.net/NGja4/50/

How to iterate a list with itemtap (sencha touch 2)

I would like to know how to use itemtap to iterate through a list. I have a list right now which shows multiple items and when the user clicks on each, a map will appear showing the marker of the item. However, every item on the list seems to be showing the same thing. It is just showing the latest item on the list (first at the top). I would like to know what I'm doing wrong with the itemtap function. Thank You!!
Heres my controller where the itemtap function is:
Ext.define('demo.controller.News',{
extend:'Ext.app.Controller',
config:{
refs:{
NewsContainer:'newscontainer'
},
control:{
'newscontainer new list':{
itemtap:function(list, index, target, record){
var detailsView = Ext.create('demo.view.Mapo');
detailsView.setData(record.data);
this.getNewsContainer().push(detailsView);
}
}
}
}
});
And here is my map:
Ext.define('demo.view.Mapo', {
extend: 'Ext.Map',
xtype:'mapo',
config: {
title:'Incident Location',
iconCls:'maps',
layout:'fit',
draggable: true,
useCurrentLocation: true,
mapOptions: {
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
},
initialize: function(){
var me = this;
me.on('maprender', function(comp, map){
var image = 'resources/images/current.png';
new google.maps.Marker({
position: new google.maps.LatLng(
this._geo.getLatitude(),
this._geo.getLongitude()
),
icon: image,
map: map,
title: "Current Location",
animation: google.maps.Animation.DROP
});
//Circle Radius
// var populationOptions = {
// strokeColor: "#FF0000",
// strokeOpacity: 0.8,
// strokeWeight: 1,
// fillColor: "#FF0000",
// fillOpacity: 0.35,
// map: map,
// center: new google.maps.LatLng(this._geo.getLatitude(),
// this._geo.getLongitude()),
// radius: 2000
// };
// var t = new google.maps.Circle(populationOptions);
for (i=0; i<Ext.getStore('news').getData().length; i++){
var data = Ext.getStore('news').getData().items[i].data
};
new google.maps.Marker({
position: new google.maps.LatLng(
data.Latitude,
data.Longitude
),
// icon: image,
map: map,
title: "Incident Location",
animation: google.maps.Animation.BOUNCE
});
});
me.callParent(arguments);
}
});

Show just first and last marker on path

For generate markers on google maps I call the function displayLocation with the next code:
for (var i=0; i<data.length; i++) {
displayLocation(data[i]);
}
On displayLocation I create an array with all the positions for the path I want to create and the markers, I just wanna show the first and the last marker on the path.
My displayLocation function looks like:
function displayLocation(location){
var latLng = new google.maps.LatLng(parseFloat(location.latitud), parseFloat(location.longitud));
if(location.nombreequipo=="AST1"){
var path = new google.maps.LatLng(parseFloat(location.latitud), parseFloat(location.longitud));
rutaAST1.push(path);
}
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: imagen,
draggable: false,
visible: true,
title: location.nombreequipo
});
arrayMarcadores.push(marker);
google.maps.event.addListener(marker, 'click', function(){
infowindow.setContent(content);
infowindow.open(map, marker);
});
return marker;
}
In this part of the code I set the path, I call:
varBool = true;
dibujaRutaAST1(map, rutaAST1, varBool);
And the function is:
var ruta = null;
function dibujaRutaAST1(mapa, rutaVar, varBool){
if(!ruta){
var coordRuta = rutaVar;
console.log("En función dibujo de rutas AST1: "+rutaVar);
ruta= new google.maps.Polyline({
map: mapa,
path: coordRuta,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 3
});
console.log(ruta);
}if(varBool){
ruta.setMap(mapa);
}else{
ruta.setMap(null);
}
}
Iteration on markers array:
function mostrarMarcas(nombreEquipo){
for(var i=0;i<arrayMarcadores.length;i++){
if(arrayMarcadores[i].title==nombreEquipo){
arrayMarcadores[i].setVisible(true);
}
}
}
Any suggestion?
Thanks.
Finally I just create the first and the last marker from my array with all the points:
if(rutaAST1.length!=0){
dibujaRutaAST1(map, rutaAST1, varBool);
var imagen ='img/markers/blue_MarkerA.png';
var markerIniAST1 = new google.maps.Marker({
position: rutaAST1[0],
map: map,
icon: imagen,
draggable: false,
visible: true,
title: "AST1"
});
google.maps.event.addListener(markerIniAST1, 'click', function(){
infowindow.setContent(contentAST1[0]);
infowindow.open(map, markerIniAST1);
});
var markerFinAST1 = new google.maps.Marker({
position: rutaAST1[rutaAST1.length-1],
map: map,
icon: imagen,
draggable: false,
visible: true,
title: "AST1"
});
google.maps.event.addListener(markerFinAST1, 'click', function(){
infowindow.setContent(contentAST1[contentAST1.length-1]);
infowindow.open(map, markerFinAST1);
});
}
Thank you so much for helping me to clear my mind with this part of my code :)

The correct way to hide a polyline?

I´ve a function that show a polyline on a map, this part is working, now I want to implement a function that hides the polyline, but I can´t find my mistake, thanks in advance.
function cargaMapaCYL(mapa, varControl){
var limite = null;
limite = [
new google.maps.LatLng(42.49956716,-7.019005501),
new google.maps.LatLng(42.49947126,-7.029286373),
new google.maps.LatLng(42.50904062,-7.049299123),
new google.maps.LatLng(42.50722622,-7.069103626),
new google.maps.LatLng(42.50452387,-7.000150672),
new google.maps.LatLng(42.49348015,-6.983058917),
new google.maps.LatLng(42.49843269,-6.971666546),
new google.maps.LatLng(42.51765791,-6.956909023),
new google.maps.LatLng(42.52010069,-6.927429186),
new google.maps.LatLng(42.50992238,-6.914231493),
new google.maps.LatLng(42.50096695,-6.879679821),
new google.maps.LatLng(42.48775868,-6.857775832),
new google.maps.LatLng(43.23907504,-3.293216584)], "#000000", 5);
var contorno= new google.maps.Polyline({
path: limite,
strokeColor: "#000000",
strokeOpacity: 1.0,
strokeWeight: 2
});
if(varControl==true){
contorno.setMap(mapa);
}
if(varControl==false){
contorno.setMap(null);
}
}
You only need to create the Polyline once. Put it into a global var contorno = ... Then you can create a toggle function using the setVisible(boolean) method.
if(contorno.getVisible()){
contorno.setVisible(false);
else{
contorno.setVisible(true);
}
// or
contorno.getVisible() ? contorno.setVisible(false) : contorno.setVisible(true);
Blow is an example which hides the path after 3 seconds.
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script>
// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 0, lng: -180},
mapTypeId: 'terrain'
});
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);
setTimeout(function() {
alert('hide path');
flightPath.setVisible(false);
}, 3000);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
Everytime your function is called, it creates a new polyline. Which is either added to the map or not.
Persumably you want be able to call the function once with true to add the line, then again with false to remove it. At the moment, when you call it a second time, its creates a new line and doesn't add it to the map. It does not touch the original line, already added to the map.
One way is too keep the line in a global variable. Then you can refer to the exact same object between calls.
var contorno = null;
function cargaMapaCYL(mapa, varControl){
if (!contorno) {
var limite = [...], "#000000", 5);
contorno= new google.maps.Polyline({...});
}
if(varControl){
contorno.setMap(mapa);
} else {
contorno.setMap(null);
}
}

Resources