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
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 working on an ionic app in which i need to show google map to display location. I need to disable the satellite and street view options in the map, but didnt get any suitable method.
Also the map is creating issues, sometimes it shows on the screen and sometime it didnt.
This is the code i am trying in controller
$scope.addLoc = function(){
$cordovaGeolocation.getCurrentPosition(options).then(function(position){
$scope.lat = position.coords.latitude;
$scope.long = position.coords.longitude;
var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng="+$scope.lat+","+$scope.long+"&sensor=true";
$http.get(url)
.then(function(res) {
$rootScope.address = res.data.results[0].formatted_address;
console.log($rootScope.address);
}, function(error) {
console.log( error);
});
console.log(position);
var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
center: latLng,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
$scope.marker = new google.maps.Marker({
position: new google.maps.LatLng($scope.lat, $scope.long),
map: $scope.map,
title: 'Drag me!'
}, function(err) {
console.err(err);
});
}, function(error){
console.log("Could not get location");
});
}
You can try this
var mapOptions = {
center: latLng,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
disableDefaultUI: true
};
Doc: https://developers.google.com/maps/documentation/javascript/controls#DefaultUI
When you enable the map and passes the options to it, you have the chance to specify a mapTypeControlOptions. These have an Array that specifies what kind of maptype's you will allow the user to be able to see. It can be seen here http://code.google.com/apis/maps/documentation/javascript/reference.html#MapTypeControlOptions.
If you don't want the user to have any options as to the maptypes, you can also specify that by setting the maps mapTypeControl to false.
var myOptions = {
zoom: 2,
center: **Your LatLng object**,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID]
}, // here´s the array of controls
disableDefaultUI: true, // a way to quickly hide all controls
mapTypeControl: true,
scaleControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // displays in <article id="map_canvas"></article>
//map.mapTypeControl = false; // OPTIONAL: hides the map control
You can hide them via css
But this not a proper way..This may not work in the future..
.gm-style-mtc {
display: none;
}
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);
});
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!'
});
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