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
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 trying to calculate the load time and page size of different URLs/Pages similar to the developer tools performance tab but in javascript. But the current code only calculates its current page instead of a different URL. Is there any way for me to do this because with my research I have no luck.
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<script type="text/javascript">
var start = new Date().getTime();
function onLoad() {
var now = new Date().getTime();
var latency = now - start;
alert("page loading time: " + latency+"\n"+"Start time:"+start+"\n"+"End time:"+now);
alert("Load_size:"+document.getElementsByTagName("html")[0].outerHTML.length + "KB");
}
</script>
</head>
<body onload="onLoad()">
<!- Main page body goes from here. -->
</body>
</html>
It will not be possible to read the runtime parameters of a page outside the page your javascript is running on.
Part of the security model is to avoid being able to inspect the runtime of other pages. This is called the "sandbox". You'll need to build a plugin that breaks the sandbox to inspect the domLoad / domReady and other performance events.
Good news though, you probably have one built in! The console for modern browsers shows all those events in the timeline tab.
If you're trying to make a service that attempts to evaluate the runtime of other pages, you'll need to load those in a virtual web browser on the server and interpret the results using selenium or something similar.
You can try this to calculate the load time of a page:
<script type="text/javascript">
$(document).ready(function() {
console.log("Time until DOMready: ", Date.now()-timerStart);
});
$(window).load(function() {
console.log("Time until everything loaded: ", Date.now()-timerStart);
});
</script>
edit: this will only work on pages where this JS code will run, so if you cant insert code onto the page you wont be able to run it.
I am doing my damnedest to embed a Google trends chart into a section of my site.
In theory, it seems easy:
1.) copy script from Google:
2.) Clear a space in your webpage:
3.) Add the code:
<div class="full-row4" style="height: 300px;">
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1386_RC02/embed_loader.js"></script>
<script type="text/javascript">
trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"/m/078rys","geo":"","time":"today 12-m"}],"category":0,"property":""},
{"exploreQuery":"q=%2Fm%2F078rys&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}
);
</script>
</div>
Seems easy right? wrong!
Every time I do this, I get this result:
Upon further inspection, I found that when those scripts were loaded in, it wipes my entire body of the webpage. (Note: the chart gets loaded in thru an AJAX call containing the entire active page minus the navbars)
I've tried an array of different logic to try and get this to work, but everything I try deletes all HTML in the body tag of the webpage. (script tags are still there)
I found people with a similar issue, but it seems Google has changed how you embed these widgets into a site. Rendering any previous stackoverflow documentation useless. (at least from what I found)
you can use renderExploreWidgetTo() function instead, it takes DOM element as first parameter:
var divElem = document.getElementById('wrapper');
trends.embed.renderExploreWidgetTo(divElem,"TIMESERIES", {"comparisonItem":[{"keyword":"dbs bank","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dbs%20bank&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"});
Google trends embed script create an iframe at the hosting website.
Here is a simple example.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>hello</h1>
<div>
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1386_RC02/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"dogs","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dogs&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}); </script>
</div>
<h1>world</h1>
</body>
</html>
As you can see, the body is not affected.
The problem is probably not with the trends scripts, but a more general issue.
Try creating an iframe at your page, does it display correctly?
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.