kwood30
12-11-2017, 10:36 AM
I have managed to put together aload of coding to be able to assign a pin, along with time and reference to a searched address, but for some reason when I search the addres it works fine but it fails to drop a pin when assigned. I have attached all my code etc below. I cannot see what is stopping it to work. Any help will be appreciated. many thanks
$('#controls').on('click change', function () {
// This can take a while to load so only return if defined
if (typeof ($('#counties').get(0)) != "undefined")
$('#counties').get(0).selectedIndex = 0;
});
$('#overhere').on('change', '#counties', function () {
var v = this.value;
if (!v) { return; }
$('#lastcounty').html('Most Recent: ' + v);
var bounds = new google.maps.LatLngBounds();
if (v === 'Isles of Scilly') {
bounds.extend(new google.maps.LatLng(49.938074, -6.303835));
map.fitBounds(bounds);
map.setZoom(11);
return;
}
var poly = pollies[v].latLngs.j[0].j, i = poly.length;
while (--i > -1) {
bounds.extend(poly[i]);
}
map.fitBounds(bounds);
if (v === 'Bristol, City of') { map.setZoom(10); }
});
$('#overhere').on('click', '#togglecounties', function () {
this.disabled = true;
$('#counties').get(0).selectedIndex = 0;
var t = this, i = polAr.length, how = ScillyPollies[0].map ? null : map, poly;
// if(ScillyPollies[0].infowindow.map){ScillyPollies[0].infowindow.close();}
while (--i > -1) {
poly = polAr[i];
!how && poly.infowindow && poly.infowindow.map && poly.infowindow.close();
poly.setMap(how);
}
setTimeout(function () { t.disabled = false; }, 400);
});
<%--
Creates the marker. Adds a timer on the marker to show how long it is on there for.
Handles a click event to open up dialog.
Will change timer to date and time added as this will be easier to do as getting data from table
--%>
function createMarker(latlng, html, map, reference) {
if (markers[html]) { return false; }
var ref = reference;
infowindow = new google.maps.InfoWindow({
content: ref || html
}),
marker = new google.maps.Marker({
map: map,
time: new Date(),
position: latlng,
html: html,
icon: defaultPin,
infowindow: infowindow
}),
$tm = $('#themarkers').append('<option value="' + html + '" title="' + infowindow.content + '">' + html + '</option>');
$tm.get(0).selectedIndex = 0;
marker.addListener('mouseover', function () {
clearInterval(infowindow.timer);
infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
$('#supplementwindow').html(infowindow.content).fadeIn();
infowindow.timer = setInterval(function () {
infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
$('#supplementwindow').html(infowindow.content);
}, 300);
infowindow.open(map, this);
});
marker.addListener('mouseout', function () {
clearInterval(infowindow.timer);
infowindow.close();
$('#supplementwindow').fadeOut();
});
marker.addListener('click', function () {
var oe = this.optel;
$tm.get(0).selectedIndex = $('option', $tm).index(oe);
$tm.trigger('change');
});
marker.optel = $('option', $tm).last();
$tm.get(0).size = $('option', $tm).length;
markers[html] = marker;
//We want to return true as we have successfully created a marker.
return true;
}
$('form').submit(function (e) {
var address = $('#<%=tbAddress.ClientID%>', this).val();
var reference = $('#<%=referenceTxt.ClientID%>').val();
var information = $('#<%=informationTxt.ClientID%>').val();
if (address) {
geocoder.geocode({
'address': address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
//if (createMarker(results[0].geometry.location, address, map, reference)) {
<%--Commented out as it does not go to the new marker.--%>
//bounds.extend(results[0].geometry.location);
//map.fitBounds(bounds);
<%--Zoom level. 21 max zoom level--%>
map.setZoom(18);
var toLoadOnServer = {
Location: results[0].formatted_address,
Longitude: results[0].geometry.location.lng(),
Latitude: results[0].geometry.location.lat(),
NameNumber: results[0].address_components[0].long_name,
Street: results[0].address_components[1].long_name,
Town: results[0].address_components[2].long_name,
//PostCode: (results[0].address_components[7].long_name === undefined) ? '': results[0].address_components[7].long_name,
Reference: reference,
Information: information,
};
AjaxPostToAddMarker(toLoadOnServer);
markers = [];
LoadMarkersFromServer();
//} else {
// alert(address + ' or another marker with the same location already exists! Skipping.');
//}
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
e.preventDefault();
});
function AjaxPostToAddMarker(ToLoadOntoServer) {
$.ajax({
type: "POST",
url: "Tasking.aspx/AddDataToServer",
data: JSON.stringify({ 'address': ToLoadOntoServer }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
//alert(data.d);
},
error: function () {
alert("Could not create marker in server. Please try again.");
}
})
}
//Have to double do this to make sure google api is loaded first. So first one makes sure the page has loaded. Then it will make sure the document is ready.
window.onload = function () {
LoadMarkersFromServer();
//Once this div has been created call this function. Stops the elements not being found or == null
$('#locationDiv').ready(function () {
google.maps.event.addDomListener(window, 'load', SetAutoAddressExtender('<%=tbSearchAddress.ClientID%>', '<%=tbAddress.ClientID%>'))
});
}
function LoadMarkersFromServer() {
$(document).ready(function () {
$.ajax({
type: "POST",
url: "Tasking.aspx/GetMarkersFromServer",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
LoadMarkersFromFile(data.d);
},
failure: function () {
alert("Failed");
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(xhr.responseText);
}
});
});
}
$('#activatemarker').click(function () {
//If the job window is not visible we do not want to allow this to work.
if (!$('#supplementwindow').is(":visible"))
return;
var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), m = $o.val();
if (!m) { return; }
markers[m].setIcon(pinImage);
var supplementWindow = $('#supplementwindow');
var stringToPass = supplementWindow[0].innerHTML;
if (stringToPass == null)
return;
$.ajax({
type: "POST",
url: "Tasking.aspx/AllocateJob",
data: "{ 'markerCaption': '" + stringToPass + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if (!data.d)
alert("This job has already allocated");
else {
//Clears the array to load again from server
markers = [];
LoadMarkersFromServer();
//Fades out the window
$('#supplementwindow').hide();
}
},
error: function () {
alert("Could not Allocate and create form. Please try again.");
}
})
});
$('#removemarker').click(function () {
var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), m = $o.val(), n;
if (!m) { return; }
markers[m].setMap(null);
delete markers[m];
$o.remove();
tm.get(0).selectedIndex = 0;
bounds = new google.maps.LatLngBounds();
if ((n = $('option', tm).length) > 1) {
$.each(markers, function (i, v) {
bounds.extend(v.position);
});
map.fitBounds(bounds);
}
if (n < 3) {
map.setZoom(n > 1 ? 13 : 8);
}
tm.get(0).size = n;
});
$('#themarkers').change(function () {
this.title = this.options[this.options.selectedIndex].title;
var m = this.value;
if (!m) { return; }
map.setCenter(markers[m].position);
map.setZoom(18);
this.size = $('option', $(this)).length;
});
$('#showall').click(function () {
var $tm = $('#themarkers'), n = $('option', $tm).length - 1;
$tm.get(0).selectedIndex = 0;
if (!n) {
map.setCenter(new google.maps.LatLng(52.178227, -0.4013));
map.setZoom(8);
return;
}
map.fitBounds(bounds);
if (n === 1) {
map.setZoom(8);
}
});
</script>
$('#controls').on('click change', function () {
// This can take a while to load so only return if defined
if (typeof ($('#counties').get(0)) != "undefined")
$('#counties').get(0).selectedIndex = 0;
});
$('#overhere').on('change', '#counties', function () {
var v = this.value;
if (!v) { return; }
$('#lastcounty').html('Most Recent: ' + v);
var bounds = new google.maps.LatLngBounds();
if (v === 'Isles of Scilly') {
bounds.extend(new google.maps.LatLng(49.938074, -6.303835));
map.fitBounds(bounds);
map.setZoom(11);
return;
}
var poly = pollies[v].latLngs.j[0].j, i = poly.length;
while (--i > -1) {
bounds.extend(poly[i]);
}
map.fitBounds(bounds);
if (v === 'Bristol, City of') { map.setZoom(10); }
});
$('#overhere').on('click', '#togglecounties', function () {
this.disabled = true;
$('#counties').get(0).selectedIndex = 0;
var t = this, i = polAr.length, how = ScillyPollies[0].map ? null : map, poly;
// if(ScillyPollies[0].infowindow.map){ScillyPollies[0].infowindow.close();}
while (--i > -1) {
poly = polAr[i];
!how && poly.infowindow && poly.infowindow.map && poly.infowindow.close();
poly.setMap(how);
}
setTimeout(function () { t.disabled = false; }, 400);
});
<%--
Creates the marker. Adds a timer on the marker to show how long it is on there for.
Handles a click event to open up dialog.
Will change timer to date and time added as this will be easier to do as getting data from table
--%>
function createMarker(latlng, html, map, reference) {
if (markers[html]) { return false; }
var ref = reference;
infowindow = new google.maps.InfoWindow({
content: ref || html
}),
marker = new google.maps.Marker({
map: map,
time: new Date(),
position: latlng,
html: html,
icon: defaultPin,
infowindow: infowindow
}),
$tm = $('#themarkers').append('<option value="' + html + '" title="' + infowindow.content + '">' + html + '</option>');
$tm.get(0).selectedIndex = 0;
marker.addListener('mouseover', function () {
clearInterval(infowindow.timer);
infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
$('#supplementwindow').html(infowindow.content).fadeIn();
infowindow.timer = setInterval(function () {
infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
$('#supplementwindow').html(infowindow.content);
}, 300);
infowindow.open(map, this);
});
marker.addListener('mouseout', function () {
clearInterval(infowindow.timer);
infowindow.close();
$('#supplementwindow').fadeOut();
});
marker.addListener('click', function () {
var oe = this.optel;
$tm.get(0).selectedIndex = $('option', $tm).index(oe);
$tm.trigger('change');
});
marker.optel = $('option', $tm).last();
$tm.get(0).size = $('option', $tm).length;
markers[html] = marker;
//We want to return true as we have successfully created a marker.
return true;
}
$('form').submit(function (e) {
var address = $('#<%=tbAddress.ClientID%>', this).val();
var reference = $('#<%=referenceTxt.ClientID%>').val();
var information = $('#<%=informationTxt.ClientID%>').val();
if (address) {
geocoder.geocode({
'address': address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
//if (createMarker(results[0].geometry.location, address, map, reference)) {
<%--Commented out as it does not go to the new marker.--%>
//bounds.extend(results[0].geometry.location);
//map.fitBounds(bounds);
<%--Zoom level. 21 max zoom level--%>
map.setZoom(18);
var toLoadOnServer = {
Location: results[0].formatted_address,
Longitude: results[0].geometry.location.lng(),
Latitude: results[0].geometry.location.lat(),
NameNumber: results[0].address_components[0].long_name,
Street: results[0].address_components[1].long_name,
Town: results[0].address_components[2].long_name,
//PostCode: (results[0].address_components[7].long_name === undefined) ? '': results[0].address_components[7].long_name,
Reference: reference,
Information: information,
};
AjaxPostToAddMarker(toLoadOnServer);
markers = [];
LoadMarkersFromServer();
//} else {
// alert(address + ' or another marker with the same location already exists! Skipping.');
//}
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
e.preventDefault();
});
function AjaxPostToAddMarker(ToLoadOntoServer) {
$.ajax({
type: "POST",
url: "Tasking.aspx/AddDataToServer",
data: JSON.stringify({ 'address': ToLoadOntoServer }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
//alert(data.d);
},
error: function () {
alert("Could not create marker in server. Please try again.");
}
})
}
//Have to double do this to make sure google api is loaded first. So first one makes sure the page has loaded. Then it will make sure the document is ready.
window.onload = function () {
LoadMarkersFromServer();
//Once this div has been created call this function. Stops the elements not being found or == null
$('#locationDiv').ready(function () {
google.maps.event.addDomListener(window, 'load', SetAutoAddressExtender('<%=tbSearchAddress.ClientID%>', '<%=tbAddress.ClientID%>'))
});
}
function LoadMarkersFromServer() {
$(document).ready(function () {
$.ajax({
type: "POST",
url: "Tasking.aspx/GetMarkersFromServer",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
LoadMarkersFromFile(data.d);
},
failure: function () {
alert("Failed");
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(xhr.responseText);
}
});
});
}
$('#activatemarker').click(function () {
//If the job window is not visible we do not want to allow this to work.
if (!$('#supplementwindow').is(":visible"))
return;
var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), m = $o.val();
if (!m) { return; }
markers[m].setIcon(pinImage);
var supplementWindow = $('#supplementwindow');
var stringToPass = supplementWindow[0].innerHTML;
if (stringToPass == null)
return;
$.ajax({
type: "POST",
url: "Tasking.aspx/AllocateJob",
data: "{ 'markerCaption': '" + stringToPass + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if (!data.d)
alert("This job has already allocated");
else {
//Clears the array to load again from server
markers = [];
LoadMarkersFromServer();
//Fades out the window
$('#supplementwindow').hide();
}
},
error: function () {
alert("Could not Allocate and create form. Please try again.");
}
})
});
$('#removemarker').click(function () {
var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), m = $o.val(), n;
if (!m) { return; }
markers[m].setMap(null);
delete markers[m];
$o.remove();
tm.get(0).selectedIndex = 0;
bounds = new google.maps.LatLngBounds();
if ((n = $('option', tm).length) > 1) {
$.each(markers, function (i, v) {
bounds.extend(v.position);
});
map.fitBounds(bounds);
}
if (n < 3) {
map.setZoom(n > 1 ? 13 : 8);
}
tm.get(0).size = n;
});
$('#themarkers').change(function () {
this.title = this.options[this.options.selectedIndex].title;
var m = this.value;
if (!m) { return; }
map.setCenter(markers[m].position);
map.setZoom(18);
this.size = $('option', $(this)).length;
});
$('#showall').click(function () {
var $tm = $('#themarkers'), n = $('option', $tm).length - 1;
$tm.get(0).selectedIndex = 0;
if (!n) {
map.setCenter(new google.maps.LatLng(52.178227, -0.4013));
map.setZoom(8);
return;
}
map.fitBounds(bounds);
if (n === 1) {
map.setZoom(8);
}
});
</script>