Json Result MVC Controller to Google Map via Jquery - javascript

I have a problem because i want to use this Json Result that returns Json List but my problem is how should i call the json result that i will be using to geocode and add marker to my Google Maps ? I used getJson and its not functioning but i dont tried yet the .ajax function
Here is my sets of codes:
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
var minZoomLevel = 4;
var zooms = 7;
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('map'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(38.50, -90.50),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Bounds for North America
var strictBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(15.70, -160.50),
new google.maps.LatLng(68.85, -55.90)
);
// Listen for the dragend event
google.maps.event.addListener(map, 'dragend', function () {
if (strictBounds.contains(map.getCenter())) return;
// We're out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = strictBounds.getNorthEast().lng(),
maxY = strictBounds.getNorthEast().lat(),
minX = strictBounds.getSouthWest().lng(),
minY = strictBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.setCenter(new google.maps.LatLng(y, x));
});
// Limit the zoom level
google.maps.event.addListener(map, 'zoom_changed', function () {
if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
});
}
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
function codeAddress() {
var infowindow = new google.maps.InfoWindow();
$.getJson("Dashboard/DashboardIndex",null , function(address) {
$.each(address, function () {
var currVal = $(this).val();
address.each(function () {
geocoder.geocode({ 'address': currVal }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
icon: iconBase + 'man.png',
position: results[0].geometry.location,
title: currVal
})
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(currVal);
infowindow.open(map, marker);
}
})(marker, currVal));
address.push(marker);
}
else if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
setTimeout(codeAddress, 2000);
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
});
});
});
return false;
}
window.onload = function () {
initialize();
codeAddress();
}
</script>
And my JsonResult at my Controller
public JsonResult LoadWorkerList()
{
var workerList = new List<Worker_Address>();
// check if search string has value
// retrieve list of workers filtered by search criteria
var list = (from a in db.Worker_Address
where a.LogicalDelete == false
select a).ToList();
List<WorkerAddressInfo> wlist = new List<WorkerAddressInfo>();
foreach (var row in list)
{
WorkerAddressInfo ci = new WorkerAddressInfo
{
ID = row.ID,
Worker_ID = row.WorkerID,
AddressLine1 = row.Address_Line1 + " " + row.Address_Line2+ " " +row.City + " "+ GetLookupDisplayValById(row.State_LookID),
LogicalDelete = row.LogicalDelete
};
wlist.Add(ci);
}
return Json(wlist.ToList().OrderBy(p => p.AddressLine1), JsonRequestBehavior.AllowGet);
}
Im thanking some who could help me in Advance :)

