Good morning all,
I'm Danny, and I'm a Salesforce system admin and (very) junior developer currently trying to integrate Nokia's HERE maps into our system as it's public transport options are vastly superior to Google's. This is done in Salesforce with Visualforce. I've been successful in using our Enterprise id and key to call and display a route on a dynamic map, but am having some trouble with geocoding. I'm having some issues with the element below:
<head>
<script type="text/javascript" charset="UTF-8" src="https://js.cit.api.here.com/ee/2.5.3/jsl.js?with=maps,positioning,places,directions"></script>
<style type="text/css">
html {
overflow:hidden;
}
body {
margin: 0;
padding: 0;
position: absolute;
overflow:hidden;
width: 100%;
height: 100%;
}
#mapContainer {
width: 60%;
height: 95%;
left: 0;
top: 10px;
position: absolute;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript" charset="UTF-8" src="https://js.cit.api.here.com/ee/2.5.3/jsl.js?with=maps,positioning,places,directions"></script>
<script type="text/javascript">
nokia.Settings.set("app_id", "V6tmpXy6GHXqJWlaPVmh");
nokia.Settings.set("app_code", "XS4Tjj82QznkWAJJu0L3-g");
nokia.Settings.set("serviceMode", "cit");
(document.location.protocol == "https:") && nokia.Settings.set("secureConnection", "force");
var map = new nokia.maps.map.Display(
document.getElementById("mapContainer"), {
components: [
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.TypeSelector(),
new nokia.maps.map.component.ScaleBar(),
new nokia.maps.map.component.ContextMenu(),
],
});
var modes = [{
type: "fastest",
transportModes: ["car"],
trafficMode: "disabled"
}];
// GeoCode
nokia.places.search.manager.geoCode({
searchTerm : "{!Transport_order__c.From_Address__c}",
onComplete: onGeocodeComplete
});
// Post GeoCode
function onGeocodeComplete(data, requestStatus) {
var marker;
if (requestStatus === 'OK') {
alert('GEOCODE ENDED SUCCESSFULLY');
marker = new nokia.maps.map.StandardMarker(data.location.position);
map.objects.add(marker);
map.zoomTo(marker.getBoundingBox(), false);
if (map.get('zoomLevel') > 15) {
map.setZoomLevel(15);
}
} else if (requestStatus === 'ERROR') {
alert('GEOCODE FAILED.');
}
}
</script>
</body>
I read from a post on this site that the Enterprise version treats nokia.places.search etc. as an instance rather than a function to be called. This makes sense, as changing the URL to SE rather than EE seems to make the geocode request run fine, however our internal system rejects the response as it's not in HTTPS (which can be forced 'on' with Enterprise).
The issue I'm having is that I'm not familiar enough with Java to truly understand what the difference is, or rather, I don't know what to do with calling upon the instance. At present, the java console in Chrome is telling me that search is an undefined type error, which isn't helpful, and I can't find any further guidance anywhere I search! Can anyone help me out in differentiating between Enterprise/ Standard guidance on this?
Thanks!
The issue here is that there are two JavaScript APIs available, and in your case you need to be using the Enterprise Maps JS API not the public Maps JS API. The geocoding in the Enterprise Maps JS API (nokia.search.Manager) is different to the public offering and more flexible. The geocoding signature in the public Maps JS API (nokia.places.search.manager) is part of the places offering and is more restricted.
As an enterprise customer, the only documentation you’ll need is (pardon the pun) HERE
The associated set of examples can be found in the enterprise explorer
A geocoding example using the Enterprise Maps JS API can be found HERE, look at the code and note that it uses the nokia.search.Manager()
Currently Truck Routing is only available in the 6.2 enterprise routing API, whereas Public Transport routing is only available in the 7.2 routing API. This means that in order to use the public transport with the Enterprise Maps JS API, you’ll need use a nokia.maps.advrouting.Manager and contact the underlying rest service. An example of this can be found in the Community Examples
Related
i am using bing maps with asp .net. i want to track multiple users ( drivers ) . i found a demo on how to track a user in bing website but i didn't figure out how to track specific user with specific id. here is the code to track user
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type='text/javascript'>
var map, watchId, userPin;
function GetMap()
{
map = new Microsoft.Maps.Map('#myMap', {
credentials: ‘Your Bing Maps Key’
});
}
function StartTracking() {
//Add a pushpin to show the user's location.
userPin = new Microsoft.Maps.Pushpin(map.getCenter(), { visible: false });
map.entities.push(gpsPin);
//Watch the users location.
watchId = navigator.geolocation.watchPosition(UsersLocationUpdated);
}
function UsersLocationUpdated(position) {
var loc = new Microsoft.Maps.Location(
position.coords.latitude,
position.coords.longitude);
//Update the user pushpin.
userPin.setLocation(loc);
userPin.setOptions({ visible: true });
//Center the map on the user's location.
map.setView({ center: loc });
}
function StopTracking() {
// Cancel the geolocation updates.
navigator.geolocation.clearWatch(watchId);
//Remove the user pushpin.
map.entities.clear();
}
</script>
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
</head>
<body>
<div id="myMap" style="position:relative;width:600px;height:400px;"></div><br/>
<input type="button" value="Start Continuous Tracking" onclick="StartTracking()" />
<input type="button" value="Stop Continuous Tracking" onclick="StopTracking()"/>
</body>
</html>
The code you provided will show the user where they are on the map. If you want to see the location of multiple drivers on a map, you will need to capture the location of each driver from a device and get that data into a backend service, then have that backend service send the data to the frontend map canvas (i.e. Bing Maps). There are a lot of different ways to do this.
First you need to know how you are going to capture the drivers location. Two common methods:
A mobile app that uses the native geolocation APIs in the background and sends updates to the backend service.
A dedicated IoT device that is either connected to the vehicle or in the vehicle.
A really quick way to do this is to leverage Azure IoT hub for the backend service and IoT central for the frontend. Here is a reference architecture: https://learn.microsoft.com/en-us/azure/architecture/solution-ideas/articles/real-time-asset-tracking-mgmt-iot-central
Bing maps has an open-source project that leverages mobile devices and displays the data on a map: https://github.com/Microsoft/Bing-Maps-Fleet-Tracker
Good evening, I need help with translating my website from Spanish to English, it is developed in asp.net, my boss requested that I use google translate for ease, but the google translation service seems to be no longer available. Anyone know of a similar library that does the same, that does the automatic translation of my entire website
Google translate sends me this message:
We no longer provide new access to Google Translate's Website Translator. This change does not affect existing use of the Website Translator.
We encourage users looking to translate webpages to use browsers that support translation natively.
Personally I use the deepl API. https://www.deepl.com/de/docs-api/
There are many others that are worth looking at.
First, add this where you want a button to change the language in HTML body.
<div id='google_translate_element'/>
Then add these scripts in your <head> tag of HTML.
<script type='text/javascript'>
function googleTranslateFunction(){
new google.translate.TranslateElement({pageLanguage:'hi', layout:google.translate.TranslateElement.InlineLayout.SIMPLE},'google_translate_element');
} </script>
<script type='text/javascript'>
//<![CDATA[
(function(){var gtConstEvalStartTime = new Date();/*
Copyright The Closure Library Authors.
SPDX-License-Identifier: Apache-2.0
*/
var h=this||self,l=/^[\w+/_-]+[=]{0,2}$/,m=null;
function n(a){
return(a=a.querySelector&&a.querySelector("script[nonce]"))&&(a=a.nonce||a.getAttribute("nonce"))&&l.test(a)?a:""
}
function p(a,b){
function c(){}c.prototype=b.prototype;
a.i=b.prototype;a.prototype=new c;
a.prototype.constructor=a;
a.h=function(g,f,k){
for(var e=Array(arguments.length-2),d=2;
d<arguments.length;d++)e[d-2]=arguments[d];
return b.prototype[f].apply(g,e)
}
}
function q(a){return a};
function r(a){
if(Error.captureStackTrace);
else{var b=Error().stack;b&&(this.stack=b)}a&&(this.message=String(a))
}
r.prototype.name="CustomError";
function u(a,b){
a=a.split("%s");
for(var c="",g=a.length-1,f=0;
f<g;f++)c+=a[f]+(f<b.length?b[f]:"%s");
r.call(this,c+a[g])
}
p(u,r);
u.prototype.name="AssertionError";
function v(a,b){
throw new u("Failure"+(a?": "+a:""),Array.prototype.slice.call(arguments,1));
};
var w;
function x(a,b){this.g=b===y?a:""}x.prototype.toString=function(){return this.g+""};var y={};
function z(a){
var b=document.getElementsByTagName("head")[0];b||(b=document.body.parentNode.appendChild(document.createElement("head")));
b.appendChild(a)
}
function _loadJs(a){
var b=document;
var c="SCRIPT";"application/xhtml+xml"===b.contentType&&(c=c.toLowerCase());
c=b.createElement(c);
c.type="text/javascript";
c.charset="UTF-8";
if(void 0===w){b=null;var g=h.trustedTypes;
if(g&&g.createPolicy){
try{b=g.createPolicy("goog#html",{createScriptURL:q})}
catch(t){h.console&&h.console.error(t.message)}w=b}
else w=b
}
a=(b=w)?b.createScriptURL(a):a;a=new x(a,y);a:{
try{
var f=c&&c.ownerDocument,k=f&&(f.defaultView||f.parentWindow);k=k||h;
if(k.Element&&k.Location){var e=k;break a}}
catch(t){}e=null}
if(e&&"undefined"!=typeof e.HTMLScriptElement&&(!c||!(c instanceof e.HTMLScriptElement)&&(c instanceof e.Location||c instanceof e.Element))){
e=typeof c;
if("object"==e&&null!=c||"function"==e)
try{}
catch(t){}
else d=void 0===c?"undefined":null===c?"null":typeof c;v()
}
a instanceof x&&a.constructor===x?d=a.g:(d=typeof a,v("expected object of type TrustedResourceUrl, got '"+a+"' of type "+("object"!=d?d:a?Array.isArray(a)?"array":d:"null")),d="type_error:TrustedResourceUrl");c.src=d;
(d=c.ownerDocument&&c.ownerDocument.defaultView)&&d!=h?d=n(d.document):(null===m&&(m=n(h.document)),d=m);
d&&c.setAttribute("nonce",d);z(c)
}
function _loadCss(a){
var b=document.createElement("link");
b.type="text/css";b.rel="stylesheet";
b.charset="UTF-8";b.href=a;z(b)
}
function _isNS(a){
a=a.split(".");
for(var b=window,c=0;c<a.length;++c)if(!(b=b[a]))return!1;
return!0
}
function _setupNS(a){
a=a.split(".");
for(var b=window,c=0;c<a.length;++c)b.hasOwnProperty?b.hasOwnProperty(a)?b=b[a]:b=b[a[c]]={}:b=b[a]||(b[a]={});
return b
}
if (_isNS('google.translate.Element')){return}(function(){
var c=_setupNS('google.translate._const');
c._cest = gtConstEvalStartTime;gtConstEvalStartTime = undefined;c._cl='en';
c._cuc='googleTranslateFunction';
c._cac='';c._cam='';c._ctkk='447972.1887378764';
var h='translate.googleapis.com';
var s=(true?'https':window.location.protocol=='https:'?'https':'http')+'://';
var b=s+h;c._pah=h;c._pas=s;c._pbi=b+'/translate_static/img/te_bk.gif';
c._plla=h+'/translate_a/l';c._ps=b+'/translate_static/css/translateelement.css';
c._puh='translate.google.com';
_loadCss(c._ps);_loadJs(b+'/translate_static/js/element/main.js');})();})();
//]]>
</script>
Boom Now your website will successfully change the language with option appers
here is image you can see this is result after you follow
<html>
<body>
<div>
<div id="map"></div>
</div>
<script>
function initMap() {
console.log('here');
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: { lat: -34.397, lng: 150.644 }
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"></script>
</body>
</html>
Here, in my code I don't get any errors. But the map is not shown. Any reasons why?
I tried your code and it shows an error which is Google Maps API error: InvalidKeyMapError.
The script element that loads the API is missing the required authentication parameter. If you are using the standard Maps JavaScript API, you must use a key parameter with a valid API key. If you are a Premium Plan customer, you must use either a client parameter with your client ID or a key parameter with a valid API key.
See the guide to API keys and client IDs at https://developers.google.com/maps/documentation/javascript/get-api-key
Assign a style (height/width) to your map element
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
I have just started familiarising the azure media player and need to achieve setting the video to a defined timeframe at load.The code I have used so far is as follows.The reference used in the application also as part of the question.
<link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
<script>
amp.options.flashSS.swf = "//amp.azure.net/libs/amp/latest/techs/StrobeMediaPlayback.2.0.swf"
amp.options.flashSS.plugin = "//amp.azure.net/libs/amp/latest/techs/MSAdaptiveStreamingPlugin-osmf2.0.swf"
amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/latest/techs/SmoothStreamingPlayer.xap"
</script>
#{
var ContentUrl = ViewBag.ContentUrl;
}
<video id="vd123" class="azuremediaplayer amp-default-skin amp-big-play-centered">
</video>
<script>
var myOptions = {
//"nativeControlsForTouch": false,
techOrder: ["azureHtml5JS", "flashSS", "silverlightSS", "html5"],
"nativeControlsForTouch": false,
autoplay: false,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("vd123", myOptions, function () {
});
myPlayer.src([
{
src: "src",
type: "application/vnd.ms-sstr+xml"
},
]);
myPlayer.currentTime(5);
</script>
Set begin time of Azure Media Player looked at this URL but not provided full code or not feeling any difference to what I tried?
As mentioned in the linked thread there are two ways to achieve this depending on your specific scenario. If you want to start at a specific time because there is a preroll slate (or like content that you don't care for your user to see), you should use the dynamic manifests in Azure Media Services. This is the recommended method and is generally the main scenario.
Also, as mentioned in the linked thread, if you wish to have done specifically in the player (so that means the content is actually viewable but just want to start at a specific time), you should listen for the play or playing event and set the currentTime after that point.
A simple way to do this is directly after setting the source of Azure Media Player:
myPlayer.addEventListener(amp.eventName.play, startTime);
function startTime() {
myPlayer.currentTime(5);
myPlayer.removeEventListener(amp.eventName.play, startTime)
}
i am new to google maps,
and i would like to integrate it into my website ( Yellow pages kind of site ).
i currently have the following code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
});
</script>
</head>
<body>
<div id="map_canvas" style="width: 500px; height: 300px; position: relative; background-color: rgb(229, 227, 223);"></div>
</body>
</html>
This code does work, and showing me the map for the specific Lat/Long
but, i want to be able to specifiy an address and not lat/long params,
since i do have the addresses of the companies in the phonebook, but do not have the lat/long values.
i tried searching for this, but i only found something similar on the V2 version, which was deprecated.
What you are looking for is Geocode feature in google service; first give an address to get a LatLng, then call setCenter to pan the map to the specific location. Google's API wrapped it very good and you can see how it works through this example:
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
var address = document.getElementById('address').value;
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);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You can use the google geocoder: http://code.google.com/apis/maps/documentation/geocoding/ Be careful - you can be out of quota and so the request to the geocoder will failed
Use of the Google Geocoding API is subject to a query limit of 2,500 geolocation requests per day.
If you are okay with an iframe, you can skip the geocoding hassle and use the Google Maps Embed API:
The Google Maps Embed API is free to use (with no quotas or request
limits), however you must register for a free API key to embed a map
on your site.
For example you would embed this into your page (replacing the ellipsis with your own personal Google API key):
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?
q=301+Park+Avenue,+NY,+United+States&key=..."></iframe>
Obviously the usefulness of this will depend on your use case but I like this as a quick and dirty solution.
There is a plugin for jQuery that makes it, it's name is gMap3, and you can see it in action here:
http://gmap3.net/examples/address-lookup.html
and here
http://jsfiddle.net/gzF6w/1/
gmap3 doesn't actually do it for you, as suggested by another answer: it just gives you an API to abstract-away the geocoding part of the process.
The answer is: Google doesn't actually allow you to do that anymore. At least not in V3, and since that's been around for more than a year...
You could actually send addresses for driving directions, but their API has made it illegal to send an address for a normal (embedded, API-based) map of any sort. The daily quota on geocoding is their play at "still allowing" addresses while in reality completely disallowing them for any real website.
You can link to a map with an address, though I cannot find this in Google's docs either:
http://maps.google.com/maps?f=d&saddr=&daddr=this is my address, city state
Maybe I just have a problem with this because they don't provide any clear, easy documentation - I have to come to StackOverflow to get the answers I'm looking for. Ie. they vaguely mention you need an API key to bypass the anonymous limits, but do not link either to what those limits are or how to use their API without a key. Which is what I want to do for skunkworks or proof-of-concept development. Instead Google wants to push their Maps for Businesses, etc., instead of providing actual information.