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.
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'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.
I've developed a database application in MS Access 2010 that has an embedded WebBrowser Control which is used to view a local web page. The page uses the Google Maps API to provide some unique mapping capabilities and I use the web browser control to access javascript in the webpage to pass map data between the database and the webpage that renders it.
However, I've been running into the "Access is Denied" cross-domain error that I can't resolve. I recall addressing this before, and it involved adding a "Mark of the Web" comment and ensuring the appropriate IE compatibility mode - both of which I've done.
The HTML file is locally loaded, and it includes a series of javascript files in a separte folder (also local). The javascript files use the google maps API to populate the map in the web browser control
Anyway, see below for the index.html file that the webbrowser control directly loads inside MS Access. There's a lot of code overall, so I don't want to spam the thread until I have a better idea of what I should be looking for.
Incidentally, I am using an HTMLWindowProxy object from within VBA to directly call the loaded javascript functions embedded in the web pages.
Specifically, from within VBA, I call:
Call proxyWindow.execScript mScriptName
or
Call proxyWindow.Navigate mScriptName
It's this call that generates the error.
<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”><meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
.gm-style-iw {
min-width: 150px;
}
</style>
</head>
<body>
<div id="pathData">
<input type="hidden" id="docReadyState" value="unset">
<input type="hidden" id="default_position"
data-lat=41.843435 data-lng=-89.481619>
<input type="hidden" id="location_address" value="">
</div>
<div id="map-canvas"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&key=REDACTED"></script>
<script src="js/html.js"></script>
<script src="js/BindableBase.js"></script>
<script src="js/mvcarraybinder.js"></script>
<script src="js/ButtonControl.js"></script>
<script src="js/ElementOptions.js"></script>
<script src="js/SectionMarker.js"></script>
<script src="js/SectionPolyline.js"></script>
<script src="js/SectionMap.js"></script>
<script src="js/main.js"></script>
<script>
document.onreadystatechange = function () {
if (document.readyState === "complete") {
document.getElementById ("docReadyState").value = "ready";}
else {
document.getElementById("docReadyState").value = "busy";}
}
</script>
</body>
Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details.
i don't know why
API error: RefererNotAllowedMapError
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</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=myAPI&callback=initMap"
async defer></script>
</body>
</html>
Please take a look at Google maps api tutorial:
https://developers.google.com/maps/documentation/javascript/tutorials/adding-a-google-map
When reading carefully, you will see that a key, YOUR_API_KEY, is needed
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
To get your key go here: https://developers.google.com/maps/documentation/javascript/tutorials/adding-a-google-map#key
I had the same problem, trying to use Google Maps API. Got the same message to go look into JavaScript Console. What a waste of time!
In my case the problem was that I mistyped the domain name (the referrer) when getting the Browser API key from Google.
Fixing the name of the referring domain (http://example.com/*) inside Google API site solved the problem for me.
Replace your googleApi maps plugin with this...
"https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap"
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</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 type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap"></script>
</body>
</html>
Hope it works for you.
I had this same problem when going live with a site on a new host with a page that included an embedded map that had not been on the site previously. The map had worked on my development site, so this was a surprise to me as well.
If you landed on this page doing a Google search, you'll want to start here: https://developers.google.com/maps/documentation/javascript/get-api-key.
If you wish to read the announcement about the API key requirement, read this: https://googlegeodevelopers.blogspot.com/2016/06/building-for-scale-updates-to-google.html
Also note, in my case anyway, "&callback=initMap" caused an error.
You can refer the Google Maps documentation for different error codes here :
https://developers.google.com/maps/documentation/javascript/error-messages#deverrorcodes
The above error code is described in the documentation as below:
The current URL loading the Google Maps JavaScript API has not been
added to the list of allowed referrers. Please check the referrer
settings of your API key on the Google API Console.
Please check the link to the maps documentation for error messages for more details.
Google Maps now requires the use of a Google Maps API key to display a map on your site as per this article: https://googlegeodevelopers.blogspot.co.za/2016/06/building-for-scale-updates-to-google.html.
Go to https://console.developers.google.com/apis/credentials
Click your API key’s name to edit its settings.
Under Application restrictions, make sure “HTTP referrers (web sites)” is selected and that you have added the two entries below (replacing yourname.com with your own domain). Both are necessary and be sure that have you appended /* to the end.
Example :
yourname.com/*
*.yourname.com/*
4.Click the Save button then wait a few minutes for the change to take effect (Google says it can take up to 5 minutes).
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</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=myAPI&callback=initMap"
async defer></script>
</body>
</html>
I am trying the new Bing Maps v8.
I follow one of the firsts examples:
http://www.bing.com/api/maps/sdk/mapcontrol/isdk#loadMapSync+HTML
It works. But when I add a text, like test, it stops showing the map:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
</head>
<body>
test
<div id='printoutPanel'></div>
<div id='myMap'></div>
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol'></script>
<script type='text/javascript'>
function loadMapScenario()
{
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key'
});
}
window.onload = loadMapScenario;
</script>
</body>
</html>
The word test in the 7th line makes it to stop working.
Any idea?
The doctype shouldn't be the cause for failure here, in fact it should reduce issues as that is the doctype used for HTML5, which the map uses.
The code you provided should work. Looking into this I found that the width of the map is never being set, and as such it ends up being 0. When no width or height is specified for the map, the map tries to use the dimensions of it's parent. It appears that adding the text into body is causing the calculation to be incorrect. I'll have the dev team look into this.
Also, I would only use the Sync method of loading the map if you were migrating old code that needed to run synchronously. If you are creating a new app you should load the map control asynchronously as it will allow your page to load faster. http://www.bing.com/api/maps/sdk/mapcontrol/isdk#loadMapAsync+HTML