It's hard to guess where it goes wrong since you didn't post the JSON format and are getting errors (toLowerCase) of code you haven't posted. I think it's in the following area:
function codeAddress() {
var infowindow = new google.maps.InfoWindow();
$.getJson("Dashboard/DashboardIndex",null , function(address) {
console.log("full json object",address);//<--should show an array of objects
$.each(address, function () {
console.log(this);//<--here you can see what the JSON object is
var currVal = this["AddressLine1"];//<--guess from what your C# code looks like
//next each doesn't make much sense unless you have an array of arrays
// but the C# code makes json for a list (not a list of lists)
You can use IE for your console output but don't bother posting the output here because I can already tell you it's going to be [Object, object]. To get useful info you're going to have to use firefox with firebug or Chrome. To see the console you can press F12
The line:
setTimeout(codeAddress, 2000);
Could be optimized since now when you are making too many requests you'll fetch the entire address list again and start from the beginning instead of "waiting" for 2 seconds and continue where you were.
The following code:
map.setCenter(results[0].geometry.location);
Why set the center of the map within the loop? It'll just end up having the center of the last found address so you may as well do it outside the loop to set the center to last found address.

Related

Grabs addresses from table and displays markers on map using Google Maps API but marker's hover title or infoWindow (onclick) doesn't work

This script can be used as a standalone javascript or greasemonkey script. What I am trying to fix is the hover title and on-click's info-window (it should display the address). here is a jsFiddle
// ==UserScript==
// #name mapMarkers
// #namespace mapMarkers
// #include https://www.example.com/*
// #description map markers of addresses in table
// #version 1
// #grant none
// ==/UserScript==
// find the table and loop through each rows to get the 11th, 12th, 13th cell's content (street address, city and zip respectively
// convert to lat/lon and show markers on map
if (document.getElementById('main_report') !== null) {
API_js_callback = 'https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initialize';
var script = document.createElement('script');
script.src = API_js_callback;
var head = document.getElementsByTagName("head")[0];
(head || document.body).appendChild(script);
var Table_1 = document.getElementById('main_report');
var DIVmap = document.createElement('div');
DIVmap.id = 'DIVmap';
DIVmap.style.border = '2px coral solid';
DIVmap.style.cursor = 'pointer';
DIVmap.style.display = '';
DIVmap.style.height = '35%';
DIVmap.style.margin = '1';
DIVmap.style.position = 'fixed';
DIVmap.style.padding = '1';
DIVmap.style.right = '1%';
DIVmap.style.bottom = '1%';
DIVmap.style.width = '35%';
DIVmap.style.zIndex = '99';
var DIVinternal = document.createElement('div');
DIVinternal.id = 'DIVinternal';
DIVinternal.style.height = '100%';
DIVinternal.style.width = '100%';
DIVinternal.style.zIndex = '999';
document.body.appendChild(DIVmap);
DIVmap.appendChild(DIVinternal);
//Adds a button which allows the user to re-run calcRoute
var reloadMapButton = document.createElement("button");
reloadMapButton.setAttribute("type", "button");
reloadMapButton.setAttribute("href", "#");
reloadMapButton.textContent="Reload map";
reloadMapButton.id="calcRoute";
reloadMapButton.style.zIndex = '1000';
document.getElementById('Content_Title').appendChild(reloadMapButton);
window.initialize = setTimeout(function () {
var myWindow;
try{
myWindow = unsafeWindow;
}catch(e){
myWindow = window;
}
google = myWindow.google;
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
var myLoc = new google.maps.LatLng(28.882193,-81.317936);
var myOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: myLoc
}
map = new google.maps.Map(document.getElementById("DIVinternal"), myOptions);
var infoWindow1 = new google.maps.InfoWindow();
//var bounds = new google.maps.LatLngBounds();
var geocoder = new google.maps.Geocoder();
function codeAddress(address,i) {
setTimeout( function () { // timer to avoid google geocode limits
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}, i * 350);
}
function calcRoute() {
if (Table_1.rows.length > 1) { // table has 1 empty row if no search results are returned and first row is always empty
var newPoint;
for (var i = 1, row; row = Table_1.rows[i]; i++) {
newPoint = codeAddress(row.cells[10].title + ', ' + row.cells[11].innerHTML + ', ' + row.cells[12].innerHTML, i);
// bounds.extend(newPoint);
marker = new google.maps.Marker({
position: newPoint,
map: map,
title: row.cells[10].title + ', ' + row.cells[11].innerHTML + ', ' + row.cells[12].innerHTML
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow1.setContent(row.cells[10].title + ', ' + row.cells[11].innerHTML + ', ' + row.cells[12].innerHTML);
infoWindow1.open(map, this);
});
// Automatically center the map fitting all markers on the screen
// map.fitBounds(bounds);
}
}
}
//reloadMapButton.addEventListener('click', calcRoute);
document.getElementById("calcRoute").onclick = calcRoute;
calcRoute();
}, 1000);
} // if (document.getElementById('main_report') !== null)
sample data
Answer copied from the Reddit post:
If you carefully think through the code step by step, you can see why the infowindow isn't assigning itself to the markers. Starting from the calcRoute function:
if the table is more than one row
create newPoint variable
for each row in the table starting with the second one:
call the codeAddress function and assign it to newPoint
Let me cut in here. This is where your confusion is starting. codeAddress has no return statement (and even if it did, it would be asynchronous and wouldn't matter [AJAX]), so it isn't actually doing anything to newPoint. The whole marker is being created inside the codeAddress function, rendering the lines below this useless -- there is no position stored in newPoint so no marker is created, and thus no infoWindow is created.
Instead, you have to create the infoWindow inside the geocoding callback, right after you create the marker. You also have to assign that infoWindow to the marker using a click event. Also, if you want the hover title, just add it as a property of the marker called title.
The final code is here: http://pastebin.com/3rpWEnrp
You'll notice I cleaned it up a bit to make it more readable and clear:
The document's head can be accessed using document.head -- no need for getting it by the tag name
There is a shorthand for assigning two variables the same value: x = y = 3
No need for the z-index on the internal div; the external div already has it. (think of this like hold a piece of cardboard over something--anything on the cardboard is also lifted)
No need for the unsafeWindow; this is literally unsafe
Shorthand for definining multiple variables at once is var x = 3, y = 4;
You don't need the codeAddress function because you only call it once, so the whole contents of this just gets put into the calcRoute function.
It's less intrusive to use the console instead of alert, unless you really want the user to know, and in that case you need a simpler message
Why check if the table is longer than one row when the if statement won't fire in that case because it starts on row 2?
Change your calcRoute() function to call another function for each loop iteration. This will capture that function's parameters and local variables in a closure, so they will remain valid in the asynchronous event handler nested inside it.
You have a lengthy string expression repeated three times. Pull that out into a common variable so you only have to do it once.
Use var on your local variables. You're missing one on marker.
Be careful of your indentation. It is not consistent in your code: the marker click listener is not indented the same as the rest of the function it is nested inside. This makes it hard to see what is nested inside what.
Do not use this loop style:
for( var i = 1, row; row = Table_1.rows[i]; i++ ) { ... }
I used to advocate this type of loop, but it turned out to not be such a good idea. In an optimizing JavaScript environment, it is likely to force the array to become de-optimized. That may or may not happen in your particular code, and the array may be short enough that it just doesn't matter, but it's not a good habit these days. You're better off with a conventional loop with an i < xxx.length test.
So putting those tips together, we have this for your calcRoute():
function calcRoute() {
// table has 1 empty row if no search results are returned,
// and first row is always empty
if( Table_1.rows.length < 2 )
return;
for( var i = 1; i < Table_1.rows.length; i++ ) {
addMarker( i );
}
}
function addMarker( i ) {
var row = Table_1.rows[i];
var title =
row.cells[10].title + ', ' +
row.cells[11].innerHTML + ', ' +
row.cells[12].innerHTML;
var newPoint = codeAddress( title, i );
var marker = new google.maps.Marker({
position: newPoint,
map: map,
title: title
});
google.maps.event.addListener( marker, 'click', function () {
infoWindow1.setContent( title );
infoWindow1.open( map, this );
});
}
There are other problems here. You're calling this function:
var newPoint = codeAddress( ... );
But codeAddress() does not return a value! Nor could it return any useful value, because the function issues an asynchronous geocoder request. If you want to use the location provided by the geocoder, you will need to call a function from within the geocoder callback. I don't understand what you're trying to well enough to make a more specific suggestion here.
Thanks mostly to IanSan5653 on Reddit, I used mostly his code but had to change it a little. Here is working version on jsFiddle and the code below:
// ==UserScript==
// #name mapMarkers
// #namespace mapMarkers
// #include https://www.volusia.realforeclose.com/*
// #description map markers of addresses in table
// #version 1
// #grant none
// ==/UserScript==
// find the table and loop through each rows to get the 11th, 12th, 13th cell's content (street address, city and zip respectively
// convert to lat/lon and show markers on map
if (document.getElementById('main_report') != null) {
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initialize';
(document.head || document.body).appendChild(script);
var Table_1 = document.getElementById('main_report');
var DIVmap = document.createElement('div');
DIVmap.id = 'DIVmap';
DIVmap.style.border = '2px coral solid';
DIVmap.style.height = DIVmap.style.width = '35%';
DIVmap.style.margin = DIVmap.style.padding = '1';
DIVmap.style.position = 'fixed';
DIVmap.style.right = DIVmap.style.bottom = '1%';
DIVmap.style.zIndex = '999';
var DIVinternal = document.createElement('div');
DIVinternal.id = 'DIVinternal';
DIVinternal.style.height = DIVinternal.style.width = '100%';
document.body.appendChild(DIVmap);
DIVmap.appendChild(DIVinternal);
//Adds a button which allows the user to re-run calcRoute
var reloadMapButton = document.createElement("button");
reloadMapButton.setAttribute("type", "button");
reloadMapButton.textContent="Reload map";
reloadMapButton.id="calcRoute";
reloadMapButton.style.zIndex = '1000';
document.getElementById('Content_Title').appendChild(reloadMapButton);
// reloadMapButton.onclick = calcRoute;
window.initialize = function () {
var google = window.google,
directionsService = new google.maps.DirectionsService(),
directionsDisplay = new google.maps.DirectionsRenderer(),
myLoc = new google.maps.LatLng(28.882193,-81.317936),
myOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: myLoc
},
infoWindow1 = new google.maps.InfoWindow(),
map = new google.maps.Map(document.getElementById("DIVinternal"), myOptions),
geocoder = new google.maps.Geocoder();
function calcRoute() {
for (var i = 1, row; row = Table_1.rows[i]; i++) {
console.log("processing row " + i);
address = row.cells[10].title + ', ' + row.cells[11].innerHTML + ', ' + row.cells[12].innerHTML,
setTimeout( function(addr) { // timer to avoid google geocode limits
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: addr
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow1.setContent(addr);
infoWindow1.open(map,this);
});
} else {
console.error("Geocode was not successful for the following reason: " + status);
}
});
}(address), i * 400);
}
}
document.getElementById("calcRoute").onclick = calcRoute;
calcRoute();
}
}

