Develop Reference

Post an Array in Javascript to Node.js - javascript

First thank you for trying to help me.
I want to know how pass(post,get) an Array in JS to Node.js backend to parse it then.
This is my Array:
var Coordinates = [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
In the real stage, this Array is created when the user click the Google map. But this Array is an example what i need to send to my Node.js backend.
Thank you

You can do JSON.stringify(). This will convert your array into a string, which can be passed across the network via GET or POST. In the node server, you can parse this string and get the array using JSON.parse. Adding a working Example below
var Coordinates = [
{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 a = JSON.stringify(Coordinates)
console.log('Coordinates string: ', a)
var parsed = JSON.parse(a)
console.log('Parsed Coordinates: ', parsed)

Related

I am using Google Map Clustering and opening Info Windows after clicking on particular cluster using clusterclick which is working absolutely fine.
However, when I have single location, its not going inside clusterclick event and hence I am unable to open my Info Window.
I am trying to add below events but its not firing when I have single location as data.
google.maps.event.addListener(markers, 'click', (function (markers) {
alert('markersclick');
})(markers));
google.maps.event.addListener(map, 'click', function () {
alert('mapclick');
});
Here is my full source code (I have not added Info Window code because as of not even above events not firing).
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY">
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: -28.024, lng: 140.887}
});
// Create an array of alphabetical characters used to label the markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
google.maps.event.addListener(markers, 'click', (function (markers) {
alert('markersclick');
})(markers));
google.maps.event.addListener(map, 'click', function () {
alert('mapclick');
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
gridSize: 100,
zoomOnClick: true,
maxZoom: 10});
google.maps.clusterclick.addListener(markerCluster, "clusterclick", function(cluster, event) {
alert('hey');
});
}
var locations = [
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312},
{lat: -31.563910, lng: 147.154312}
];
initMap();
</script>
<style>
#map {
height: 100%;
}
</style>
If I change my locations array to something like this.
var locations = [
{lat: -31.563910, lng: 147.154312},
];
Then my clusterclick not firing as well as markers click event.
Also I am getting an error saying..
TypeError: google.maps.clusterclick is undefined
But I can have records like this.
Can someone guide me what I am doing wrong here ? Why its not working with single location ?

In the code you posted, markers is an array of google.maps.Marker objects. You can't add the listener on the array. You have to loop through your array and add the listener to each Marker individually.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: -28.024,
lng: 140.887
}
});
// Create an array of alphabetical characters used to label the markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var locations = [{
lat: -31.563510,
lng: 147.154312
},
{
lat: -31.563610,
lng: 147.154312
},
{
lat: -31.563710,
lng: 147.154312
},
{
lat: -31.563810,
lng: 147.154312
}
];
var markers = [];
var infowindow = new google.maps.InfoWindow();
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: locations[i],
map: map,
label: labels[i % labels.length]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('Label: ' + this.getLabel());
infowindow.open(map, this);
});
markers.push(marker);
}
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
gridSize: 100,
zoomOnClick: true,
maxZoom: 10
});
}
initMap();
#map {
height: 200px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

I want to group all markers near together with the same cluster size using google map.
I tried MarkerClusterer supported by Google Map, but the cluster size are different.
Is there any example for me?
Thanks for your help.

