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.
I want to rotate the kml layer in my map but it is not rotating however kml file contains the rotation tag. Here is KML file.
KML File
I am using this code to include the kml file.
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
mapTypeId: google.maps.MapTypeId.SATELLITE,
center: myLatLng
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://s3.amazonaws.com/navizon.its.fp/1001/zk01w7hhv4_o.kml',
map: map
});
<rotation/> is not supported in KmlLayer, see https://developers.google.com/kml/documentation/kmlelementsinmaps for supported elements
One option would be the third party KML parser geoxml3 which now supports the <GroundOverlay> <rotation> tag (with a change to the helper ProjectedOverlay library). (Disclaimer: I am currently the maintainer).
example with your KML
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
center: {
lat: 0,
lng: 0
},
zoom: 0
});
infowindow = new google.maps.InfoWindow({});
var geoXml = new geoXML3.parser({
map: map,
infoWindow: infowindow,
singleInfoWindow: true,
});
geoXml.parseKmlString(kmlData);
}
google.maps.event.addDomListener(window, 'load', initMap);
var kmlData = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"><Document><name>course_3.kml</name><Style id="sh_ylw-pushpin"><LineStyle><color>ff0000ff</color><width>3</width></LineStyle></Style><Style id="sn_ylw-pushpin"><LineStyle><color>ff0000ff</color><width>2.5</width></LineStyle></Style><StyleMap id="msn_ylw-pushpin"><Pair><key>normal</key><styleUrl>#sn_ylw-pushpin</styleUrl></Pair><Pair><key>highlight</key><styleUrl>#sh_ylw-pushpin</styleUrl></Pair></StyleMap><Folder><name>Bucket Regatta 2014 - Around the Island Cours (Short)</name><open>1</open><Placemark><name>Bucket Regatta 2014 - Around the Island Cours (Short)</name><styleUrl>#msn_ylw-pushpin</styleUrl><LineString><tessellate>1</tessellate><coordinates>-62.86033284828354,17.8845504927191,0 -62.84458650469701,17.87473959704673,0 -62.83547659050955,17.86945167794833,0 -62.83388304026133,17.86867910723514,0 -62.83321075835203,17.86842764302893,0 -62.83244614152226,17.86829326710066,0 -62.83095108255348,17.86812958593426,0 -62.8252089501432,17.86760084008422,0 -62.81367914534573,17.86719796434468,0 -62.8028525753019,17.86714467828739,0 -62.79756667270858,17.86751051155173,0 -62.79509376490336,17.86786570346247,0 -62.79412412763578,17.86809155768074,0 -62.79338147339845,17.86834753898355,0 -62.79292197702473,17.86872845424952,0 -62.79236941605821,17.86972789718922,0 -62.79196728876664,17.87057855391474,0 -62.79095434506525,17.87302053688485,0 -62.78769902736699,17.88296771449728,0 -62.78520601621152,17.8921161942094,0 -62.78298714148205,17.90141446335292,0 -62.78215426430953,17.90588128332446,0 -62.78180288654804,17.9081463412259,0 -62.78171537826803,17.90959573053742,0 -62.78176111029458,17.91085157814362,0 -62.78209906045792,17.91195531708489,0 -62.78278820483929,17.91396330057004,0 -62.78453903421586,17.91810287947595,0 -62.78752730575776,17.92390658974894,0 -62.78875333123023,17.9259212696348,0 -62.78986544653639,17.92755568861479,0 -62.79078421150102,17.92859792870751,0 -62.79831145019485,17.93443063643228,0 -62.80584033616613,17.94020945772508,0 -62.81258307095833,17.94514006132481,0 -62.81448933178827,17.94638884742845,0 -62.81601070417865,17.94716110662928,0 -62.81775976509371,17.94767575361211,0 -62.81986862853103,17.94779702318609,0 -62.82149546368095,17.94779229499462,0 -62.82371517654716,17.94766157324279,0 -62.82621465923376,17.94746630950224,0 -62.83049328518798,17.94705904912,0 -62.83919972063341,17.9459216448811,0 -62.84628848778544,17.94477832659337,0 -62.85888853921235,17.94250489675832,0 -62.87239257119431,17.93981825881495,0 -62.8811980398479,17.9377795947891,0 -62.88775645578315,17.93609294178501,0 -62.89173988675277,17.93489414228672,0 -62.89412558290244,17.93395197835972,0 -62.89552567301983,17.93307595570021,0 -62.89648507743102,17.93172350534812,0 -62.89669004691491,17.93099109405102,0 -62.89675976559775,17.93021394953048,0 -62.89663735225985,17.92926394813965,0 -62.89634128071585,17.92835412072944,0 -62.89557221863525,17.9270680837545,0 -62.89388090053903,17.92485240345483,0 -62.87826523882355,17.9063455885609,0 -62.86096890036382,17.88703596862992,0 </coordinates></LineString></Placemark><GroundOverlay><name>Untitled Image Overlay</name><open>1</open><Icon><href>http://3d-islands.com/ais/bucket_2013/trace_day3.png</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>17.88892896821306</north><south>17.88720675592857</south><east>-62.86037690770465</east><west>-62.86354378113808</west><rotation>307.820971098897</rotation></LatLonBox></GroundOverlay><GroundOverlay><name>Untitled Image Overlay</name><open>1</open><Icon><href>http://3d-islands.com/ais/bucket_2013/trace_day3.png</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>17.88462189853965</north><south>17.88289968625519</south><east>-62.85754360921412</east><west>-62.86071048264756</west><rotation>323.6259195552798</rotation></LatLonBox></GroundOverlay><GroundOverlay><name>Untitled Image Overlay</name><open>1</open><Icon><href>http://3d-islands.com/ais/bucket_2013/trace_day3.png</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>17.86797860237289</north><south>17.86625639008843</south><east>-62.80737139571207</east><west>-62.8105382691455</west><rotation>357.5851829764764</rotation></LatLonBox></GroundOverlay><GroundOverlay><name>Untitled Image Overlay</name><open>1</open><Icon><href>http://3d-islands.com/ais/bucket_2013/trace_day3.png</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>17.90390563534902</north><south>17.90218342306457</south><east>-62.78104451432495</east><west>-62.78421138775838</west><rotation>77.74273626527004</rotation></LatLonBox></GroundOverlay><GroundOverlay><name>Untitled Image Overlay</name><open>1</open><Icon><href>http://3d-islands.com/ais/bucket_2013/trace_day3.png</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>17.94462710084591</north><south>17.94290488856144</south><east>-62.80891396332905</east><west>-62.81208083676248</west><rotation>142.8275337342407</rotation></LatLonBox></GroundOverlay><GroundOverlay><name>Untitled Image Overlay</name><open>1</open><Icon><href>http://3d-islands.com/ais/bucket_2013/trace_day3.png</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>17.94188422571256</north><south>17.94016201342811</south><east>-62.86522147937472</east><west>-62.86838835280815</west><rotation>191.2539027987112</rotation></LatLonBox></GroundOverlay><GroundOverlay><name>Untitled Image Overlay</name><open>1</open><Icon><href>http://3d-islands.com/ais/bucket_2013/trace_day3.png</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>17.92371079228007</north><south>17.92198857999562</south><east>-62.89070522661952</east><west>-62.89387210005297</west><rotation>307.3348255545322</rotation></LatLonBox></GroundOverlay></Folder></Document></kml>';
html,
body,
#map_canvas {
height: 100%;
width: 100%;
}
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3#master/kmz/ZipFile.complete.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3#master/kmz/geoxml3.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3#master/ProjectedOverlay.js"></script>
<div id="map_canvas"></div>
The title says the question. Now, is it good to use a counter that starts from zero and when it is 1 or more I wouldn't add a marker. Or should I try to make it such that when someone clicks on the map the old marker disappears and the new one is assigned? The following code is what I have so far.. Thanks for any kind of help.
Also, how can I access the longitude and latitude in the next page?
And about capturing the map into a blob, is it a different topic or it is also related?
Thanks
<!DOCTYPE html>
<html>
<head>
<title>Accessing arguments in UI events</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882,131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize();">
<div id="map-canvas"></div>
</body>
</html>
I would say its up to you and your application later how you handle the markers.
You can implement a counter, create a dragable marker, depends how the app will work later on.
How will your next page look like?
One simple way could be something like this:
I use addListenerOnce to call the placeMarker function only one time and during this i write the latitude and longitude in a form field.
now you can add action parameters plus a submit button and you can access the values on your next page.
Thats the fiddle + code:
http://jsfiddle.net/iambnz/LcKy2/
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882,131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListenerOnce(map, 'click', function(e) {
placeMarker(e.latLng, map);
// alert(e.latLng.toString());
document.getElementById("latitude").value = e.latLng.lat();
document.getElementById("longitude").value = e.latLng.lng();
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
google.maps.event.addDomListener(window, 'load', initialize);
I am using geoxml3 to parse a kml file of points. On click of the marker an info window opens with some description. The problem is that the information is being displayed misplaced and also two links are added in the info window which I want to remove.
Any ideas how I can remove the links and also put the information placed correctly?
This is a screen shot of the info window:
The following is the code I am using:
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
center: new google.maps.LatLng(35.898737028438, 14.5133403246687),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
elevator = new google.maps.ElevationService();
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
google.maps.event.addListener(map, 'click', getElevation);
}
function displayKml() {
initialize();
parser = new geoXML3.parser({
map: map,
processStyles: true,
createMarker: addMyMarker,
createOverlay: addMyOverlay
});
parser.parse("Uploads/" + document.getElementById('<%= text2.ClientID %>').value);
}
function addMyMarker(placemark) {
parser.createMarker(placemark);
}
function addMyOverlay(groundOverlay) {
parser.createOverlay(groundOverlay);
}
The kml file structure is as follows:
<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>route</name>
<Placemark>
<name>210</name>
<description>St james cavalier,Exhibitions centre</description>
<Point>
<coordinates>14.5107742,35.8955498</coordinates>
</Point>
</Placemark>
</Document>
</kml>
Your sample KML works fine with my test pages:
polys branch:
http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmltest_linktoB.html?filename=http://www.geocodezip.com/geoxml3_test/SO_IT_info_kmlPt.xml
kmz branch:
http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmztest_linktoB.html?filename=http://www.geocodezip.com/geoxml3_test/SO_IT_info_kmlPt.xml
Must be your css (which you haven't provided) or something else in your environment.
Here is my google maps api project:
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var rio = new google.maps.LatLng(-22.894125,-43.199358);
var map;
function initialize() {
var myOptions = {
zoom: 10,
center: rio,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(marker, 'click', toggleBounce);
}
function addMarkerAtCenter() {
var marker = new google.maps.Marker({
position: map.getCenter(),
draggable:true,
animation: google.maps.Animation.DROP,
map: map
});
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
</script>
</head>
<body onload="initialize()" style="margin:0px; padding:0px;">
<center><input type="button" value="Adicionar Marcador" onclick="addMarkerAtCenter()"/></center>
<center><div id="map_canvas" style="width:100%; height:100%"></div></center>
</body>
how can I, after adding multiple markers, get them and save into xml ?
thanks
I am pretty sure that it doesn't work that way. Markers know what map they belong to, but not the other way around. The way you would normally do this would be to have an Array, and each time you add a marker to your map you also add it to your array. Whenever you want to manipulate your markers you then run through that array and do the stuff that needs doing :)
What you are probably after (if you outputing stuff to XML) is just the coordinates of each marker added rather than the whole google marker object below is an example of how to get the coordinates and serialize them (badly) to XML.
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var rio = new google.maps.LatLng(-22.894125,-43.199358);
var map;
//you probably just want to store coordinates of markers
var coords = []
function initialize() {
var myOptions = {
zoom: 10,
center: rio,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// google.maps.event.addListener(marker, 'click', toggleBounce);
}
function addMarkerAtCenter() {
var marker = new google.maps.Marker({
position: map.getCenter(),
draggable:true,
animation: google.maps.Animation.DROP,
map: map
});
//get the coordinates of the marker
pos = marker.getPosition();
//save the coordinates
coords.push({lat:pos.lat(), lng:pos.lng()})
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
//a primitive serialize function - add something more sophisticated
function serialize(arr) {
xml = "<markers>";
for (i=0;i<arr.length;i++) {
xml += "<marker>";
for(var prop in arr[i]) {
if(arr[i].hasOwnProperty(prop))
xml += "<" + prop +">" + arr[i][prop] + "</" + prop +">";
}
xml += "</marker>";
}
xml +="</markers>";
//do something with the result
alert(xml);
}
</script>
</head>
<body onload="initialize()" style="margin:0px; padding:0px;">
<center><input type="button" value="Adicionar Marcador" onclick="addMarkerAtCenter()"/> <input type=button onClick="javascript:serialize(coords)" value="To XML"></center>
<center><div id="map_canvas" style="width:100%; height:100%"></div></center>
</body>