Develop Reference

google heatmap API - visualization_impl.js:2 Uncaught (in promise) TypeError: Cannot read property 'NaN' of undefined

I'm working on a project where I have a JSON that looks like this
[
{
"lat": 53.1522756706757,
"lon": -0.487157731632087,
"size": 63,
"field": "TestField",
"variety": "TestVariety",
"count": 1
}
]
Which will have others with locations and count values.
I keep getting the above-titled error when using the following code.
let map;
let testField = new google.maps.LatLng(53.150, -0.488);
let options = {
zoom: 6,
center: testField,
mapTypeId: 'satellite',
};
function createMap(data) {
let mapElement = document.getElementById('map');
let geometry, weighted, count, heatData;
let heatmap, points;
map = new google.maps.Map(mapElement, options);
heatData = [];
for (var i = 0; i < data.length; i++) {
geometry = data[i];
weighted = {};
count = data[i].count;
weighted.location = new google.maps.LatLng(
data.lat,
data.lon);
weighted.weight = count
heatData.push(weighted);
}
points = new google.maps.MVCArray(heatData);
console.log(data);
heatmap = new google.maps.visualization.HeatmapLayer({
data: points,
opacity: 0.9,
radius: 20
});
heatmap.setMap(map);
}
$(function () {
$.ajax({
type: "GET",
url: "field_example.json",
dataType: "json",
success: createMap
});
});
There is something I'm not quite grasping here and help will be very much appreciated.

