Develop Reference

How to set value to object is array of object?

I tried something like this
<script charset="utf-8">
var request = new XMLHttpRequest();
// request.open("POST", "https://localhost:8443/control/jqxGeneralServicer?sname=JQGetListCustomerByCluster&deliveryClusterId=120120", false);
request.open("POST", "https://localhost:8443/control/jqxGeneralServicer?sname=JQGetListCustomerByCluster&deliveryClusterId=${deliveryCluster.deliveryClusterId}", false);
// ${deliveryCluster.deliveryClusterId}
request.setRequestHeader('Content-Type', 'application/json');
request.send(null);
var foo = request.responseText;
var json = JSON.parse(foo);
// console.log(json["results"][0]);
var labels = new Array();
var locations = new Array();
for(i = 0; i < json["results"].length; i++){
labels.push(json["results"][i]["fullName"]);
locacations["lng"] = json["results"][i]["longitude"];
locacations["lat"] = json["results"][i]["latitude"];
}
// console.log(labels) ;
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 16,
center: {lat: 20.993514917846174, lng: 105.78660475957122},
});
// const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
//const labels = [
// "Cửa hàng Quang Anh",
// "Cửa hàng Quang Em",
// "Cửa hàng Hưng Thịnh",
// "Cửa hàng Cửa hàng Thành Hưng"];
var locations = [
{ lat: 20.9935851166474, lng: 105.78857910579417 },
{ lat: 20.986910834987295, lng: 105.78535398147808 },
{ lat: 20.990339683019226, lng: 105.7922698253056 },
{ lat: 20.996770381033244, lng: 105.79321396285934 }
];
const markers = locations.map((location, i) => {
return new google.maps.Marker({
position: location,
label: labels[i],
//label: labels[i % labels.length],
});
});
new MarkerClusterer(map, markers, {
imagePath:
"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
});
const ecolife = {lat: 20.993514917846174, lng: 105.78660475957122};
// const map22 = new google.maps.Map(document.getElementById("map"), {
// zoom: 18,
// center: ecolife,
// });
// const marker = new google.maps.Marker({
// position: ecolife,
// map: map22,
// });
}
</script>
<div id="map" style="height: 400px; width: 100%; margin: 0px 10px 10px 10px;"></div>
Please guide me set value for var locations from json data source.
These line is not satisfy me (but I don't know how to change it)
for(i = 0; i < json["results"].length; i++){
labels.push(json["results"][i]["fullName"]);// this line is ok for variable `labels`
locacations["lng"] = json["results"][i]["longitude"]; // these lines is not ok
locacations["lat"] = json["results"][i]["latitude"]; // these lines is not ok.
}
//
The true format must be like the sample from Google Maps
const locations = [
{ lat: 20.9935851166474, lng: 105.78857910579417 },
{ lat: 20.986910834987295, lng: 105.78535398147808 },
{ lat: 20.990339683019226, lng: 105.7922698253056 },
{ lat: 20.996770381033244, lng: 105.79321396285934 }
];

Just push an object instead:
locations.push({lng: json['results'][i]['longitude'], lat: json['results'][i]['latitude']});
beware that you shouldn't use synchronous http requests.

Display error UTF-8 character in label of Google Maps markers

I have file foo.ftl
<script>
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 16,
center: {lat: 20.993514917846174, lng: 105.78660475957122},
});
// const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const labels = [
"The Light Trung Văn",
"Khu đô thị Mulbery Lane",
"Nhà thờ giáo xứ Phùng Khoang",
"Khỏe đẹp 24h"];
const locations = [
{ lat: 20.9935851166474, lng: 105.78857910579417 },
{ lat: 20.986910834987295, lng: 105.78535398147808 },
{ lat: 20.990339683019226, lng: 105.7922698253056 },
{ lat: 20.996770381033244, lng: 105.79321396285934 }
];
const markers = locations.map((location, i) => {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length],
});
});
new MarkerClusterer(map, markers, {
imagePath:
"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
});
const ecolife = {lat: 20.993514917846174, lng: 105.78660475957122};
// const map22 = new google.maps.Map(document.getElementById("map"), {
// zoom: 18,
// center: ecolife,
// });
// const marker = new google.maps.Marker({
// position: ecolife,
// map: map22,
// });
}
</script>
I see HTML source of web-page
Encoding in text editor
but still error font UTF-8
How to display text in UTF-8 correctly?

