I need to draw line between my current position and destination, i have both coordinate in my hand, how can i do that in ionic?
$scope.init = function() {
var mysrclat=completedtasks['locationLatitude'];
var mysrclong=completedtasks['locationLongitude'];
var myLatlng = new google.maps.LatLng(mysrclat,mysrclong);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: '(Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
$scope.map = map;
};
Currently i ma using this to display the current destination position,i need to draw a line between current position and destination position
Related
i'm trying to use google map directive in my angularjs project heres the directive:
.directive("myMaps", function(){
return{
restrict:'E', //Element Type
template:'<div></div>', //Defining myApp div
replace:true, //Allowing replacing
link: function($scope, element, attributes){
$scope.title = attributes.title;
$scope.type = attributes.type;
alert('fdfd');
alert($scope.title +'ddddddd'+$scope.type);
//Initializing Coordinates
var myLatLng = new google.maps.LatLng($scope.title,$scope.type);
var mapOptions = {
center: myLatLng, //Center of our map based on LatLong Coordinates
zoom: 5, //How much we want to initialize our zoom in the map
//Map type, you can check them in APIs documentation
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Attaching our features & options to the map
var map = new google.maps.Map(document.getElementById(attributes.id),
mapOptions);
//Putting a marker on the center
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title:"My town"
});
marker.setMap(map); //Setting the marker up
}
};
})
it works good, but how i can call it inside a function to take new longitude and altitude??
I am trying to get coordinates while tap or hold events in ionic from the Google Maps.
While holding I am getting values in browser console not getting in device.
How to clear this issue?. I need to get values while holding/taping in mobile apps using ionic framework [google maps].
Any help would be appreciated.Thanks in advance.
.controller('HomeCtrl', function ($scope, $rootScope, $cordovaGeolocation, $ionicLoading, $ionicGesture) {
$ionicLoading.show({
template: '<ion-spinner icon="bubbles"></ion-spinner><br/>Acquiring location!'
});
var posOptions = {
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 0
};
$cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
$rootScope.currentlat = lat;
$rootScope.currentlong = long;
var myLatlng = new google.maps.LatLng(lat, long);
$rootScope.myLatlng = myLatlng;
var mapOptions = {
center: myLatlng,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
$scope.map = map;
marker = new google.maps.Marker({
position: myLatlng,
map: $scope.map
});
var element = angular.element(document.querySelector('#map'));
$ionicGesture.on('hold', function(e){
$scope.$apply(function() {
alert('hold happens');
google.maps.event.clearListeners(map, 'click');
google.maps.event.addListener(map, 'click', function(event) {
alert(event.latLng);
});
});
}, element);
google.maps.event.addListener(marker, "click", function (event) {
});
$ionicLoading.hide();
}, function (err) {
$ionicLoading.hide();
console.log(err);
});
}
I think your problem is that your using
$ionicGesture.on('hold')
Iconic uses Cordova and Cordova google maps has its own event handler as the "map" is in native view not JavaScript related. You can read up in more detail here.
So once your device is ready
var map = new google.maps.Map(document.getElementById("map"), mapOptions),
longClick = plugin.google.maps.event.MAP_LONG_CLICK;
map.on(longClick, function (latLng) {
var selectedLatLocation = latLng.lat.toString();
var selectedLongLocation = latLng.lng.toString();
alert(selectedLatLocation, selectedLongLocation);
});
.controller('homeCtrl', function($scope, Markers) {
var username = window.localStorage.getItem('username');
var id_user = window.localStorage.getItem('id_user');
console.log(username);
console.log(id_user);
document.getElementById('usernameArea').innerHTML = username;
var map = null;
google.maps.event.addDomListener(window, 'load', function() {
var myLatlng = new google.maps.LatLng(-7.977467753377946, 112.63355255126953);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
navigator.geolocation.getCurrentPosition(function(pos) {
map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
//var tes = new google.maps.Latlang();
//var tes = map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
var tes = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
console.log(tes.lat(), tes.lng());
//console.log(tes.lng());
window.localStorage.setItem('lat',tes.lat());
window.localStorage.setItem('lng',tes.lng());
var myLocation = new google.maps.Marker({
position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
map: map,
title: "My Location"
});
loadMarkers();
});
$scope.map = map;
});
function loadMarkers(){
//Get all of the markers from our Markers factory
Markers.getMarkers().then(function(markers){
console.log("Markers: ", markers);
var records = markers.data.markers;
console.log(records.length);
for (var i = 0; i < records.length; i++) {
var record = records[i];
var markerPos = new google.maps.LatLng(record.latitude, record.longitude);
console.log(record.latitude);
// Add the markerto the map
var marker = new google.maps.Marker({
setMap: map,
animation: google.maps.Animation.DROP,
position: markerPos
});
var infoWindowContent = "<h4>" + record.name + "</h4>";
addInfoWindow(marker, infoWindowContent, record);
}
});
}
function addInfoWindow(marker, message, record) {
var infoWindow = new google.maps.InfoWindow({
content: message
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open(map, marker);
});
}
})
this is the result, the marker which get latitude and longitude from database doesn't show up
Okay I have seen the mistake, when you create the marker in your loadMarkers() function you have this:
var marker = new google.maps.Marker({
setMap: map,
animation: google.maps.Animation.DROP,
position: markerPos
});
You are using as key setMap and it's map, so the code should be:
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: markerPos
});
Hi guys i'm working with this code below , but i don't know is is possible
and how i can do to add more one marker and set other DIV to show this position.
Anyone know what can i do or give me a tip
Its a cordova application on visual studio
angular.module('app', ['onsen']).
directive('myMap', function () {
// directive link function
var link = function (scope, element, attrs) {
var map, infoWindow;
var markers = [];
// map config
var mapOptions = {
center: new google.maps.LatLng(-29.3130754, -50.8542323),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
// init the map
function initMap() {
if (map === void 0) {
map = new google.maps.Map(element[0], mapOptions);
}
}
// place a marker
function setMarker(map, position, title, content) {
var marker;
var markerOptions = {
position: position,
map: map,
title: title,
icon: 'images/Maps/blue-dot.png'
};
marker = new google.maps.Marker(markerOptions);
markers.push(marker); // add marker to array
google.maps.event.addListener(marker, 'click', function () {
// close window if not undefined
if (infoWindow !== void 0) {
infoWindow.close();
}
// create new window
var infoWindowOptions = {
content: content
};
infoWindow = new google.maps.InfoWindow(infoWindowOptions);
infoWindow.open(map, marker);
});
}
// show the map and place some markers
initMap();
setMarker(map, new google.maps.LatLng(-29.3130754, -50.8542323), 'adress');
};
return {
restrict: 'A',
template: '<div id="gmaps"></div>',
replace: true,
link: link
};
});
Here is a way to add multiple markers on a google maps , u just need an array which contains your required latitude longitude values .
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
var myLatLng1={lat: -25.163, lng: 131.644};
var marker2 = new google.maps.Marker({
position: myLatLng1,
map: map,
title: 'Hello World!'
});
you could also have an array which contains the array element conataining the latutude and longitude values .
for (var i = 0; i < locations.length; i++) { //Your location contains the lat long position
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
title: 'Hello World!'
});
When I add multiple kmllayers to a map it ignores the zoom level and center that I've set for the map and instead centers on the last added layer.
Can someone tell me how I'm suppose to set the zoom level and center of the map?
<script>
function initialize()
{
var location = new google.maps.LatLng(52.0,5.1);
var mapOptions = {
zoom: 15,
center: location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//Add MapLayers
var mapLayer1 = new google.maps.KmlLayer({
url: 'http://kml-samples.googlecode.com/svn/trunk/kml/Placemark/placemark.kml'
});
mapLayer1.setMap(map);
var mapLayer2 = new google.maps.KmlLayer({
url: 'http://kml-samples.googlecode.com/svn/trunk/kml/kmz/balloon/balloon-image-rel.kml'
});
mapLayer2.setMap(map);
var mapLayer3 = new google.maps.KmlLayer({
url: 'http://kml-samples.googlecode.com/svn/trunk/kml/time/time-stamp-point.kml'
});
mapLayer3.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Set preserveViewport: true for all your KmlLayers