I'm starting with the HERE APIs, but in the first example my code is not working. I've reviewed and refacted it, but when I update my browser, nothing appears.
Can you help me please?
<!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>
<div style="width: 640px; height: 480px" id="mapContainer">
<script>
// Initialize the platform object:
var platform = new H.service.Platform({
'app_id': '{xxx}',
'app_code': '{xxx}'
// I have a valid ID and a CODE.
});
// 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: {
lng: 13.4,
lat: 52.51
}
});
</script>
</div>
</body>
</html>
Please check in your browser developer tools (network and console tab) for any type of errors you get. It will help you understand more about the issue you are facing.
If your issue is similar to something like below then try this solution:
Security Error: If your browser complains about the Javascripts you have included try using there https version like below
<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>
If you are seeing some other error then paste the error for us to help you better.
Is there any error on the console?. I pasted your code inside of my editor and it work normally. One thing that you might be doing it wrong could be that you are placing the '{yourkey}' with the {} instead of 'yourkey'. You don't need the { }. Other than that, I can't seem to see what the problem would be.
Related
I'm creating a web aplication in JAVA/SPRING/HTML5 with Thymeleaf that makes a map with markers based on a H2 Database with latitude and longitude of all customers. I was successful in the backend x front integration. The Java controller send a object to HTML page with Thymeleaf, that page import a javascript file with a google map generate function, consuming the object and executing the function. But the problem is: the map do not generate on the page
I debug the code and dont figure out whats the problem.
HTML CODE (I reduce the code to focus on the problem):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Mapa do cliente</title>
</head>
<body>
<div class="mapa"
th:attr="data-latitude=${customer.latitude},data-longitude=${customer.longitude}"
id="map" style="width: 100%; height: 100%"></div>
<script src="https://jquery.gocache.net/jquery-3.5.1.min.js"
type="text/javascript"></script>
<script src="/webjars/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=&v=weekly"></script>
<script src="/js/mapFunctions.js"
type="text/javascript"></script>
</body>
</html>
JAVASCRIPT CODE:
let map;
var lat = $('.mapa').attr('data-latitude')
var lng = $('.mapa').attr('data-longitude')
function initMap(lat, lng) {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat, lng },
zoom: 8
});
}
initMap(parseFloat(lat), parseFloat(lng))
I print the 'lat' and 'lng' variables in console and they are ok. Im not a expert in javascript and english, so excuse-me whatever not good pratice.
Have you tried $( document ).ready() ? The DOM may not render your map element when you call initMap(parseFloat(lat), parseFloat(lng))
Appears to be a style problem. How was not renderizing the map, i tryed to change the height and witdh of 100% to 500px in <div id="map">, and the maps showed up. So, the code above really attends its purpose, if the change are make. Sure there is better prattices, but for didatic way i think its a valid contribution. Thanks for the help guys.
I have an interactive Here Maps map running in Legacy mode, with a tap event listener added, like so:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-data.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>
<body>
<div>
<div style="width: 640px; height: 480px" id="mapContainer"></div>
</div>
<script type="text/javascript">
// Initialize the platform object
var platform = new H.service.Platform({
// We use a real API key but it's not included here for obvious reasons
'apikey': 'notARealAPIKeyPleaseSubstituteForARealOne'
});
// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object
// Using raster maptype and P2D for compatibility with IE11
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.raster.normal.map,
{
zoom: 12,
center: { lat: -33.81, lng: 150.78 },
pixelRatio: window.devicePixelRatio || 1,
engineType: H.map.render.RenderEngine.EngineType.P2D
});
// Add a default UI to the map
var ui = H.ui.UI.createDefault(map, maptypes);
// Make the map draggable
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Add a listener for the 'tap' event on the map
map.addEventListener("tap",
function (evt) {
console.log("Map tapped!", evt)
});
</script>
</body>
</html>
This works all well and fine in browsers like Chrome and IE11, with the map being draggable and tap event details being logged to the console. However, as soon as this page is added as the URL for a .NET WebBrowser control in a WinForms project, the map dragging and tap events suddenly stop working, with no errors being logged to the console. It's almost as if something there is preventing the map events from firing for some reason.
I've already tried the registry hack detailed in this post to force the WebBrowser in the WinForms app to use IE11 without IE7 Compatibility Mode (and verified this was applied properly with a user agent checker), to no avail. I've also tried running the page as it's loaded into the WinForms app in the Visual Studio debugger, and it's definitely hitting the addEventListener line with no problems. The last thing I tried was adding a button to the page with a click event, and this works fine too.
I feel like I'm running out of options here. Is there something I'm overlooking, or is there some weird behaviour in WebBrowser controls that would prevent these events from firing? If so, is there a way around it?
Legacy support1:
Internet Explorer 9, 10, 11
iOS WebView desktop
iOS 11+
To know more about the browser support for JS APIs, please refer : https://developer.here.com/documentation/maps/3.1.17.0/dev_guide/topics/why-use.html
I have been trying to build a Web Map using the Leaflet. One of the tasks that I was trying to execute was adding a "Shapefile" on the basemap. I get the below error in the console when I try to execute the file.
TypeError: L.Shapefile is not a constructor
I have verified if my shapefile is not corrupt by running it on,
http://leaflet.calvinmetcalf.com.
I am not sure where I am going wrong. I would genuinely appreciate some guidance, I am new to JavaScript and Leaflet so I may have missed something obvious.
The code:
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="leaflet/leaflet.js"></script>
<script src="leaflet/leaflet.shpfile.js"></script>
<script src="leaflet/shp.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([32.78, -96.80], 11);
L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
{
attribution: 'Tiles by MAPC, Data by MassGIS',
maxZoom: 17,
minZoom: 9
}).addTo(map);
var shpfile = new L.Shapefile("DALNEI.zip");
shpfile.addTo(map);
</script>
</body>
</html>
Thank you so much!
You need to verify that your lealet/shapefile.js is actually loading, as every problem you have so far is indicating it's not at the path you're specifying. Checking your browser console for 404 errors will verify this.
The "not a constructor" and "not a function" errors have nothing to do with the content of your shapefile. They are both saying the properties on L, shapefile and Shapefile, that your are trying to access, don't exist.
Yesterday api was working. Today an error occurs:
Uncaught ReferenceError: amd is not defined
Can someone help me please?
<!DOCTYPE html>
<html>
<head>
<title>loadMapAsyncHTML</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
</head>
<body>
<div id='printoutPanel'></div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
var map;
function loadMapScenario() {
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key'
});
}
</script>
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>
</body>
UPDATE
This error was fixed by Bing Team.
The team is investigating the root cause as it appears something has changed in the hosting platform which is causing this issue. No code was changed in any of the Bing Maps branches. In the mean time, many have implemented the workaround that David referenced.
Update: A hotfix is being rolled out. You should start seeing Bing MAps V8 loading again as as the hotfix rolls our across our data centers/servers.
If you license Bing Maps (i.e. are a paying customer), make sure you have logged an incident with the Bing Maps Enterprise support team. This will allow them to send you an incident report in the next week or so with details on this incident. If you do not have contact details for the support team, you can find them here: https://www.microsoft.com/maps/support.aspx
https://social.msdn.microsoft.com/Forums/en-US/31063241-34a2-4787-82ba-8e58bf1a2800/uncaught-referenceerror-amd-is-not-defined?forum=bingmaps
found a fix, add:
<script type="text/javascript">
window.amd = function(){};
window.amd.define = function(){};
</script>
<script type='text/javascript' src='//www.bing.com/api/maps/mapcontrol?branch=release'></script>
Here is my view.jsp, it is just the example from Google. I wanted to just get this to display before moving forward with it:
<%# include file="/init.jsp" %>
<p>
<b><liferay-ui:message key="mapsportlet_mapsPortletmvcportlet.caption"/></b>
</p>
<DOCTYPE! html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 20%;
margin: 0;
padding: 0;
}
#map {
height: 20%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeekwNluL4ssJ3QAFGPSkFHYYQvZoNbVM&callback=initMap"
async defer></script>
</body>
</html>
I'm running a local instance of liferay 7 on localhost:8080. I believe the JavaScript is firing because I did not have my API key set correctly and I could see in the javascript console that it was being denied. After fixing my API key, I no longer see any errors in the console of the browser, but I don't see the map display in my Portlet.
Do you see anything wrong with the view.jsp? Or is there another way I should be going about this?
You're tagging this question with "liferay", so I'm assuming that you're using the JSP you post as a portlet's view. A portlet must never contain <html>, <head> or <body> because this markup will be added by the portal.
Also be careful with the map id: If you add the same portlet to the page twice, this won't work as well as you'll end up with a duplicate HTML element id. If this ends up being a problem, utilize <portlet:namespace/> to make the identifier unique. You might also want to try if some other portlet adds this id already. It might be working already, just being invisible - depending on where this id has currently been used already.
Also, I'm not sure if the <style> will or will not be ignored when contained in a superfluous <html><head> section. Try by explicitly styling your <div> with an appropriate height.