This is a defect of FreeMarker
<#ftl encoding="utf-8">
See https://freemarker.apache.org/docs/pgui_misc_charset.html#autoid_52

Getting marker info from markerclusterer

I have pushed markers into the a markerClusterer. When I click on the markerClusterer I want to display the info of the nmarkers in the cluster. However, when I use the getMarkers() method, it does not give me the info that I stored in marker, only data about the marker itself. Is there any way that I can implement this? https://codesandbox.io/s/joey-gmaps-c5kdf
const markerCluster = new MarkerClusterer(map, [],
{ imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });
google.maps.event.addListener(markerCluster, 'clusterclick', function (c) {
console.log('Number of managed markers in cluster: ' + c.getSize());
var m = c.getMarkers();
for (i in m) {
console.log(Object.values(m[i]));
console.log(m[i].getTitle());
console.log(m[i].toString());
}
var p = [];
for (var i = 0; i < m.length; i++) {
p.push(m[i]);
}
});

You can get your markers' information using getMarkers so there may be an issue somewhere in your code implementation that you haven't posted.
Try the following jsfiddle based off of Google's example.
JS code below:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: -28.024,
lng: 140.887
}
});
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length],
title: location.lat.toString() + "," + location.lng.toString(),
myObj: { myKey: i }
});
});
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
google.maps.event.addListener(markerCluster, 'clusterclick', function(c) {
console.log('Number of managed markers in cluster: ' + c.getSize());
var m = c.getMarkers();
for (let i in m) {
console.log(m[i].getLabel());
console.log(m[i].getTitle());
console.log(m[i].myObj.myKey);
}
});
}
var locations = [{
lat: -31.563910,
lng: 147.154312
},
{
lat: -33.718234,
lng: 150.363181
},
{
lat: -33.727111,
lng: 150.371124
},
{
lat: -33.848588,
lng: 151.209834
},
{
lat: -33.851702,
lng: 151.216968
},
{
lat: -34.671264,
lng: 150.863657
},
{
lat: -35.304724,
lng: 148.662905
},
{
lat: -36.817685,
lng: 175.699196
},
{
lat: -36.828611,
lng: 175.790222
},
{
lat: -37.750000,
lng: 145.116667
},
{
lat: -37.759859,
lng: 145.128708
},
{
lat: -37.765015,
lng: 145.133858
},
{
lat: -37.770104,
lng: 145.143299
},
{
lat: -37.773700,
lng: 145.145187
},
{
lat: -37.774785,
lng: 145.137978
},
{
lat: -37.819616,
lng: 144.968119
},
{
lat: -38.330766,
lng: 144.695692
},
{
lat: -39.927193,
lng: 175.053218
},
{
lat: -41.330162,
lng: 174.865694
},
{
lat: -42.734358,
lng: 147.439506
},
{
lat: -42.734358,
lng: 147.501315
},
{
lat: -42.735258,
lng: 147.438000
},
{
lat: -43.999792,
lng: 170.463352
}
]
If e.g. you click on the blue cluster #3, you'll get the following output logged in the console:
Number of managed markers in cluster: 3
T
-42.734358,147.439506
U
-42.734358,147.501315
V
-42.735258,147.438
Edit: This error appears to be typescript related. There's a solution in related thread custom property with google marker in type script
Please try the code below:
for (var i = 0; i < features.length; i++) {
const marker2 = new google.maps.Marker({
position: features[i].position,
icon: icons[features[i].type].icon,
animation: google.maps.Animation.DROP,
map: map
});
marker2.set("customInfo", features[i].location);
console.log("Marker222223", marker2["customInfo"]);
markerCluster.addMarker(marker2);
}
Hope this helps!

While creating markers add object into marker so that each marker will have asociated object with it i.e. customInfo
var marker = new google.maps.Marker({
position: accident_LatLng,
title: accident_title,
map: map,
customInfo: object,
});
to Access marker object use below code. I have created custom array to store marker object.
var markers = cluster.getMarkers();
var markerCustom = [];
for (var i = 0; i < markers.length; i++) {
markerCustom.push(cluster.markers_[i].customInfo)
}
Hope this helps
Reference https://medium.com/#sunil.jadhav38/implementing-marker-clustering-is-angular-using-google-charts-6b62a33f3b61

