I'm attempting to run the following code which is pretty much copied from the OoTheBox UI Action called "View User's Response".
function showRiskAssessment(){
var ra = new GlideRecord('asmt_assessment_instance');
ra.addQuery('task_id', '=', current.sys_id);
ra.orderByDesc('taken_on');
ra.setLimit(1);
ra.query();
// var id = g_form.getUniqueValue();
var id = ra.sys_id;
//var type = g_form.getValue('metric_type');
var type = '468aeff2db9357008aeba9f7059619ca';
var url = 'assessment_take2.do?sysparm_assessable_sysid=' + id + '&sysparm_assessable_type=' + type + '&sysparm_reader_view=true';
var d = new GlideOverlay({
title: "User's Response",
iframe: url,
width:'80%',
height: '100%',
onAfterLoad: function() {
var iframe = d.getIFrameElement();
setTimeout(function(){
iframe.height = parseInt(iframe.height)+1;
},0);
}
});
d.render();
}
If I hardcode it like this it works. All I'm trying to do is on the change record I want to look up the most recent Assessment Instance for that particular change and display in the overlay. Obviously I can't hardcode the id however it seems the query isn't recognizing that info at all anyways.
function showRiskAssessment(){
// var ra = new GlideRecord('asmt_assessment_instance');
// ra.addQuery('task_id', '=', current.sys_id);
// ra.orderByDesc('taken_on');
// ra.setLimit(1);
// ra.query();
// var id = g_form.getUniqueValue();
var id = '5c516eeddb87d090ebce60ab1396198a';
//var type = g_form.getValue('metric_type');
var type = '468aeff2db9357008aeba9f7059619ca';
var url = 'assessment_take2.do?sysparm_assessable_sysid=' + id + '&sysparm_assessable_type=' + type + '&sysparm_reader_view=true';
var d = new GlideOverlay({
title: "User's Response",
iframe: url,
width:'80%',
height: '100%',
onAfterLoad: function() {
var iframe = d.getIFrameElement();
setTimeout(function(){
iframe.height = parseInt(iframe.height)+1;
},0);
}
});
d.render();
}
You're trying to use current.sys_id in a client side script. It is recommended to use g_form for client side scripts. You're also trying a GlideRecord on a client script, which is also not recommended.
To fix, replace:
ra.addQuery('task_id', '=', current.sys_id);
with:
var sysId = g_form.getUniqueValue();
ra.addQuery('task_id', '=', sysId);
Also, for the difference between g_form and current have a look here.
I found an official article which is showing, how to add clustering layer to Map but that example takes input from a TestDataGenerator function.I don't know how to pass my information so that map will generate pushpin based on my data.
Bing Map Official Article on "Add clustering layer to map"
<div id='printoutPanel'></div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key',
center: new Microsoft.Maps.Location(39.393486, -98.100769),
zoom: 3
});
Microsoft.Maps.loadModule('Microsoft.Maps.Clustering', function () {
// Creating sample Pushpin data within map view
var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(1000, map.getBounds());
var clusterLayer = new Microsoft.Maps.ClusterLayer(pushpins, { gridSize: 100 });
map.layers.insert(clusterLayer);
});
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario' async defer></script>
Please visit the above link if anything is un-clear.
The test data generator returns an array of pushpins. Simply loop through your custom data and create an array of pushpins and then pass that into the clustering layer.
First add a new to your page with id and style display:none
add a gridview to this div
Bind your data to this gridview
Code Sample to bind data to map - works in ie - recently started having issues in Edge and Firefor - works on Safari
Issues seem to be related to attempts to add second cluster layer
Comments appreciated
function loadMap() {
var MaxLat = 0;
var MinLon = 0;
var MinLat = 0;
var MaxLon = 0;
var MLon = 0;
var MLat = 0;
var c;
var Val2;
var Val3;
var Lat;
var Lon;
var Val1;
var PPO;
var Val4;
var Val5;
if (typeof GVBounds !== "undefined" && GVBounds !== null) {
var Mcell = GVBounds.rows[1].cells;
MaxLat = Mcell(0).innerHTML;
MinLon = Mcell(1).innerHTML;
MinLat = Mcell(2).innerHTML;
MaxLon = Mcell(3).innerHTML;
MLat = Mcell(4).innerHTML;
MLon = Mcell(5).innerHTML;
}
var map;
var Rec = MaxLat + "," + MinLon + "," + MinLat + "," + MaxLon
var box = Microsoft.Maps.LocationRect.fromString(Rec);
//var PPCDr = new Microsoft.Maps.Layer();
//var PPCPU = new Microsoft.Maps.Layer();
//var PPCD = new Microsoft.Maps.Layer();
//var PPC = []
var pinDr;
var pinPU;
var pinD;
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
//center: new Microsoft.Maps.Location(MLat, MLon)
}
);
Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
var Pins = [];
Pins = GetPins();
//Create a ClusterLayer and add it to the map.
clusterLayer = new Microsoft.Maps.ClusterLayer(Pins, { gridSize: 10 });
map.layers.insert(clusterLayer);
});
Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
var DrPins = [];
DrPins = GetDrPins();
//Create a ClusterLayer and add it to the map.
DrclusterLayer = new Microsoft.Maps.ClusterLayer(DrPins, { gridSize: 1 });
map.layers.insert(DrclusterLayer);
});
map.setView({ bounds: box, padding: 20 });
}
RayD
I have a questions, currently I have in a webpage some markers that I get from a xml file using position of latitude and longitude.
So I would like to know how to enable to option of the marker listener to activate or show the option to send the user using the cellphone directions (gps). Like in android it I click on the marker it shows the option to activate gps directions, but on web I don't know how.
So for each direction if is clicked send the current position to the gps directions app of the cellphone.
Currlently I have this code:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 12
});
var infoWindow = new google.maps.InfoWindow({map: map});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
// Change this depending on the name of your PHP or XML file
downloadUrl('https://www.mysite/dataMaps.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
//map.setCenter(marker.getPosition());
});
});
});
}
And
I foun this in google site:
function displayRoute(origin, destination, service, display) {
service.route({
origin: origin,
destination: destination,
waypoints: [{location: 'Adelaide, SA'}, {location: 'Broken Hill, NSW'}],
travelMode: 'DRIVING',
avoidTolls: true
}, function(response, status) {
if (status === 'OK') {
display.setDirections(response);
} else {
alert('Could not display directions due to: ' + status);
}
});
}
But in waypoints: not sure how to send the latitude and longitude parameters and if it will work on mobile devices to trigger the gps directions app :S
Any suggestions?
Finally I saw how, in the infowindow you just need to add this:
nav
I found it here: Is there a way to invoke navigation from mobile browser?
In my application i have to show the path covered by an user in particulat date working fine for first response,from second response from ajax i am getting data which is diffrent from first one but still map showing 1st response result
I included google map javascript api like below in header section of html
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
I am using following code in my jsp file
<script>
$(document).ready(function(){
window.setInterval(positionCheck, 20000);
});
</script>
<script>
$(document).ready(function(){
document.getElementById("directions_panel").innerHTML = "";
document.getElementById("map").innerHTML = "";
$("#searchSubmit").onclick(){
positionCheck();
}
});
</script>
<script type="text/javascript">
function positionCheck(){
var username=$("#xmlLabel").val();
var searchDate=$("#searchDate").val();
if(username!=""&& searchDate!=''){
This part where i used ajax call working fine for first response
from second response onwards problem arises it is showing content of first response from server
$.ajax({
type : "POST",
url : "searchLocation.mnt",
data :"xmlLabel="+username+"&searchDate="+searchDate,
dataType : "json",
mimeType : 'application/json',
success : function(data) {
if(data!=""){
mapLoaded(data);
function mapLoaded(data){
var size=0;
var counts=0;
var stops = data;
alert(stops);
size =stops.length;
if(stops.length>0){
var mapid=document.getElementById("map");
var map = new window.google.maps.Map(mapid);
// new up complex objects before passing them around
var directionsDisplay = new window.google.maps.DirectionsRenderer({suppressMarkers: true,polylineOptions: {
strokeColor: "black"
}});
var directionsService = new window.google.maps.DirectionsService();
Tour_startUp(stops);
window.tour.loadMap(map, directionsDisplay);
window.tour.fitBounds(map);
alert(stops.length);
if (stops.length > 1)
window.tour.calcRoute(directionsService, directionsDisplay);
}
alert(stops.length);
function Tour_startUp(stops) {
if (!window.tour) window.tour = {
updateStops: function (newStops) {
stops = newStops;
},
// map: google map object
// directionsDisplay: google directionsDisplay object (comes in empty)
loadMap: function (map, directionsDisplay) {
var myOptions = {
zoom:4,
center: new window.google.maps.LatLng(17.379818, 78.478542), // default to Hyderabad
mapTypeId: window.google.maps.MapTypeId.ROADMAP
};
map.setOptions(myOptions);
directionsDisplay.setMap(map);
},
fitBounds: function (map) {
var bounds = new window.google.maps.LatLngBounds();
// extend bounds for each record
jQuery.each(stops, function (key, val) {
var myLatlng = new window.google.maps.LatLng(val.latitude, val.longitude);
bounds.extend(myLatlng);
});
map.fitBounds(bounds);
},
calcRoute: function (directionsService, directionsDisplay) {
var batches = [];
var itemsPerBatch = 10; // google API max = 10 - 1 start, 1 stop, and 8 waypoints
var itemsCounter = 0;
var wayptsExist = stops.length > 0;
while (wayptsExist) {
var subBatch = [];
var subitemsCounter = 0;
for (var j = itemsCounter; j < stops.length; j++) {
subitemsCounter++;
subBatch.push({
location: new window.google.maps.LatLng(stops[j].latitude, stops[j].longitude),
stopover: true
});
if (subitemsCounter == itemsPerBatch)
break;
}
itemsCounter += subitemsCounter;
batches.push(subBatch);
wayptsExist = itemsCounter < stops.length;
// If it runs again there are still points. Minus 1 before continuing to
// start up with end of previous tour leg
itemsCounter--;
}
// now we should have a 2 dimensional array with a list of a list of waypoints
var combinedResults;
var unsortedResults = [{}]; // to hold the counter and the results themselves as they come back, to later sort
var directionsResultsReturned = 0;
for (var k = 0; k < batches.length; k++) {
var lastIndex = batches[k].length - 1;
var start = batches[k][0].location;
var end = batches[k][lastIndex].location;
// trim first and last entry from array
var waypts = [];
waypts = batches[k];
waypts.splice(0, 1);
waypts.splice(waypts.length - 1, 1);
var request = {
origin: start,
destination: end,
waypoints: waypts,
travelMode: window.google.maps.TravelMode.WALKING
};
(function (kk) {
directionsService.route(request, function (result, status) {
if (status == window.google.maps.DirectionsStatus.OK) {
var unsortedResult = { order: kk, result: result };
unsortedResults.push(unsortedResult);
directionsResultsReturned++;
if (directionsResultsReturned == batches.length) // we've received all the results. put to map
{
// sort the returned values into their correct order
unsortedResults.sort(function (a, b) { return parseFloat(a.order) - parseFloat(b.order); });
var count = 0;
for (var key in unsortedResults) {
if (unsortedResults[key].result != null) {
if (unsortedResults.hasOwnProperty(key)) {
if (count == 0) // first results. new up the combinedResults object
combinedResults = unsortedResults[key].result;
else {
// only building up legs, overview_path, and bounds in my consolidated object. This is not a complete
// directionResults object, but enough to draw a path on the map, which is all I need
combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(unsortedResults[key].result.routes[0].legs);
combinedResults.routes[0].overview_path = combinedResults.routes[0].overview_path.concat(unsortedResults[key].result.routes[0].overview_path);
combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getNorthEast());
combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getSouthWest());
}
count++;
}
}
}
directionsDisplay.setDirections(combinedResults);
var legs = combinedResults.routes[0].legs;
var summaryPanel = document.getElementById('directions_panel');
summaryPanel.innerHTML = '';
var totdist=0;
// alert(legs.length);
for (var i=0; i < legs.length;i++){
var markerletter = "A".charCodeAt(0);
var markerletter2= "B".charCodeAt(0)
markerletter += i;
markerletter2 += i;
markerletter = String.fromCharCode(markerletter);
markerletter2 = String.fromCharCode(markerletter2);
createMarker(directionsDisplay.getMap(),legs[i].start_location,legs[i].start_address,markerletter);//To display location address on the marker
var routeSegment = i + 1;
var point=+routeSegment+1;
summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';
summaryPanel.innerHTML += '<b>Point '+ routeSegment +' :</b>'+ ' ' +legs[i].start_address + ' <br> ';
summaryPanel.innerHTML += '<b>Point '+ point +' :</b>'+ ' '+legs[i].end_address + '<br>';
summaryPanel.innerHTML += '<b>Distance Covered '+' :</b>'+legs[i].distance.text + '<br><br>';
var test=legs[i].distance.text.split(' ');
var one=parseFloat(test[0]);
if(test[1]=="m"){
var one=parseFloat(test[0]/1000);
}
totdist=parseFloat(totdist)+parseFloat(one);
}
summaryPanel.innerHTML += '<b> Total Distance :'+totdist + 'km'+ '</b><br><br>';
var i=legs.length;
var markerletter = "A".charCodeAt(0);
markerletter += i;
markerletter = String.fromCharCode(markerletter);
createMarker(directionsDisplay.getMap(),legs[legs.length-1].end_location,legs[legs.length-1].end_address,markerletter);
}
}
});
})(k);
}
}
};
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
var icons = new Array();
icons["red"] = new google.maps.MarkerImage("mapIcons/marker_red.png",
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(20, 34),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 9,34.
new google.maps.Point(9, 34));
function getMarkerImage(iconStr) {
counts++;
if(counts==size){
var markerimageLoc = "http://www.maps.google.com/mapfiles/ms/icons/blue.png";
}else{
if (iconStr=="undefined") {
iconStr = "red";
var markerimageLoc = "http://www.maps.google.com/mapfiles/ms/icons/red.png";
}
else{
var markerimageLoc="http://www.google.com/mapfiles/marker"+ iconStr +".png";
// var markerimageLoc = "http://www.maps.google.com/mapfiles/ms/icons/red.png";
}
}
icons[iconStr] = new google.maps.MarkerImage(markerimageLoc,
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(25, 34),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 6,20.
new google.maps.Point(9, 34));
return icons[iconStr];
}
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var iconImage = new google.maps.MarkerImage('mapIcons/marker_red.png',
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(20, 34),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 9,34.
new google.maps.Point(9, 34));
var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 34),
new google.maps.Point(0,0),
new google.maps.Point(9, 34));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var iconShape = {
coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
type: 'poly'
};
function createMarker(map, latlng, label, character) {
var markerletter=character;
if( /[^a-zA-Z]/.test( character ) ) {
var markerletter="undefined";
}
var contentString = '<b>'+label+'</b><br>';
var marker = new google.maps.Marker({
position: latlng,
map: map,
shadow: iconShadow,
icon: getMarkerImage(markerletter),
shape: iconShape,
title: label,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
marker.myname = label;
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
return marker;
}
}
}else{
}
},
error : function(e) {
alert('Error: ' + e,"Alert Box");
}
});
}
}
</script>
and i included div tag like this in body section
<div id="map" style="border: 2px solid #3872ac; height: 500px;"
class="col-sm-6"></div>
above code working fine if i am not using ajax,problem exist only for ajax
sorry to trouble all of you,i feel very silly that i declared variable of stops globally and i need to call methods like below
function initialize(data) {
size = 0;
counts = 0;
var map=0;
var stops = data;
size = stops.length;
if (stops.length > 0) {
var map = new window.google.maps.Map(document
.getElementById("map"));
// new up complex objects before passing them around
var directionsDisplay = new window.google.maps.DirectionsRenderer(
{
suppressMarkers : true,
polylineOptions : {
strokeColor : "black"
}
});
var directionsService = new window.google.maps.DirectionsService();
Tour_startUp(stops);
window.tour.loadMap(map, directionsDisplay);
i changed the below methods from window.tour.fitBounds(map); window.tour.calcRoute(stops,directionsService,
directionsDisplay); to
window.tour.fitBounds(map,stops);
if (stops.length > 1)
window.tour.calcRoute(stops,directionsService,
directionsDisplay);
}
}
I have a map that has lots of markers pulled from a database. Each one displays an InfoWindow with a placename and the lat and lng of the location. I need to have the placename affiliated with a marker added to and HTML textbox on click. I can't seem to find any tutorials on this. Maybe someone can point me in the right direction. I am trying to learn this on my own so apologies if it is sloppily designed. Thanks for your help in advance.
function load() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
center: new google.maps.LatLng(41.640078, -102.669433),
zoom: 3,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("mymap.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + point;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
It needs to go into a simple textbox like this:
<input type = "text" id = "address_box" value = ""/>
To display that data in your HTML text box, change your bindInfoWindow function, add code in there to put the data in the text box:
function bindInfoWindow(marker, map, infoWindow, html, name) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
document.getElementById("address_box").value = name;
});
}
And add name in to the call to it:
bindInfoWindow(marker, map, infoWindow, html, name);
Do you mean, when the infoWindow opens, you want to display some information into the textbox?
If so, this code might help you(I hope).
var infoWindow = new google.maps.InfoWindow;
var address_box = document.getElementById("address_box");
google.maps.event.addListener(infoWindow, "domready", function() {
address_box.value = infoWindow.get("Content");
});