Google Maps JavaScript API v3: getDetails(request, callback) for multiple places

I have implemented Google Maps JavaScript API v3 to contrive a custom store locator for my company's website. Let me start by saying that the code I have works for the two stores, but it would not be efficient or feasible if I added any more stores because of the "hacky" code used to make it work.
I am using the Google Maps Places Library to send "place details" requests to Google using the getDetails() method. On the callback, I am receiving the InfoWindow information (name, address, location) for each of my store locations.
I create a marker for each place, then use google.maps.event.addListener to coordinate the Place, Marker, and InfoWindow objects. This is where I encounter problems. The place details requests are not always received in the same order they are sent which throws off the indexing of my buttons that have a data-marker attribute set to 0 and 1, respectively, to correlate to the map markers.
Is there anyway to delay the second request until the first is finished? or write the script in a way that maintains ordinal integrity?
The first snippet of code below is my event handler to bind the click listener to each button using the .place.placeId property of the marker rather than the preferred technique of using the index of the markers array (the markers array holds the place details for the two stores).
None of the demos or examples in the Google Maps API documentation (Places Library) delineate the procedure for multiple places. Any tips, resources, or suggestions will be much appreciated
Website: http://m.alliancepointe.com/locate.html
Event Handler
$(".loc-btn").on('click', function () {
var me = $(this).data('marker');
var place1 = markers[0].place.placeId;
var myIndex = me == place1 ? 0 : 1;
google.maps.event.trigger(markers[myIndex], 'click');
});
Full JS
var markers = [];
var map;
var infowindow;
var service;
function initialize() {
var index;
var daddr;
var idVA = 'ChIJKezXgqmxt4kRXrAnqIwIutA';
var geoVA = '38.80407,-77.062881/Alliance+Pointe,+LLC';
var idDC = 'ChIJDQlqOLG3t4kRqDU3uNoy4hs';
var geoDC = '38.90188,-77.049161/Alliance+Pointe,+LLC';
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
center: {lat: 38.90188, lng: -77.049161},
zoom: 10,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
var request = [
{placeId: idVA, location: {lat: 38.80407, lng: -77.062881}},
{placeId: idDC, location: {lat: 38.90188, lng: -77.049161}}
];
var office = [
"Main Office",
"Principal Office"
];
infowindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
for (var i = 0; i < request.length; i++) {
service.getDetails(request[i], function (placeResult, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var id = placeResult.place_id;
var location = placeResult.geometry.location;
var trimAddr = placeResult.formatted_address.split(", ");
var image = {
url: 'images/icons/AP-marker_large.png',
scaledSize: new google.maps.Size(32, 54)
};
var marker = new google.maps.Marker({
map: map,
place: {
placeId: id,
location: location
},
icon: image,
title: "Get directions"
});
google.maps.event.addListener(marker, 'click', function () {
if (id == idVA) {
index = 0;
daddr = geoVA;
trimAddr[0] = "1940 Duke St #200";
} else {
index = 1;
daddr = geoDC;
trimAddr[0] = "2200 Pennsylvannia Ave NW";
}
infowindow.setContent('<div class="info-window title">' + placeResult.name + "</div><div class='info-window sub-title'>" + office[index] + '</div><div class="info-window">' + trimAddr[0] + '<br>' + trimAddr[1] + ", " + trimAddr[2] + '</div><div class="info-window direction-div"><div class="direction-icon"></div><a class="google-link save-button-link" target="_blank" href="https://www.google.com/maps/dir/Current+Location/' + daddr + '">Get Directions</a></div>');
infowindow.open(map, marker);
});
markers.push(marker);
//bounds.extend(location);
}
});
}
if (!bounds.isEmpty()) {
map.fitBounds(bounds);
}
$(".loc-btn").on('click', function () {
var me = $(this).data('marker');
var place1 = markers[0].place.placeId;
var myIndex = me == place1 ? 0 : 1;
google.maps.event.trigger(markers[myIndex], 'click');
//console.log("PlaceId = " + me);
//console.log("Adj index = " + myIndex);
//console.log("0:VA array index = " + markers[0].place.placeId);
//console.log("1:DC array index = " + markers[1].place.placeId);
});
google.maps.event.addListenerOnce(map, 'idle', function () {
$.mobile.loading("hide");
$(".loc-btn").prop("disabled",false);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
HTML: Map & Buttons
<div data-role="content" class="full-width">
<figure id="map"></figure>
<div class="loc-btn-set">
<button disabled data-role="none" data-theme="a" data-marker="ChIJKezXgqmxt4kRXrAnqIwIutA" class="loc-btn nightly-button">VA <span>- Alexandria</span></button>
<button disabled data-role="none" data-theme="b" data-marker="ChIJDQlqOLG3t4kRqDU3uNoy4hs" class="loc-btn nightly-button">DC <span>- Washington</span></button>
</div>
</div>
The simpliest approach based on the given code would be to add the click-handler for the buttons inside the getDetails-callback.
Add this after the creation of the marker:
$('.loc-btn[data-marker="'+id+'"]').click(function(){
google.maps.event.trigger(marker,'click');
});

Cannot call method 'toLowerCase' of undefined GetJson

I'm Stucked in a situation where i need to fix my codes when getting Jsonresult for my Google Maps v3 but when i am in the loop to load my map with worker from jquery, this error shows Uncaught TypeError: Cannot call method 'toLowerCase' of undefined i don't know how to fix this and i dont see some fixtures with this problem . I hope Someone can help me with this
This is my Codes for my Javascript:
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
var minZoomLevel = 4;
var zooms = 7;
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('map'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(38.50, -90.50),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Bounds for North America
var strictBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(15.70, -160.50),
new google.maps.LatLng(68.85, -55.90)
);
// Listen for the dragend event
google.maps.event.addListener(map, 'dragend', function () {
if (strictBounds.contains(map.getCenter())) return;
// We're out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = strictBounds.getNorthEast().lng(),
maxY = strictBounds.getNorthEast().lat(),
minX = strictBounds.getSouthWest().lng(),
minY = strictBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.setCenter(new google.maps.LatLng(y, x));
});
// Limit the zoom level
google.maps.event.addListener(map, 'zoom_changed', function () {
if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
});
}
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
function codeAddress() {
$.getJSON("/Dashboard/LoadWorkerList", function (address) {
var infowindow = new google.maps.InfoWindow();
$.each(address,function (index,currVal) {
currVal = $(this).val();
geocoder.geocode({ 'address': currVal }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
icon: iconBase + 'man.png',
position: results[0].geometry.location,
title: currVal
})
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(currVal);
infowindow.open(map, marker);
}
})(marker, currVal));
address.push(marker);
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
});
});
return true;
}
window.onload = function () {
initialize();
codeAddress();
}
</script>
This is the code for LoadWorkerList
public JsonResult LoadWorkerList()
{
var workerList = new List<Worker_Address>();
// check if search string has value
// retrieve list of workers filtered by search criteria
var list = (from a in db.Worker_Address
where a.LogicalDelete == false
select a).ToList();
List<WorkerAddressInfo> wlist = new List<WorkerAddressInfo>();
foreach (var row in list)
{
WorkerAddressInfo ci = new WorkerAddressInfo
{
ID = row.ID,
Worker_ID = row.WorkerID,
AddressLine1 = row.Address_Line1 + " " + row.Address_Line2+ " " +row.City + " "+ GetLookupDisplayValById(row.State_LookID),
LogicalDelete = row.LogicalDelete
};
wlist.Add(ci);
}
return Json(wlist.ToList().OrderBy(p => p.AddressLine1), JsonRequestBehavior.AllowGet);
}
The Error is in this ff: codes
Uncaught TypeError: Cannot call method 'toLowerCase' of undefined
v.fn.extend.val jquery-1.8.3.min.js:2
(anonymous function) $.each(address,function (index,currVal) {
v.extend.each jquery-1.8.3.min.js:2
(anonymous function) currVal = $(this).val();
l jquery-1.8.3.min.js:2
c.fireWith jquery-1.8.3.min.js:2
T jquery-1.8.3.min.js:2
r
ok, judging by the stacktrace, it's saying that;
- either the value being returned by $(this).val() in currVal = $(this).val(); is undefined at a certain index, or
- the value of one of the indexes in address at $.each(address,function (index,currVal) is undefined.
make sure that the index value in $.each(address,function (index,currVal) { is not going beyond the length of address and that ALL the elements in address is assigned a value
I'm guessing you're trying to do geocoding on an address in the array address, and it's trying to make the address a lowerCase string, but there's no string being found.
if address is not an array, make it an array, it shouldn't be a string

Javascript Loop - 2nd variable Not Displaying

Here is the code:
<script type="text/javascript">
var offender_locations = [
["10010", "xxxxx", 3],
["10001", "xxxxx", 2],
["10002", "zzzzz", 1]
];
for (i = 0; i < offender_locations.length; i++) {
var address = offender_locations[i][0];
var icon_img = offender_locations[i][1];
}
</script>
This is the output:
1) 10010 - zzzzz
2) 10001 - zzzzz
3) 10002 - zzzzz
AS you can see var address outputs the correct value, but *var icon_img* does always repeat the same value.
I am a Javascript beginner and I have tried all ways I can think of but I still get the same results.
P.S. I have pasted the full script here :
<script type="text/javascript">
var offender_locations = [
["10010", "offender_icon.png", 3],
["10001", "offender_icon.png", 2],
["10002", "visitor_icon.png", 1]
];
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var latlng = new google.maps.LatLng(0, 0);
for (i = 0; i < offender_locations.length; i++) {
var infowindow = new google.maps.InfoWindow();
var geocoder_map = new google.maps.Geocoder();
var address = offender_locations[i][0];
var icon_img = offender_locations[i][1];
geocoder_map.geocode({
'address': address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: map.getCenter(),
icon: icon_img
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(offender_locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
} else {
alert("The requested offender is not mappable !")
};
});
}
</script>
The markers in this script are all # the correct postal code, but they all show the same icon (visitor_icon.png) !
The problem is that you are creating a function in a loop. JavaScript has only function scope, not block scope. I.e. variables you create in a loop exist only once in the whole function, just the values changes per iteration.
At the time icon_img is evaluated (in the callback passed to geocode), the outer for loop already finished and icon_img has the value of the last iteration. It works for address because it is evaluated inside the loop, not later.
You have to 'capture' the current value of icon_img and you can do so by using an immediate function:
for (i = 0; i < offender_locations.length; i++) {
var infowindow = new google.maps.InfoWindow(),
geocoder_map = new google.maps.Geocoder(),
address = offender_locations[i][0],
icon_img = offender_locations[i][1];
(function(addr, img) { // <-- immediate function call
geocoder_map.geocode({'address': addr}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: map.getCenter(),
icon: img
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(addr);
infowindow.open(map, marker);
});
} else {
alert("The requested offender is not mappable !");
}
});
}(address, icon_img)); // <-- immediate function call
}
Maybe you hav to do this for even more variables... not sure.