Understanding marker clustering
The MarkerClusterer library uses the grid-based clustering
technique that divides the map into squares of a certain size (the
size changes at each zoom level), and groups the markers into each
square grid. It creates a cluster at a particular marker, and adds
markers that are in its bounds to the cluster. It repeats this process
until all markers are allocated to the closest grid-based marker
clusters based on the map's zoom level. If markers are in the bounds
of more than one existing cluster, the Maps JavaScript API determines
the marker's distance from each cluster, and adds it to the closest
cluster.
You can set a MarkerClusterer option to adjust the cluster
position to reflect the average distance between all the markers that
are contained within it. You can also customize the
MarkerClusterer to modify other parameters like the grid size, the cluster
icon, cluster text, among others.
Take a look at below example:
I have used gridSize parameter to set a grouping value to my markers. This way you can achieve what you're looking for.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: -28.024,
lng: 140.887
}
});
// Create an array of alphabetical characters used to label the markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
gridSize: 10
});
}
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
},
{
lat: -43.998792,
lng: 170.463352
},
{
lat: -43.999792,
lng: 170.413352
},
{
lat: -43.999000,
lng: 170.463000
}
]
/* 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;
}
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBplDzEjv3SUmKPKj0IY-Iq4u_nB3z2Q1I&callback=initMap">
</script>
<div id="map"></div>
For an advance example, please take a look at this -> An example of MarkerClusterer v3 and for all examples, click here.

I'm trying to figure out how to translate a PHP array to json, to a javascript array of objects:
$latlng = array();
$properties = get_posts(array(
'posts_per_page' => -1,
'post_type' => array('house', 'townhouse', 'condo'),
'status' => 'publish'
));
foreach ($properties as $prop) {
$lat = get_field('latitude', $prop, false);
$lng = get_field('longitude', $prop, false);
array_push($latlng, array($lat, $lng));
}
echo json_encode($latlng);
wp_die();
But I need the final JS array to look like this:
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}
]
This is so I can use locations.map(function(location, i) { to iterate over the bounds.

Your $latlng is an array of arrays, and you want your JSON to be an array of objects, with lat and lng fields. So you need to do:
$latlng = array();
$properties = get_posts(array(
'posts_per_page' => -1,
'post_type' => array('house', 'townhouse', 'condo'),
'status' => 'publish'
));
foreach ($properties as $prop) {
$lat = get_field('latitude', $prop, false);
$lng = get_field('longitude', $prop, false);
array_push($latlng, array('lat' => $lat, 'lng' => $lng));
}
echo json_encode($latlng, JSON_NUMERIC_CHECK /* PHP >= 5.3.3 */);
wp_die();
We just pushed an object instead of an array containing the values:
array_push($latlng, array('lat' => $lat, 'lng' => $lng));
Hope it helps.

I'm using the Google Maps JavaScript API and I have to gray out the whole map excluding two dots on the map (ideally the line between two dots). The dot itself it's a GM coordinates.
As result I expect something similar with image below:

I can give you a hint.
If you array<array<LatLng>> to Polygon, you can make a hole polygon.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
#map_canvas {
width: 600px;
height: 400px;
border: 1px solid gray;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?language=ja"></script>
<script>
function initialize() {
var mapDiv = document.getElementById("map_canvas");
var map = new google.maps.Map(mapDiv, {
mapTypeId : google.maps.MapTypeId.ROADMAP
});
var paths = [[
{lat: 41.795692, lng: 140.756214},
{lat: 41.795492, lng: 140.756150},
{lat: 41.794700, lng: 140.757051},
{lat: 41.795556, lng: 140.757813},
{lat: 41.795764, lng: 140.757759},
{lat: 41.796140, lng: 140.758349},
{lat: 41.796044, lng: 140.758628},
{lat: 41.796468, lng: 140.759819},
{lat: 41.797283, lng: 140.759014},
{lat: 41.797243, lng: 140.758746},
{lat: 41.797811, lng: 140.758478},
{lat: 41.797915, lng: 140.758714},
{lat: 41.798995, lng: 140.758532},
{lat: 41.798611, lng: 140.757158},
{lat: 41.798459, lng: 140.757105},
{lat: 41.798403, lng: 140.756343},
{lat: 41.798587, lng: 140.756246},
{lat: 41.798763, lng: 140.754884},
{lat: 41.797795, lng: 140.754959},
{lat: 41.797667, lng: 140.755152},
{lat: 41.797067, lng: 140.754970},
{lat: 41.797035, lng: 140.754648},
{lat: 41.796180, lng: 140.753993},
{lat: 41.795892, lng: 140.755302},
{lat: 41.796004, lng: 140.755517}
], [
{lat: 41.79873502198214,lng: 140.75676172883607},
{lat: 41.79916701538921, lng: 140.75850996560666},
{lat: 41.79914485048169, lng: 140.7587355674591},
{lat: 41.7990097958377, lng: 140.75889128372955},
{lat: 41.79765499919136, lng: 140.75906845767213},
{lat: 41.796517596211274,lng: 140.76016803505706},
{lat: 41.796368000728584,lng: 140.76021618650816},
{lat: 41.79622196495789, lng: 140.76011429828645},
{lat: 41.795668, lng: 140.75844600000005},
{lat: 41.79445009984378, lng: 140.75732211342245},
{lat: 41.794408009120424,lng: 140.75713163558203},
{lat: 41.79443604749871, lng: 140.75693313624572},
{lat: 41.79504399484126, lng: 140.75620355952447},
{lat: 41.79469004147552, lng: 140.7551119011191},
{lat: 41.79468803224198, lng: 140.7549643802871},
{lat: 41.794772, lng: 140.75484099999994},
{lat: 41.795688013079555,lng: 140.75483010185235},
{lat: 41.79588801219829, lng: 140.75383221957395},
{lat: 41.796148, lng: 140.75363900000002},
{lat: 41.79740700714976, lng: 140.75463119510653},
{lat: 41.798787067556184,lng: 140.75458362698373},
{lat: 41.79894300457668, lng: 140.7547121759186},
{lat: 41.79898498098061, lng: 140.75494811176304},
{lat: 41.79872702373399, lng: 140.7566860846557}
], [
{lat: 41.79509359115337, lng: 140.7559088009109},
{lat: 41.795123461144776, lng: 140.75608584124757},
{lat: 41.79546948885738, lng: 140.7556779973297},
{lat: 41.79554756063853, lng: 140.7555651964035},
{lat: 41.795647713509155, lng: 140.7550391871414},
{lat: 41.794831758258425, lng: 140.75507730157472}
]];
// Draw polygon
var polygon = new google.maps.Polygon({
paths: paths,
map: map,
strokeColor: "blue",
strokeWeight: 2,
fillColor: "red",
fillOpacity: 0.75
});
var bounds = new google.maps.LatLngBounds();
polygon.getPath().forEach(function(position) {
bounds.extend(position);
});
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>

I am new to google maps api. I create a maps with hardcore values as markers. But I want to create my markers with the values came from database. Here is my code
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
});
var markers = [ // Here I set the hard core values for my markers.
{ lat: 22.64201389, lng: 88.43034722, name: "Airport" },
{ lat: 22.60944444, lng: 88.42694444, name: "Baguihati" },
{ lat: 22.53604167, lng: 88.36083333, name: "Ballygunge Phari" },
{ lat: 22.49895833, lng: 88.31902778, name: "Behala" },
{ lat: 22.65743056, lng: 88.36409722, name: "Dakshineshwar" },
{ lat: 22.62013889, lng: 88.39215278 , name: "Dum-Dum Station." },
{ lat: 22.52111111, lng: 88.36479167, name: "Gariahat" },
{ lat: 22.58763889, lng: 88.34027778, name: "Howrah" },
{ lat: 22.59131944, lng: 88.43291667, name: "Karunamayee East" },
{ lat: 22.52131944, lng: 88.38201389, name: "Kasba Bosepukur" },
{ lat: 22.60256944 , lng: 88.40166667 , name: "Lake Town" },
{ lat: 22.68993056, lng: 88.47569444, name: "Madhyam Gram_East" },
{ lat: 22.50875 , lng: 88.33284722 , name: " New Alipur" },
{ lat: 22.54409722 , lng: 88.36743056, name: "Park circus" },
];
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.name
});
}
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
var data = markers[index];
bounds.extend(new google.maps.LatLng(data.lat, data.lng));
}
map.fitBounds(bounds);
Please help me to set the database values in the maker.. The values will be comes from servlet.

You can write a PHP (or whatever the language you use) page which contacts with the database and return the details in it as JSON Array.So that you can easily call it via ajax and retrieve the values you need.If you are using servlets GSON library will be useful when converting objects to JSON. However you should have a database table which contains the latitude,longitude and the name.
maybe this code will help you,write this inside doGet() or doPost() in your servlet
Gson gson = new Gson();
java.sql.Connection con = new DBConn().getConnection(); //establish the database connection you use
String getquery = "SELECT * from markers";
ResultSet res = DBHandle.getData(con, getquery);
ArrayList<Marker> markerList;
markerList = new ArrayList<Marker>();
while (res.next()) {
Marker marker=new Marker(); //model class with attributes latitude,longitude and name along with their getters and setters
marker.setLatitude(res.getString("latitude"));
marker.setLongitude(res.getString("longitude"));
marker.setName(res.getString("name"));
markerList.add(marker);
}
String JsonString = gson.toJson(markerList, ArrayList.class);
out.print(JsonString);
And this would help you when retrieving it in javascript.I prefer using jquery for that.
You can try this code to retrieve it via jquery
$.getJSON("url_with_json_here", function(data){
for (var i=0, len=data.length; i < len; i++) {
data[i].latitude;
console.log(data[i].name);
console.log(data[i].longitude);
console.log(data[i].latitude);
}
});