Jquery variable type issue

I have the following script which uses a drop down index to create a reference to a variable to plot coordinates on a Google map. These are the co-ordinate objects:
var posl0 = { lat: 53.486204, lng: -3.217980 };
var posl1 = { lat: 51.493399, lng: -2.994917 };
var posl2 = { lat: 53.328493, lng: -3.098814 };
var posl3 = { lat: 53.412157, lng: -2.838219 };
var posl4 = { lat: 53.481338, lng: -2.886647 };
var posl5 = { lat: 53.401431, lng: -2.994917 };
var posl6 = { lat: 53.513252, lng: -2.944996 };
var posl7 = { lat: 53.372710, lng: -3.183254 };
var posl8 = { lat: 53.374466, lng: -2.868754 };
This is my script:
function addnewmarker(selc, mapno) {
var locaz = ["Aintree", "Formby", "Heswall", "Huyton", "Kirby", "Liverpool City", "Maghull", "West Kirby", "Woolton"];
var pos = 'posl' + mapno;
var pos.toArray();
alert(pos);
marker = new google.maps.Marker({
position: pos,
map: map,
title: 'Aintree',
animation: google.maps.Animation.DROP,
});
adsho(1);
}
My issue appears to be with my use of the pos variable as a pointer to the posl object. If I enter the position as position: posl1 all works fine but position: pos does nothing although it alerts the same posl1 ref.
Can anyone help / advise please?

The issue is because your pos value is a string, not a reference to the object held in the posX variable. You could use eval() to fix this, but eval() is incredibly bad practice and should be avoided.
Instead, you can achieve what you need by instead placing all your objects in to an array and then accessing them by index. Something like this:
var pos = [{ lat: 53.486204, lng: -3.217980 },{ lat: 51.493399, lng: -2.994917 },{ lat: 53.328493, lng: -3.098814 },{ lat: 53.412157, lng: -2.838219 },{ lat: 53.481338, lng: -2.886647 },{ lat: 53.401431, lng: -2.994917 },{ lat: 53.513252, lng: -2.944996 },{ lat: 53.372710, lng: -3.183254 },{ lat: 53.374466, lng: -2.868754 }]
function addnewmarker(selc, mapno) {
var locaz = ["Aintree", "Formby", "Heswall", "Huyton", "Kirby", "Liverpool City", "Maghull", "West Kirby", "Woolton"];
marker = new google.maps.Marker({
position: pos[mapno],
map: map,
title: 'Aintree',
animation: google.maps.Animation.DROP,
});
adsho(1);
}
Also note that your use of jQuery's toArray() is not required (and most likely caused errors) and the locaz array is not used, but I assume this is simply due to redacting parts of your code in the question.

Replace this line
var pos = eval('posl' + mapno);

Try this ;)
The way you are creating array of elements is wrong and the way you are using to access the element from the array is again wrong;
You can add element to array one by one or multiple when you are defining it;
Multiple elements when creating array;
var array = [1, 2, 3, 4, 6, 7];/* in this way you can assign as many elements you want to add to this array array index starts from 0; */
var array = []; /* empty array later you can add elements to it */
array[0] = 1;
array[1] = 2; /* add element to directly at desired index */
array.push(1);
array.push(2);/* add element to array at the end */
So in your case try this
var positions = [{ lat: 53.486204, lng: -3.217980 },
{ lat: 51.493399, lng: -2.994917 },
{ lat: 53.328493, lng: -3.098814 },
{ lat: 53.412157, lng: -2.838219 },
{ lat: 53.481338, lng: -2.886647 },
{ lat: 53.401431, lng: -2.994917 },
{ lat: 53.513252, lng: -2.944996 },
{ lat: 53.372710, lng: -3.183254 },
{ lat: 53.374466, lng: -2.868754 }];
function addnewmarker(selc, mapno) {
var locaz = ["Aintree", "Formby", "Heswall", "Huyton", "Kirby", "Liverpool City", "Maghull", "West Kirby", "Woolton"];
var pos = positions[mapno];
alert(pos);
marker = new google.maps.Marker({
position: pos,
map: map,
title: 'Aintree',
animation: google.maps.Animation.DROP,
});
adsho(1);
}