Javascript array showing 0 length when populated

I'm sure this is really simple but I haven't had much luck figuring out what's wrong. I'm creating an empty array (locations), filling it with location objects in the getPartnerLocations function and then trying to plot the locations on the map with the drop function. The problem I'm having is that inside the drop function the locations array which has stuff in it is returning a length of zero so the loop in the isn't working. Any tips or ideas about what's going on here would be greatly appreciated.
var markers = [];
var locations = [];
var iterator = 0;
var map;
var geocoder;
var newYork = new google.maps.LatLng(40.7143528, -74.0059731);
function initialize() {
var mapOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: newYork
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
}
function getPartnerLocations() {
geocoder = new google.maps.Geocoder();
$('.partner').each(function(index){
var street = $('.partner-streetaddress',this).text();
var city = $('.partner-city',this).text();
var state = $('.partner-state',this).text();
var country = $('.partner-country',this).text();
var address = street + ', ' + city + ', ' + state + ', ' + country;
geocoder.geocode( { 'address': address}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
locations.push( results[0].geometry.location );
console.log(locations[index]);
}
else
{
console.log('failed to geocode address: ' + address);
}
});
});
initialize();
drop();
}
function addMarker() {
console.log('add marker function');
markers.push(new google.maps.Marker({
position: locations[iterator],
map: map,
draggable: false,
animation: google.maps.Animation.DROP
}));
iterator++;
}
function drop()
{
console.log(locations.length);
for (var i = 0; i < locations.length; i++) {
setTimeout(function() {
addMarker();
}, i * 200);
}
}
getPartnerLocations();
geocode is an asynchronous function.
The callback doesn't execute until some time after you call drop.
Therefore, when you call drop, the array is still empty.
You need to call initialize and drop after the last AJAX call replies, in the geocode callback.

Categories