Here maps not load in browser - javascript

I'm using Here maps Javascript API for the first time. I am working through the HERE user Guide. I have also accessed some online tutorials I have found, which have basically the same code.
(My skill level: I have html, CSS, Python and GIS skills, and have recently done some basic Google maps javascript API).
The first map (using Here User Guide Quick Start chapter) will not load a map. The code is all in the HTML page, as shown in the Guide. (Code is attached below).
* The Here maps page loads presumably - you can see the HERE logo and copyright.
* The example map (Berlin loads).
* The Map only loads if the given settings are retained (zoom=10, LatLong is as given (Berlin)).
* If I move the Lat Long centroid just slightly, only half the map loads. Move to a new location, nothing loads.
* If I try to load a base map, the Berlin eg map also fails to load. (see Code)
* My app_Id and app_Code are included, but the Berlin (eg map) loads without them anyway.
* I signed on for the app_ID yesterday, and my Account page shows my Status as ‘Active’.
I am thinking that:
i) my app_ID and app_Code are failing?
ii) The Berlin eg map is supplied by Here so as not to require app_ID.
Any help to get me past this first hurdle would be appreciated, thanks. Apologies if I've made a glaringly simple error!
Steve
CODE:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<font class="tthdg_italic_1">HERE Maps Javascript API</font>
<!-- Map Container -->
<div style="width: 640px; height: 480px" id="mapContainer"></div>
<script>
// Initialize the platform object - app_ID and app_Code are included - I just removed for this post
var platform = new H.service.Platform({
'app_id': '{removed}',
'app_code': '{removed}'
});
// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.normal.map,
{
zoom: 10,
center: { lat: 52.5, lng: 13.4 }
});
// ADDITIONAL Code, also stops map from loading
// Change the map base layer to the satellite map with traffic information:
//map.setBaseLayer(defaultLayers.satellite.traffic); // FAILS !!
</script>
</body>
</html>

Your code is correct and should work. This is definitely an issue with your credentials. Please re-check that they are correct and part of an active plan (e.g., that your trial hasn't expired). Also, please remember that the curly brackets are not part of the credentials. If you believe that there is a problem with your account or plan, please contact the HERE account team.
While this is not the cause of your problems, please note that
map.setBaseLayer(defaultLayers.satellite.traffic);
won't work, because you have initialized the default layers under the variable name "maptypes", so this should be changed to:
map.setBaseLayer(maptypes.satellite.traffic);

Related

HERE Api Map is only displays a small part of the actual map and is not interactive

since I didn't want to give my credit card information to google apis, I'm trying to get along with HERE Api's for a webproject for university.
Poorly, my map is show only to ~15% and I can't scroll to anywehere else.
Here is my Code for this:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://js.api.here.com/v3/3.0/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
</head>
<div id="mapContainer" style="width:100%;height:600px">
</div>
<script>
var platform = new H.service.Platform({
'app_id': '{HERE IS MY APP ID}',
'app_code': '{HERE IS MY APP CODE}'
});
var maptypes = platform.createDefaultLayers();
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.normal.map,
{
zoom: 10,
center: { lng: 7.1690625, lat: 49.4677707 }
});
</script>
You might want to check out the blog post How to Migrate from Google Maps to HERE Dynamic Maps for a working example. If you want a "slippy map" that allows you to scroll and zoom you need to include a few more script libraries and css:
mapsjs-ui.js
mapsjs-mapevents.js
mapsjs-ui.css
You then need initialization of the H.mapevents.Behavior and H.ui.UI. Check out the blog post for a full source code listing for a basic interactive map.

here-api Uncaught TypeError: Cannot read property 'addDomListener' of undefined at

