SAPUI5 - Google map not showing. There are no error in Console but google map is not showing. Please find the code snippet that I have tried.
Index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script
src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyCEf_wLCEciMDw7tgnDGXptl94rdzLhW7Y&libraries=places"
type ="text/javascript"> </script>
<script id='sap-ui-bootstrap' type='text/javascript'
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m'></script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("googlemaps");
var app = new sap.m.App({initialPage:"idgooglemaps1"});
var page = sap.ui.view({id:"idgooglemaps1",
viewName:"googlemaps.googlemaps",
type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
</script>
<style>
.myMap {
height: 100%;
width: 100% ;
}
</style>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
In View, I have included canvas
<HBox id="map_canvas" fitContainer="true" justifyContent="Center"
alignItems="Center" >
</HBox>
Controller: In event OnAfterRendering I have written the map initialization.
onAfterRendering: function() {
if (!this.initialized) {
this.initialized = true;
this.geocoder = new google.maps.Geocoder();
window.mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//This is basically for setting the initial position of the map, ie. Setting the coordinates, for the place by default
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
console.log(map);
var infowindow = new google.maps.InfoWindow;
var geocoder = new google.maps.Geocoder();
var marker = new google.maps.Marker({
map: map,
});
When you create a UI5 control, the ID assigned to the HTML elements is a generated ID('idgooglemaps1--map_canvas' in your case ). So an element with ID 'map_canvas' does not exist. You can however fetch the UI5 control & get the generated ID.
var oHBox = this.getView().byId("map_canvas");
var map = new google.maps.Map(document.getElementById(oHBox.getId()), mapOptions);
it seems that something is missing. in fact by means of the inspector, the right path for item my be longer than what oHBox.getId() returns.
for example:
container-TestGpsNew---View1--box1-container-TestGpsNew---View1--myAppGPS-0
oHBox.getId() = container-TestGpsNew---View1--box1,
container-TestGpsNew---View1--myAppGPS is the path for the View for example :
this.byId("myAppGPS").getId()
There is the remaining "-0" which I don't know where it is from. still searching.
Related
About 3 weeks ago the arcgis Dynamic service is no longer visible on the google map. At the beginning I thought that something went wrong with my code, but after executing a sample code that does the same with the same result, I realized that something else went wrong.
The following code was taken from "ArcGIS Server Link for Google Maps API V3: Examples". It is basically loading an ESRI sample dynamic service.
When I load a Dynamic service from my arcgis server, the service is loaded but its not visible on the google map. (I know that because when I click on the map I get the property window of the feature from the Dynamic service although it is not visible).
If you run the following code you will not be able to see the esri dynamic service:
http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer][1]'.
My question is what went wrong here?
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Dynamic Map Service Overlay</title>
<script type="text/javascript">
//copy from http://gmaps-samples.googlecode.com/svn/trunk/versionchecker.html?v=2.86
function getURLParam(name) {
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
return (results === null ? "" : decodeURIComponent(results[1]));
}
var gmaps_v = getURLParam('v');
if (gmaps_v) gmaps_v = '&v='+gmaps_v;
var script = '<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false' + gmaps_v + '"></' + 'script>';
document.write(script);
</script>
<script type="text/javascript" src="../src/arcgislink.js">
</script>
<script type="text/javascript" src="dynamap.js">
</script>
</head>
<body style="margin:0px; padding:0px;">
<div id="map_canvas" style="width:100%; height:100%">
</div>
</body>
//dynamap.js
function init() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(40, -100),//35.23, -80.84),
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true //my favorite feature in V3!
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var url =
'http://sampleserver1.arcgisonline.com/ArcGIS/
rest/services/Demographics/ESRI_C
ensus_USA/MapServer';
var url =
'http://sampleserver1.arcgisonline.com/ArcGIS
/rest/services/Demographics/ESRI_Census_USA/MapServer';
var dynamap = new gmaps.ags.MapOverlay(url);
dynamap.setMap(map);
}
window.onload = init;
I have a component called foo
I have foo.html in apps/foo/components/content/foo/foo.html
currently this file contains the following.
<div data-sly-use.ev="Foo"
class="${ev.cssClass || ''}"
title="${ev.title || ''}"
data-emptytext="Foo Asset">
${ev.html # context='unsafe'}</div>
I have Foo.java in apps/foo/components/content/foo/Foo.java
that has getCssClass(), getTitle(), getHtml() needed by foo.html.
The above works fine
Question
When the user adds this component to the page, I want it to include a google map in the page. The lat/long to the google map will be provided by Foo.java#getLat() and Foo.java#getLong()
How can I do this?
I have the google map working in an HTML outside of AEM and the code is pretty simple:
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
center: myLatlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
the lat/long values for myLatlng variable in the above javascript will need to come from Foo.java.
If you want to pass parameters to a script you can do as they generally do in Coral UI via data-xxx attributes in the Sightly script.
Set the property from your Foo into a data attribute in some DIV you will later fetch in JS.
Get the div in JS via its ID and obtain the data attributes you are interested in.
Example:
Sightly
<div id="map_canvas" data-lat="${ev.lat}" data-long="${ev.long}">
</div>
Javascript
this.mapCanvas = document.getElementsByClassName("map_canvas")[0];
var lat = $mapCanvas.data("lat");
var long = $mapCanvas.data("long");
var myLatlng = new google.maps.LatLng(lat,long);
I hope this helps! :)
I followed the instructions from https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map
When I run it at Netbeans 8.0.2, only the gray div showed up, no map was shown.
This is my code:
<html>
<head>
<title>Practicing Google Maps</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="https://maps.googleapis.com/maps/api/js">
function initialize() {
// The Map object constructor takes two arguments:
/*
* A reference to the div that the map will be loaded into. We use
* the JavaScript getElementById function to obtain this:
*/
var mapCanvas = document.getElementById('map-canvas');
/*
* Options for the map, such as the center, zoom level, and the map type.
* There are many more options that can be set, but these three are required:
*/
var mapOptions = {
center: new.google.maps.LatLng(44.5403. -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(mapCanvas);
}
/*
* Add an event listener to the window object that will call the initialize function
* once the page has loaded. Calling initialize before the page has finished loading
* will cause problems, since the div it's looking for may not have been created
* yet; this function waits until the HTML elements on the page have been created
* before calling initialize.
*/
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas">
</div>
</body>
</html>
What did I miss? I even comment Google's instructions so I will not miss a thing but still, Google Map didn't show up.
Thank you.
You appear to be missing the closing </script> after loading the Google maps library. And then an opening <script> tag for your code. You also have a few typos, corrected below:
center: new google.maps.LatLng(44.5403, -78.5463),
You've also left out mapOptions when initializing the map:
var map = new google.maps.Map(mapCanvas, mapOptions);
And finally, your div should have some dimensions.
Working code below:
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(mapCanvas, mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div style="height:200px; width:200px" id="map-canvas">
Try adding a dimension to your map-canvas div. This usually works.
<div id="map-canvas" style="width:100%; height:100%;"></div>
I'm trying to run a simple google maps example (this is the example: https://developers.google.com/maps/documentation/javascript/examples/map-simple-async). I put the code in my .hmtl file but I`m getting a blank page. And, of course this seems to happen with all google examples (I save all my files on ANSI format).
The code is:
<!DOCTYPE html> <html> <head>
<title>Asynchronous Loading</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script>
function initialize()
{
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function loadScript()
{
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://maps.googleapis.com/maps/api/js?key=<MY_CODE>&sensor=false&callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script> </head> <body>
<div id="map-canvas"></div> </body> </html>
On that Google example they also include a link to a CSS file. You don't have any CSS (either inline or external) in the code you've put into the answer.
Look at their CSS file, you'll need something similar:
https://developers.google.com/maps/documentation/javascript/examples/default.css
I'm trying to prototype some plotting on Google Maps API. I've followed the code here and think my code should work, however I get a blank screen. All of the objects have what appears to be the correct data but alas no dice. Any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<title>Google Maps Test</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=<key removed>&sensor=false"></script>
<style type="text/css">
</style>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(33.001466, -97.354317);
var mapOptions = {
zoom:6,
center:myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
console.log(mapOptions);
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
console.log(map);
var routeCoordinates = [
new google.maps.LatLng(33.001466, -97.354317),
new google.maps.LatLng(33.025001, -97.352171),
new google.maps.LatLng(33.033219, -97.341700),
new google.maps.LatLng(33.049321, -97.320414),
new google.maps.LatLng(33.051335, -97.304020),
new google.maps.LatLng(33.059464, -97.298355),
new google.maps.LatLng(33.083919, -97.295609),
new google.maps.LatLng(33.111314, -97.291918),
new google.maps.LatLng(33.136042, -97.289257),
new google.maps.LatLng(33.182818, -97.287111)
];
console.log(routeCoordinates);
var routePath = new google.maps.Polyline({
path:routeCoordinates,
strokeColor:"#000000",
strokeOpacity:.90,
strokeWeight: 2,
editable:false
});
console.log(routePath);
routePath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas">
</div>
</body>
</html>
You map works for me if I remove the key and give the map div a size.
http://www.geocodezip.com/JohnSwaringenSO.html