You get the error message: TypeError: Cannot read property 'NaN' of undefined because data.lat & data.lon are undefined. Changing data.lat to geometry.lat and data.lon to `geometry.lon (or using data[i] instead of data) fixes that.
for (var i = 0; i < data.length; i++) {
var weighted = {};
count = data[i].count;
weighted.location = new google.maps.LatLng(
data[i].lat,
data[i].lon);
weighted.weight = count
heatData.push(weighted);
}
heatmap = new google.maps.visualization.HeatmapLayer({
data: heatData
});
proof of concept fiddle
code snippet:
// This example requires the Visualization library. Include the libraries=visualization
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">
var map, heatmap;
function initMap() {
let map;
let testField = new google.maps.LatLng(53.150, -0.488);
let options = {
zoom: 6,
center: testField,
mapTypeId: 'satellite',
};
var data = [{
"lat": 53.1522756706757,
"lon": -0.487157731632087,
"size": 63,
"field": "TestField",
"variety": "TestVariety",
"count": 1
}]
function createMap(data) {
let mapElement = document.getElementById('map');
let count, heatData;
let heatmap, points;
map = new google.maps.Map(mapElement, options);
heatData = [];
console.log(data.length);
for (var i = 0; i < data.length; i++) {
var weighted = {};
count = data[i].count;
weighted.location = new google.maps.LatLng(
data[i].lat,
data[i].lon);
weighted.weight = count
heatData.push(weighted);
}
points = heatData;
console.log(points);
heatmap = new google.maps.visualization.HeatmapLayer({
data: heatData
});
heatmap.setMap(map);
}
createMap(data);
}
/* 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>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.41&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=visualization&callback=initMap">
</script>

Multiple markers with specific infotemplate content

When I'm looping through a list of addresses, I'm able to plot the markers for all the addresses fine. But when I click on any marker, the infowindow content shows data of only the last marker. How do I solve this?
Javscript
var map ={};
map.markers = [];
map.addresses = [
{
'line': '2101 K St',
'ref_no': '160621-000005'
},
{
'line': '2131 K St',
'ref_no': '170708-000015'
},
{
'line': '2321 K St',
'ref_no': '170707-000028'
}
];
.
.
.
map.map_object = new Map("esri_map", {
basemap: "topo",
center: [<lat>, <lng>],
zoom: 12
});
var locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
for(var i = 0; i < map.addresses.length; i++)
{
var addr = map.addresses[i];
var params = {
countryCode: "US",
maxLocations: 1,
address: {"SingleLine": addr.line}
};
locator.addressToLocations(params, function(candidates){
locatorDone(candidates, addr);
});
}
function locatorDone(candidates, addr)
{
.
.
.
var html = "<h5>"+addr.line+"</h5>";
html += "<p>Ref#: "+addr.ref_no+"</p>";
var infoTemplate = new esri.InfoTemplate(addr.ref_no, html); // <--- Problem lies here
var graphic = new esri.Graphic(pt, symbol,'',infoTemplate);
map.map_object.graphics.add(graphic);
map.markers.push(graphic);
}
P.S: I've solved similar problems (in case of Google Maps API) by using closures. But I'm not sure how to use that in this case.

You can wrap the inside of the for loop in a self invoking function which will provide the closure. Something like this:
for(var i = 0; i < map.addresses.length; i++)
(function (i) {
var addr = map.addresses[i];
var params = {
countryCode: "US",
maxLocations: 1,
address: {"SingleLine": addr.line}
};
locator.addressToLocations(params, function(candidates){
locatorDone(candidates, addr);
});
})(i)
This will make i local to this code block. As it is now in your code all addr are referencing the last address because the for loop has finished running when you call locatorDone asynchronously. Alternatively you can use let like so: for (let i = 0; ... if you don't need this code to run on Internet Explorer below version 11.

iterate arrays with forEach Loop

in this project there are 3 files, index.html, helper.js and resumeBuilder.js. The last one is the file I work with all the time.
My problem in this project is that I can't figure how to make images array,which is inside the projects array to display in my Resume, and the same for the onLineCourses array which is inside the schools array. This online school needs to make all arrays with
forEach loop. please if someone can help to write the code I have to write to make it display, I am searching for a week and can't figure it out!
resumeBuilder.js
var projects = {
"projects" : [
{
"title":"",
"location":"",
"dates":"",
"description":"",
},
{
"title":"",
"location":"",
"dates":"",
"description":"",
>
> "images":["", ""]
}
],
};
//projects function
projects.display = function(){
$.each(projects.projects, function(i){
$("#projects").append(HTMLprojectStart);
var myProjects = projects.projects[i];
var formattedTitle = HTMLprojectTitle.replace("%data%", myProjects.title);
$(".project-entry:last").append(formattedTitle);
var formattedDates = HTMLprojectDates.replace("%data%", myProjects.dates);
$(".project-entry:last").append(formattedDates);
var formattedDescription = HTMLprojectDescription.replace("%data%", myProjects.description);
$(".project-entry:last").append(formattedDescription);
> //image array here!
> var formattedImage = HTMLprojectImage.replace("%data%",projects.images);
> $("#projects").append(HTMLprojectStart);
> $(".project-entry:last").append(formattedImage);
});
};
projects.display();
> var education = {
"schools": [
{
"name" : "",
"location" : "",
"degree":",
"majors":["","",""],
"dates" : "2",
"url" : ""
},
{
"name" : "",
"location" :"",
"degree":"",
"majors":[""],
"dates" : "",
"url" : ""
}
],
//create onLine Courses
> "onlineCourses" : [
> {
> "title" : "",
> "school" : "",
> "dates" : "",
> "url" : ""
> } ] };
//education function
education.display = function(){
$.each(education.schools, function(i) {
var mySchools = education.schools[i];
$("#education").append(HTMLschoolStart);
var formattedName = HTMLschoolName.replace("%data%",mySchools.name);
var formattedDegree = HTMLschoolDegree.replace("%data%",mySchools.degree);
var formattedNameDegree = formattedName + formattedDegree;
$(".education-entry:last").append(formattedNameDegree);
var formattedDates = HTMLschoolDates.replace("%data%",mySchools.dates);
$(".education-entry:last").append(formattedDates);
var formattedLocation = HTMLschoolLocation.replace("%data%",mySchools.location);
$(".education-entry:last").append(formattedLocation);
var formattedMajor = HTMLschoolMajor.replace("%data%",mySchools.majors);
$(".education-entry:last").append(formattedMajor);
});
//onLine courses here
> $("#education").append(HTMLonlineClasses);
> $("#education").append(HTMLschoolStart); var courses =
> education.onlineCourses; var formattedTitle =
> HTMLonlineTitle.replace("%data%", courses.title); var
> formattedSchool = HTMLonlineSchool.replace("%data%",courses.name);
> var formattedDates = HTMLonlineDates.replace("%data%", courses.dates);
> var formattedOnline = formattedTitle + formattedSchool +
> formattedDates;
> $(".education-entry:last").append(formattedOnline);
>
> };
>
> education.display();
helper.js
> /*
This file contains all of the code running in the background that makes resumeBuilder.js possible. We call these helper functions because they support your code in this course.
Don't worry, you'll learn what's going on in this file throughout the course. You won't need to make any changes to it until you start experimenting with inserting a Google Map in Problem Set 3.
/*
These are HTML strings. As part of the course, you'll be using JavaScript functions
replace the %data% placeholder text you see in them.
*/
var HTMLheaderName = '<h1 id="name">%data%</h1>';
var HTMLheaderRole = '<span>%data%</span><hr>';
var HTMLcontactGeneric = '<li class="flex-item"><span class="orange-text">%contact%</span><span class="white-text">%data%</span></li>';
var HTMLmobile = '<li class="flex-item"><span class="orange-text">mobile</span><span class="white-text">%data%</span></li>';
var HTMLemail = '<li class="flex-item"><span class="orange-text">email</span><span class="white-text">%data%</span></li>';
var HTMLtwitter = '<li class="flex-item"><span class="orange-text">twitter</span><span class="white-text">%data%</span></li>';
var HTMLgithub = '<li class="flex-item"><span class="orange-text">github</span><span class="white-text">%data%</span></li>';
var HTMLblog = '<li class="flex-item"><span class="orange-text">blog</span><span class="white-text">%data%</span></li>';
var HTMLlocation = '<li class="flex-item"><span class="orange-text">location</span><span class="white-text">%data%</span></li>';
var HTMLbioPic = '<img src="%data%" class="biopic">';
var HTMLwelcomeMsg = '<span class="welcome-message">%data%</span>';
var HTMLskillsStart = '<h3 id="skills-h3">Skills at a Glance:</h3><ul id="skills" class="flex-column"></ul>';
var HTMLskills = '<li class="flex-item"><span class="white-text">%data%</span></li>';
var HTMLworkStart = '<div class="work-entry"></div>';
var HTMLworkEmployer = '<a href="#">%data%';
var HTMLworkTitle = ' - %data%</a>';
var HTMLworkDates = '<div class="date-text">%data%</div>';
var HTMLworkLocation = '<div class="location-text">%data%</div>';
var HTMLworkDescription = '<p><br>%data%</p>';
var HTMLprojectStart = '<div class="project-entry"></div>';
var HTMLprojectTitle = '%data%';
var HTMLprojectDates = '<div class="date-text">%data%</div>';
var HTMLprojectDescription = '<p><br>%data%</p>';
var HTMLprojectImage = '<img src="%data%">';
var HTMLschoolStart = '<div class="education-entry"></div>';
var HTMLschoolName = '<a href="#">%data%';
var HTMLschoolDegree = ' -- %data%</a>';
var HTMLschoolDates = '<div class="date-text">%data%</div>';
var HTMLschoolLocation = '<div class="location-text">%data%</div>';
var HTMLschoolMajor = '<em><br>Major: %data%</em>';
var HTMLonlineClasses = '<h3>Online Classes</h3>';
var HTMLonlineTitle = '<a href="#">%data%';
var HTMLonlineSchool = ' - %data%</a>';
var HTMLonlineDates = '<div class="date-text">%data%</div>';
var HTMLonlineURL = '<br>%data%';
var internationalizeButton = '<button>Internationalize</button>';
var googleMap = '<div id="map"></div>';
$(document).ready(function() {
$('button').click(function() {
var $name = $('#name');
var iName = inName($name.text()) || function(){};
$name.html(iName);
});
});
/*
The next few lines about clicks are for the Collecting Click Locations quiz in the lesson Flow Control from JavaScript Basics.
*/
var clickLocations = [];
function logClicks(x,y) {
clickLocations.push(
{
x: x,
y: y
}
);
console.log('x location: ' + x + '; y location: ' + y);
}
$(document).click(function(loc) {
// your code goes here!
});
var map; // declares a global map variable
/*
Start here! initializeMap() is called when page is loaded.
*/
function initializeMap() {
var locations;
var mapOptions = {
disableDefaultUI: true
};
/*
For the map to be displayed, the googleMap var must be
appended to #mapDiv in resumeBuilder.js.
*/
map = new google.maps.Map(document.querySelector('#map'), mapOptions);
/*
locationFinder() returns an array of every location string from the JSONs
written for bio, education, and work.
*/
function locationFinder() {
// initializes an empty array
var locations = [];
// adds the single location property from bio to the locations array
locations.push(bio.contacts.location);
// iterates through school locations and appends each location to
// the locations array. Note that forEach is used for array iteration
// as described in the Udacity FEND Style Guide:
// https://udacity.github.io/frontend-nanodegree-styleguide/javascript.html#for-in-loop
education.schools.forEach(function(school){
locations.push(school.location);
});
// iterates through work locations and appends each location to
// the locations array. Note that forEach is used for array iteration
// as described in the Udacity FEND Style Guide:
// https://udacity.github.io/frontend-nanodegree-styleguide/javascript.html#for-in-loop
work.jobs.forEach(function(job){
locations.push(job.location);
});
return locations;
}
/*
createMapMarker(placeData) reads Google Places search results to create map pins.
placeData is the object returned from search results containing information
about a single location.
*/
function createMapMarker(placeData) {
// The next lines save location data from the search result object to local variables
var lat = placeData.geometry.location.lat(); // latitude from the place service
var lon = placeData.geometry.location.lng(); // longitude from the place service
var name = placeData.formatted_address; // name of the place from the place service
var bounds = window.mapBounds; // current boundaries of the map window
// marker is an object with additional data about the pin for a single location
var marker = new google.maps.Marker({
map: map,
position: placeData.geometry.location,
title: name
});
// infoWindows are the little helper windows that open when you click
// or hover over a pin on a map. They usually contain more information
// about a location.
var infoWindow = new google.maps.InfoWindow({
content: name
});
// hmmmm, I wonder what this is about...
google.maps.event.addListener(marker, 'click', function() {
// your code goes here!
//quiz 4 lesson 6
infowindow.open(map, marker);
});
// this is where the pin actually gets added to the map.
// bounds.extend() takes in a map location object
bounds.extend(new google.maps.LatLng(lat, lon));
// fit the map to the new marker
map.fitBounds(bounds);
// center the map
map.setCenter(bounds.getCenter());
}
/*
callback(results, status) makes sure the search returned results for a location.
If so, it creates a new map marker for that location.
*/
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
createMapMarker(results[0]);
}
}
/*
pinPoster(locations) takes in the array of locations created by locationFinder()
and fires off Google place searches for each location
*/
function pinPoster(locations) {
// creates a Google place search service object. PlacesService does the work of
// actually searching for location data.
var service = new google.maps.places.PlacesService(map);
// Iterates through the array of locations, creates a search object for each location
locations.forEach(function(place){
// the search request object
var request = {
query: place
};
// Actually searches the Google Maps API for location data and runs the callback
// function with the search results after each search.
service.textSearch(request, callback);
});
}
// Sets the boundaries of the map based on pin locations
window.mapBounds = new google.maps.LatLngBounds();
// locations is an array of location strings returned from locationFinder()
locations = locationFinder();
// pinPoster(locations) creates pins on the map for each location in
// the locations array
pinPoster(locations);
}
/*
Uncomment the code below when you're ready to implement a Google Map!
*/
// Calls the initializeMap() function when the page loads
window.addEventListener('load', initializeMap);
// Vanilla JS way to listen for resizing of the window
// and adjust map bounds
window.addEventListener('resize', function(e) {
//Make sure the map bounds get updated on page resize
map.fitBounds(mapBounds);
});

How to delete a direction markers in google map API

I want to delete a google map direction markers after a search without reloading the page. I've made an example but its not working :
//First of all testing if there is already a direction on the map
if(directionsService != null)
{
directionsService.setMap(null);
directionsService = null;
}
//Then display the new one
var origin = $('#de').val();
var destination = $('#en').val();
var request = {
origin : origin,
destination : destination,
travelMode : google.maps.DirectionsTravelMode.DRIVING
}
var directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(response, status){
if(status == google.maps.DirectionsStatus.OK){
direction.setDirections(response);
showSteps(response);
}
});
all this code is on a function called by a click event
<button id="envoyer" id=="env" onclick="javascript:c()">Send</button>
so any one have an idea thanks !
Update
function showSteps(directionResult) {
var markerArray = [];
var myRoute = directionResult.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
var marker = new google.maps.Marker({
position: myRoute.steps[i].start_location,
map: map
});
attachInstructionText(marker, myRoute.steps[i].instructions);
markerArray[i] = marker;
}
}

When clearing the itinerary, using directionsService.setMap(null); you will have to remove the MapMarkers, which aren't directly connected to the Direction - Service, seperately too.
You have already stored them in markerArray inside of your showSteps - function, so you would need to move this variable out of the function into an outer scope or let the function return it to be able to access it.
By doing this, you can simply loop over the markerArray and call .setMap(null) on each stored Marker, thus removing them from the map.
var markerArray = [];
function showSteps(directionResult){
// your code
}
//function to remove MapMarkers
function removeMapMarkers(){
for(var i=0; i<markerArray.length; i+=1){
markerArray[i].setMap(null)
}
markerArray = [];
}

passing function n times in for loop condition in google map code each time wait and pass the function

This is create a Google map to pass n number of address one time in Google map that is not possible that's way I am passing function set interval (2 sections ) to each iteration function
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var n;
var j=1;
var array_list= new Array(n);
var array_storename=new Array(n);
function InitializeMap()
{
directionsDisplay = new google.maps.DirectionsRenderer();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions =
{
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directionpanel'));
var control = document.getElementById('control');
control.style.display = 'block';
document.getElementById('sorttable').style.display="none"
}
function calcRoute(dist,varab)
{
n=document.getElementById('Countnumbers').value;
var start = document.getElementById('startvalue').value;
var end = document.getElementById(dist).innerHTML;
// end=end.replace(/[!##$%&^*()-+=|\/:;><~]/gi," ");
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
document.getElementById('sorttable').style.display="block";
document.getElementById("total").style.visibility="hidden";
directionsDisplay.setDirections(response);
var route = response.routes[0];
for (var i = 0; i < route.legs.length; i++)
{
var a=route.legs[i].distance.text;
var b=route.legs[i].duration.text;
var bc=a+",About :"+b;
var lblid="Labe"+varab;
document.getElementById(lblid).innerHTML=bc;
var store="lblstore"+varab;
document.getElementById(store).title=end;
var len=10.0;
var dd=route.legs[i].distance.value/1000;
array_list[varab]=dd;
array_list.sort(function(a,b){return a-b});
}
}
});
}
function Button1_onclick()
{
for(j=1;j<=n;j++)
{
document.getElementById('sorttable').style.display="block";
n=document.getElementById('Countnumbers').value;
var ss="lblstorename"+j;
var ss1 =document.getElementById(ss).innerHTML;
//this labels are store my addresss
calcRoute(ss,j);
}
}
//i am using google map in google map n number address are not go once thats way i am setTimeout (or) set interval method inside for loop

In order to add 2sec delay between each iteration, you need to recurrsively call ur calcRoute(..) and move your for-loop code inside calcRoute method.
Your code should look something like this -
function Button1_onclick() {
document.getElementById('sorttable').style.display="block";
n=document.getElementById('Countnumbers').value;
var ss="lblstorename"+n;//use n insteadof j
var ss1 =document.getElementById(ss).innerHTML;
calcRoute(ss,j);//only your first call is inside this method. rest all will be recurrsive
}
// making your calcRoute recurrsive
function calcRoute(ss, j){
//your code here
if(--j>0){
var ss="lblstorename"+j;
var ss1 =document.getElementById(ss).innerHTML;//not sure why are u using ss1
setTimeout(function(){calcRoute(ss, j)}, 2000);//here you set your time delay
}
}