I am trying to integrate here-api map into my rails 5 app. Some background I have developed a similar app page with google maps in the past following a course successfully. Using here-api as an alternative as google recently be charging at certain levels.
I have successfully been able to display a here map with lng and lat hard coded. however
I am getting a blank screen were the map once was when I try to integrate the rails database info lng & lng. trying the same naming conventions and method as I have done in the past with integrating google. I am using/used gem 'geocoder', '~> 1.4'. as I am converting the address from the form into lng ltd that I had to for google map.
the chrome console log has an error: Uncaught TypeError: Cannot read property 'addDomListener' of undefined
at line:
H.Map.event.addDomListener(window, 'load', initialize);
expected outcome: using addDom to initialize when one changes there address it updates the db with the new lng lat and using var location to fetch the lng & lat. in place of the hard coded coordinates that was successful. expecting the here-api to use those lng, lat and it display the map same as the hard coded version. However I get a blank screen.
working: The correct lng & lat show up in the db when the address changes and in chrome inspection the lng & lat are in the html.
For google I had to use this:
google.maps.event.addDomListener(window, 'load', initialize);
for here I used(not sure if its correct method):
H.Map.event.addDomListener(window, 'load', initialize);
Below is the head portion of app thats not working
<script src="http://js.api.here.com/v3/3.0/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-ui.js"
type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css"
href="http://js.api.here.com/v3/3.0/mapsjs-ui.css" />
below is the partial view html.erb
<div class="card-body">
<div id="mapContainer" style="width: 100%; height: 400px"></div>
<script>
var platform = new H.service.Platform({
'app_id': 'my_appid_info-FROM_HERE',
'app_code': 'myappcodeinfo_FROM HERE'
});
// Obtain the default map types from the platform objec
var maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object:
function initialize() {
var location = {lat: <%= #location.latitude %>, lng: <%=
#location.longitude %>};
var map = new
H.Map(document.getElementById('mapContainer'), maptypes.normal.map, {
center: location,
zoom: 10
});
}
H.Map.event.addDomListener(window, 'load', initialize);
</script>
</div>
Many thank for your help.
There is no such function H.Map.event.addDomListener.
If you want to call initialize on window load event, use:
window.addEventListener('load', initialize);
Regarding map events, HERE has some methods under the H.mapevents package. Make sure to load mapsjs-mapevents.js if you need them. This would be useful for operations like adding an event listener on a map object, or even enabling events on the map like panning, zooming, etc.
You can refer to the javascript examples.

How do I prevent others from using my app key for HERE maps

I'm using HERE maps, and it shows my app_id and app_code in the html code. I want to use this app_id for my website only. There is a setting in the platform that allows me to set domains to use the app_id (Secure app credentials against a specific domain). I added my domain on the secured domain list. However it doesn't seem to work, for example, I want to use this code for my website A, then I copy the same code to another website B, and it still works on website B.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
</head>
<body>
<div id="map" style="height:550px;width:720px;"></div>
<script>
//Step 1: initialize communication with the platform
var platform = new H.service.Platform({
app_id: 'devportal-demo-20180625',
app_code: '9v2BkviRwi9Ot26kp2IysQ',
useHTTPS: true
});
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
//Step 2: initialize a map - not specificing a location will give a whole world view.
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map, {pixelRatio: pixelRatio});
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
function setUpClickListener(map) {
map.addEventListener('tap', function (evt) {
var coord = map.screenToGeo(evt.currentPointer.viewportX,
evt.currentPointer.viewportY);
addMarker(coord);
});
}
function addMarker(coordinates){
var marker = new H.map.Marker({lat:coordinates.lat, lng: coordinates.lng});
map.addObject(marker);
var bubble = new H.ui.InfoBubble({lat:coordinates.lat, lng: coordinates.lng}, {
content: '<b>Hello World!</b>'
});
// show info bubble
ui.addBubble(bubble);
}
setUpClickListener(map);
</script>
</body>
</html>
I looks as if this is not possible? The only protections available seems to be the secure domain list. Might I ask for an eample of what you have entered as the secure domain on the HERE developer portal and the domain of the site that will be utilising it? obfuscate it with a fake domain if required.
I had a quick play and it looks as if it's more intended for nodejs work. Javascript in the browser is executed clientside so the secure domain list wont do anything as it is the client executing it i'm pretty sure. I don't think this will work for your intended purpose.

This page didn't load Google Maps correctly. See the JavaScript console for technical details

Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details.
i don't know why .
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
var myCenter = new google.maps.LatLng(30.023354, 31.477439);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
You need generate special api key for google maps
your
<script src="http://maps.googleapis.com/maps/api/js">
should looks like this
<script src="https://maps.googleapis.com/maps/api/js?key=your_key">></script
Go to https://console.developers.google.com to get a free key.
Here’s how to fix the error.
Go to https://console.developers.google.com/apis/credentials
Click your API key’s name to edit its settings.
Under Application restrictions, choose “HTTP referrers (web sites)” then add the two entries below (replacing yourname.com with your own domain).
Type the first entry then hit enter on your keyboard to add it. Repeat to add the second entry.
Having both entries (with asterisks) will help ensure your maps work on any URL of your website.
yourname.com/*
*.yourname.com/*Google Maps API Restrictions
Click the Save button then wait a few minutes for the change to take effect (Google says it can take up to 5 minutes).

How to use generated "Key" in google maps

Since from 2 months I am trying to implement google maps.But still am not done with it.
Question 1,Question 2,Question 3 were my previous doubts.
After a long research I got to know that:-
"Google accepts only 10 requests/sec.If it receives more, then it generates a status 'OVER QUERY LIMIT'.Solutions are to buy that API(not sure about it completely) OR Generate a key with Google Maps which will accept 25000 req/day(Suitable for my requirement)".
Now I have a key.The issue is "It's usage".
Code snippet:
1.
<meta charset="UTF-8" />
<script src="http://maps.google.com/maps/api/js?key=AIz************************************"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
//The list of points to be connected
<?php
***********
This gives an alert:
"The provided Google API key is invalid or this site is not authorized to use it"
2.
<meta charset="UTF-8" />
<script src="http://maps.google.com/maps/api/js?sensor=true?key=AIz************************************"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
//The list of points to be connected
<?php
***********
Usage of sensor removes the alert but it still gives the status 'OVER QUERY LIMIT'.
As mentioned here I've tried editing the credentials and all but nothing works out.
Working fiddle
Kindly help me out in solving this. If possible give any direct steps, instead of so many links and indirect instruction/comments.
Thank you
I think I should stop using SO...
This answer is for the beginners like me.
1.No need of sensor in Google API V3
2.Use browser key like this - <script src="http://maps.google.com/maps/api/js?key=AIz************************************"></script>
3.In Edit allowed references under credentials give the complete path.
Explained in this Answer

Categories

Resources