Google Maps API V3: Exclude single marker from clustering

I am using the google maps api and using grid clustering for the markers. I wanted to know if there is a way to exclude a single marker from clustering. I want a "You are here" marker that is always visible. I tried using a different array for just that marker and not including it the cluster function but that didn't work.
Does anyone have a solution for this?
Here is how i am doing the clustering
$(document).on('click', '#mapbut', function() {
var items, distances, you_are_here = [], markers_data = [], markers_data2 = [], fred, clust1, markss;
you_are_here.push({
lat : Geo.lat,
lng : Geo .lng,
animation: google.maps.Animation.DROP,
title : 'Your are here',
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
},
infoWindow: {
content: '<p>You are Here</p>'
}
});
function loadResults (data) {
if (data.map.length > 0) {
items = data.map;
for (var i = 0; i < items.length; i++)
{
var item = items[i];
var distances = [];
var dist2;
if (item.Lat != undefined && item.Lng != undefined)
{
markers_data.push({
lat : item.Lat,
lng : item.Lng,
title : item.Site,
infoWindow: {
content: '<p>' + item.Site + '</p><p>' + Math.round(item.distance) + ' miles away</p>'
}
});
}
}
}
map.addMarkers(markers_data);
map = new GMaps({
el: '#map',
lat: Geo.lat,
lng: Geo.lng,
zoom: 10,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
markerClusterer: function(map) {
options = {
gridSize: 50
}
clust1 = new MarkerClusterer(map,[], options);
return clust1;
},
scaleControl: true,
streetViewControl: false
});
map.addMarkers(you_are_here);

The GMaps clusters all the markers you add to it with the addMarker method (if you provide a MarkerClusterer).
One option: add your "special" marker (the one that you don't want clustered) to the map manually, so it isn't added to the MarkerClusterer:
The GMaps.map property is a reference to the Google Maps Javascript API v3 map object. So this will add a marker to the map without letting the GMaps library know about it:
you_are_here = new google.maps.Marker({
position: {lat: Geo.lat,lng: Geo.lng},
animation: google.maps.Animation.DROP,
title: 'Your are here',
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
},
map: map.map
});
proof of concept fiddle
code snippet:
var Geo = {
lat: 40.7281575,
lng: -74.07764
};
$(document).on('click', '#mapbut', function() {
var items, distances, you_are_here = [],
markers_data = [],
markers_data2 = [],
fred, clust1, markss;
function loadResults(data) {
if (data.map.length > 0) {
items = data.map;
for (var i = 0; i < items.length; i++) {
var item = items[i];
var distances = [];
var dist2;
if (item.Lat != undefined && item.Lng != undefined) {
markers_data.push({
lat: item.Lat,
lng: item.Lng,
title: item.Site,
infoWindow: {
content: '<p>' + item.Site + '</p><p>' + Math.round(item.distance) + ' miles away</p>'
}
});
}
}
}
map = new GMaps({
el: '#map',
lat: Geo.lat,
lng: Geo.lng,
zoom: 8,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
markerClusterer: function(map) {
options = {
gridSize: 50,
imagePath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"
}
clust1 = new MarkerClusterer(map, [], options);
return clust1;
},
scaleControl: true,
streetViewControl: false
});
map.addMarkers(markers_data);
you_are_here = new google.maps.Marker({
position: {
lat: Geo.lat,
lng: Geo.lng
},
animation: google.maps.Animation.DROP,
title: 'Your are here',
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
},
infoWindow: {
content: '<p>You are Here</p>'
},
map: map.map
});
// map.addMarkers(you_are_here);
}
loadResults(data);
});
var data = {
map: [{
Lat: 40.7127837,
Lng: -74.005941,
Site: "New York, NY",
distance: 1
}, {
Site: "Newark, NJ",
Lat: 40.735657,
Lng: -74.1723667,
distance: 2
}]
};
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"></script>
<script src="https://rawgit.com/HPNeo/gmaps/master/gmaps.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<input id="mapbut" type="button" value="map" />
<div id="map"></div>

To get around this is relatively simple, just after I send the markers array to MarkerClusterer I then add my location.
// Setup cluster markers
var markerCluster = new MarkerClusterer( gmap.map, options )
// add my location
gmap.addMarker({
lat: data.latitude,
lng: data.longitude
...
})
Thanks