I'm trying to use https://github.com/mapsplugin/cordova-plugin-googlemaps in framework7 project
but I'm facing a problem
as i navigate to the map page The image is loaded but wasn't displayed
I think the issue is z-index
I tried that solution
https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/2028
but doesn't work
this is the page before map page
the red div is the place where image should display
after functions run i see that instead of map
I use this code to navigate to the map page
success: function (response) {
var responseObj = JSON.parse(response)
console.log(responseObj);
this.$root.navigate("/theMapPage/")
}
I found the solution
as I posted in comment that the plugin make the map behind the application
so I hide all pages and show the current page only
map.one(plugin.google.maps.event.MAP_READY, function () {
$$('.page').hide()
$$('.page.page-current').show()
map.clear();
map.getMyLocation(onSuccess, onError);
});
at end just show all pages again
pageAfterOut: function () {
// page has left the view
$$('.page').show()
}
Related
I am trying to create a function in the Angular system which will produce an image of the map using html2canvas
The following is the current function:
window.emapComponent.service.getMap('mapApi').then((map) => {
html2canvas(document.getElementById("mapApi"), { useCORS: true }).then(function (canvas) {
canvas.screenshotDataURI = canvas.toDataURL("image/jpg", 0.5);
canvas.toBlob(function (blob) {
saveAs(blob, oRequest.fileName)
});
});
})
What happens is that in the system itself, as soon as I drag the map with the mouse, the photo comes out weird (file attached)-
I noticed in the elements of html that although I see the objects of the layers adjusted to the map, in practice the div itself is dragged from place to place and this is what I get in the picture
I would be happy to help with this
I made a site with Bootstrap which contains two pages:
index.html
impressum.html
I want to use page jumps inside index.html and access those page jumps from the impressum aswell. This works fine but as soon as I click on a page jump from the impressum.html it stays in the URL and won't go away.
You could use a little of JavaScript like this:
function clearHash(){
var uri = window.location.toString();
if (uri.indexOf("#") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("#"));
window.history.replaceState({}, document.title, clean_uri);
}
}
And then trigger the Function on the scroll event:
$(window).scroll(function(){
clearHash();
});
(I'm assuming that you are using JQuery because of the Bootstrap)
Running ionic tabs. My maps works fine until I click to another tab and then click back to the map. When returning to the map tab, most of the map is greyed out with a little bit of the map still appearing in the upper left corner. If I grab the visible section of the map and drag into the center view I see the visible maps is about 2/3rd of the screen - but the moment I let go the visible part shoots back up to upper left corner - and now all the previously greyed out section is just a blank white.
In addition, if I simply rotate my device from portrait to landscape - the map completely redraws itself correctly. And then from landscape back to portrait mode and the full maps is showing again.
For the life of me though, I can't get the 'grey' out from happening.
In my apps.js:
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
globalGPS() ;
});
})
.config(function($stateProvider,$urlRouterProvider) {
'$compileProvider',
function( $compileProvider )
{
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?||tel):/);
// Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
}
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html",
controller: 'TabsCtrl'
})
// Each tab has its own nav history stack:
.state('tab.map', {
url: '/map',
views: {
'tab-map': {
templateUrl: 'templates/tab-map.html',
controller: 'MapCtrl'
}
}
})
The gps functions take place outside of the state/controllers loaded from a standard javascript file, and when all the gps that same external function sets the map as a global var:
setMap = new google.maps.Map(document.getElementById("mapBody"), myOptions);
In my controller is defined:
.controller('MapCtrl', function($scope,$rootScope,constants) {
// runs this code on EVERY return to map tab
$scope.$on('$ionicView.beforeEnter', function(){
if (setMap) {
google.maps.event.addListener(setMap, "idle", function(){
google.maps.event.trigger(setMap, "resize");
}) ;
// $scope.refreshMap() ; // see note below
}
});
$scope.refreshMap = function() {
setTimeout(function () {
$scope.refreshMap_();
}, 1);
};
$scope.refreshMap_ = function() {
var div = document.getElementById("mapBody");
reattachMap(setMap,div);
};
reattachMap() is an external function:
function reattachMap(map,div) {
if (!isDom(div)) {
return map;
} else {
map.set("div", div);
while(div.parentNode) {
div.style.backgroundColor = 'rgba(0,0,0,0)';
div = div.parentNode;
}
return map;
}
}
In place of the google.maps.event.trigger(setMap, "resize"), I tried using reattaching the map div thinking it had been removed from the DOM. Neither method works or even indicates I am onto the correct fix. In my div's that hold the maps I even hard set width/heigh css values as I had read that fixed some ppl's issues (whereas width/height percentages was causing the problem):
<div id="mapWrapper" style="position:absolute;width:100%;height:100%">
<div id="mapBody" data-tap-disabled="false"></div>
</div>
</div>
and
#mapBody {
border:2px solid #4e8cf9;
text-align:center;
height:700px;
width:400px;*/
flex: 1;
}
Well, I solved the issue. Turns out when moving away from the map tab to another tab, those other tabs are loading ads by AdMob. AdMob ads are not a part of the main DOM, they are a sub-view and thus they are persistent. If you navigate to another tab, the ad stays in the same place on the new tab. When navigating back to the map tab, the ad follows and somehow interferes with google maps ability to properly display itself.
In my app, the first default view is the map tab which doesn't show ads, so no map issues until user returns to the map tab (...and the persistent AdMob ad followed)
Sooo...i now used the above function to remove the ad from the map view completely.
.controller('MapCtrl', function($scope,$rootScope,constants) {
$scope.$on('$ionicView.beforeEnter', function(){
// this function will run EVERY time user goes back to this tab
if (setMap) { // only attempt to remove ad if 'map' is defined
removeAd() ; // global external function
});
I'm using following CA map :
assets/jquery-jvectormap-ca-lcc-en.js
I didn't do any modification in any file.
What i want just link all provinces to their html pages whenever someone is click on any of it.
Here is the live demo page where I'm using :http://mindsharehost.com/maps/tests/reverse-projection.html
If I understand your question correctly, you are almost done. All you need to is to redirect to the url using
location.href.
$(function () {
$('#map').vectorMap({
map: 'ca_lcc_en',
markers: markers,
onMarkerClick: function (e, index) {
location.href = markers[index].weburl;
}
});
});
using the below code, I have inserted the data in the listview
var renderItemElement = function(item) {
return $.tmpl("<li><a>${text}</a></li>", item)
.data("item", item)
.insertAfter(listHeaders[item.priority]);
};
and when click it, i can remove the data, but when i click it, i want the data to be passed to the next page. Can anyone help me with this code?
$("#bankList").delegate("li.item", "click", function() {
model.remove($(this).data("item"));
$(this).slideUp(function() {
$(this).remove();
});
});
if your has a href or if you want the whole thing to display as a listview at all, you need to use .listview() method. If the ul tag already existed and is a listview, use .listview('refresh')
to move to another page with javascript, not a href, you need to use
$.mobile.changePage()