I have a tough problem to fix, spent some hours and still stucked so I need your help now.
I'm developing an application for exchange students using cordova and Ripple emulator. I simply want to display a map with Google Maps API.
But I have always a grey background event if the styles buttons and google footer are loaded and displayed as shown below :
Image of my Grey problem
When I first load my page I have really quickly an image of australia (and then uluru which correspond to the code following) but then the google frame is loaded and grey screen take place again.
To prevent to get this solution, yes I allow every links in my Content Security Policy.
Image of my Content Security Policy
Here is the code of my html page for the map (i use angularJS) :
<section class="panel" ng-controller="MapController">
</head>
<body>
<div class="panelFilters"></div>
<div id="map">
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCirwIL6S55w7cmDLhxo3exIsjn9DwPVtc&callback=initMap">
</script>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
map.refresh();
}
</script>
</body>
</section>
And then here the code of my MapController that I call in my html page :
function MapController($scope){
var isOpen = false;
var map = document.getElementById('map');
$(".header").click(function(){
if(!isOpen){
$('.header').empty().append("Search filters");
isOpen = true;
}else{
$('.header').empty().append("||");
isOpen = false;
}
$(".panelFilters").slideToggle();
})
$(window).resize(function() {
google.maps.event.trigger(map, 'resize');
console.log("resized");
});
google.maps.event.trigger(map, 'resize');
}
I absolutely don't know if the problem is related to my code, to ripple or to cordova. Every tip and help is welcome.
Thanks.
Related
I want to catch the click event that happens when you click on a marker on a google map, and then execute some code. I've tried this, but it doesn't seem to be working.
$scope.$watch('click', function(newVal, oldVal) {
alert("Marker was clicked");
});
Any ideas?
Google maps displays the map in an iframe, and you can't capture clicks like that with an iframe. I use NgMap for map displays in my angularJS app, and the HTML structure ends up looking like this:
<ng-map class='map' style="">
<marker id='{{locale.id}}' position="{{locale.position}}" ng-repeat="locale in locales" on-click="showInfoW(locale)"></marker>
<info-window id="foo-iw">
<!-- info window HTML stuff here -->
</info-window>
</ng-map>
See that on-click in there? That is where you can get the click and do something in your code.
My JS looks something like this:
$scope.showInfoW = function(e, locale) {
$scope.vm.locale = locale
$scope.map.showInfoWindow('foo-iw', locale.id);
}
NgMap.getMap().then(function(map) {
vm.map = map
var latlng, bounds = new google.maps.LatLngBounds();
for (var i in $scope.locales) { // your marker list here
latlng = new google.maps.LatLng($scope.locales[i].position[0], $scope.locales[i].position[1]);
bounds.extend(latlng) // your marker position, must be a LatLng instance
}
$timeout(function() {
google.maps.event.trigger(map, 'resize');
$scope.map.fitBounds(bounds);
$scope.map.setZoom(14)
}, 500)
})
Without trying to explain everything, you can see that (using the wonderful NgMap package) you can capture the click on the marker.
How to customize leaflet maps to disable one-finger scroll on mobile devices and add two finger scroll like google maps (see https://developers.google.com/maps/documentation/javascript/interaction)
I think something like a listener on finger down and finger up and a custom overlay or sth. like that should help. But how to correctly integrate this as a plugin in leaflet?
<html>
<head>
<link href="https://unpkg.com/leaflet#1.0.2/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet#1.0.2/dist/leaflet.js"></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid', {center: [48,9], zoom:8, layers: [L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')]});
</script>
</body>
</html>
Simply set the dragging option of your map to false, but be sure to keep the touchZoom option as true. This will disable one-finger dragging, while allowing the user to perform pinch-zoom with two fingers, which also pan the map around.
If you want this behaviour only in mobile devices, use L.Browser.mobile to set the value of the dragging option, as in
var map = L.map('map', { dragging: !L.Browser.mobile });
Here is a working solution founded here. All credits to #BlueManCZ comment
L.map('map', {
dragging: !L.Browser.mobile,
tap: !L.Browser.mobile
})
As mention in comment by Corrodian, you can find GestureHandling plugins on Leaflet.
It was created by elMarquis in can be found here https://elmarquis.github.io/Leaflet.GestureHandling/examples/
I've done with this plugins by including css and js after leaflet:
<link rel="stylesheet" href="css/leaflet-gesture-handling.min.css" type="text/css">
<script src="js/leaflet-gesture-handling.min.js"></script>
And add gestureHandling option in map like this:
var map = L.map("map", {
center: [-25.2702, 134.2798],
zoom: 3,
gestureHandling: true
});
It works!
var map = L.map('map', {dragging: false});
map.setView([lat, lng], zoom);
-or together-
var map = L.map('map',{dragging: false}).setView([lat, lng], zoom);
Have been trying to get a button to work on in a small app that I have been building using the Ionic Framework.
The button has a pretty simple job right now, on click show directions on the map. When the function is called within the controller it shows on the map but when I try to call it from the click, I am not able to get the directions showing.
Wondering what the issue could be here.
var directionsDisplay = new google.maps.DirectionsRenderer({
map: $scope.map
});
$scope.show_dirs = function(){
var request = {
destination: locations[3],
origin: temp_center,
travelMode: google.maps.TravelMode.DRIVING
};
var directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
// Display the route on the map.
directionsDisplay.setDirections(response);
}
});
};
//show function works
//$scope.show_dirs();
The HTML button:
<div style= "position: absolute; bottom: -10px; width: 100%" ng-controller="MapCtrl">
<button class="button button-block button-balanced" ng-click = "show_dirs">Find Parking Near Me</button>
</div>
Your ng-click attribute is incorrect. It should be an Angular expression to evaluate and execute when the button is clicked.
What you have, show_dirs, will evaluate to the function itself. What you want instead is to actually call that function.
So it should be ng-click="show_dirs()".
I'm new to Angular (so probably am making some silly mistakes) and I'm trying to add some markers to a map instance with a custom image icon.
I understand that the best way to do this is to add this into the items as suggested by Fedaykin but is there a way to do this if you can't change the JSON file?
I was able to add the custom icon for a single marker, so I wondered if I could do the same for several markers using 'forEach', but although this shows all my markers it doesn't add the icon.
$scope.marker = Mapdata.query(function() {
var image = "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png";
$scope.$watch('data', function(data) {
angular.forEach($scope.marker, function(markerList, id, coords, icon) {
$scope.markerList = [{
id: data.id,
coords: {
latitude: data.latitude,
longitude: data.longitude
},
icon: image
}];
});
});
});
The html is just the usual angular-google-maps stuff
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true">
<ui-gmap-markers models="marker.boards" coords="'self'" fit="'true'" icon="markerList.icon" click="'onClick'"></ui-gmap-markers>
</ui-gmap-google-map>
I have a plunker here to put it all in context.
Thanks for any help or advice :)
Made a few changes:
index.html
icon="markerList.icon" --> icon="'icon'"
script.js
I didn't quite understand what you were trying to to with the $watch - I ended up just setting the image attribute of each marker when the data is initially fetched.
Mapdata.query(function() { --> Mapdata.query(function(data) {
$scope.$watch thing -->
angular.forEach(data.boards, function(board) {
board.icon = image;
});
Here's the updated plunker.
I'm using angularjs UI-map, I loop the data from firebase.
So far so good, but when I click on the markers and it always display the last query data.
here is snipper code
In html
<!-- Setup Marker -->
<div ng-repeat="marker in markers"
ui-map-marker="markers[$index]"
ui-event="{'map-click': 'showMarkerInfo(marker)'}">
</div>
<!-- Setup Marker Info Window -->
<div ui-map-info-window="infoWindow">
<div>Marker - <input ng-model="full_name"></div>
<div>Message</div>
</div>
In JS
firebaseAuth.firebaseRef.child('/human/').on('child_added', function(snapshot) {
$scope.users = snapshot.val();
$scope.latLng = new google.maps.LatLng($scope.users.lat, $scope.users.lng);
$scope.markers.push(new google.maps.Marker({
map: $scope.map,
position: $scope.latLng
}));
});
$scope.showMarkerInfo = function(marker) {
$scope.currentMarkerLat = $scope.users.full_name;
$scope.infoWindow.open($scope.map, marker);
console.log(marker);
};
I haven't tried angular-ui, but this problem looks the same as the "Javascript infamous Loop problem", so you might want to try:
ui-event="{'map-click': 'showMarkerInfo(markers[$index])'}"
However, I guess it will suffer the same problem, but it's worth a try.