I'm developing a mobile app in Ionic.My requirement is I had a stationary image on the map, I need the location under that image.. Below is the code I found for dragging a marker and getting a location.
var myLocation = new google.maps.Marker({
position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
map: map,
title: "My Location",
draggable:true
});
google.maps.event.addListener(loc, 'dragend', function(evt){
console.log('Current Latitude:',evt.latLng.lat(),'Current Longitude:',evt.latLng.lng());
});
But I need a stationary Image and get the location when the map is dragged some thing like in the below image. There is a rounded circle, when i drag the Map , I can see the location under the Image..
Anyone please guide me to achieve that.
Thankyou
Related
I am using OpenLayers with OSM and Geoportail. I display OSM at the bottom and Geoportail on top.
In France I have no problem but in others country Geoportail has no tiles for big zoom. In this case Geoportail return 404, openLayers keep the previous tile/image and zoom inside :/
I wish to hide the Geoportail tile when the tile doesn't exist, this way I will see the OSM tile.
Any idea how to do it ?
My code to add the both layers :
layers: [
new OlTile({
'title': 'OSM',
source: new OlOSM()
}),
new OlTile({
source : new WMTS({
url: 'https://wxs.ign.fr/pratique/geoportail/wmts',
layer: 'ORTHOIMAGERY.ORTHOPHOTOS',
matrixSet: 'PM',
format: 'image/jpeg',
projection: 'EPSG:3857',
tileGrid: new WMTSTileGrid({
origin: [-20037508, 20037508],
resolutions: resolutions,
matrixIds: matrixIds,
}),
style: 'normal'
})
})
],
Thank you
As Mike say it in his comment : using "useInterimTilesOnError: false" solve the problem.
I'm working on a mapbox app and I need to make a dynamic URL to reflect mapbox info like lat, long and zoom level.
ex: /?city=London&zoom=1&lat=30&lng=140. On page load map should be centred and zoomed accordingly. How to read/write page URL?
Just activate the hash : true in the Map initial settings
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/outdoors-v11',
center: [128, 47],
zoom: 16.5,
pitch: 60,
hash: true // just add this
});
It’s not the same param names but you’ll have the same information
Kind of an odd question/hard to find an answer. I'm relatively new to using angularjs and have a problem i'm confused about.
I've set up a google map using http://angular-ui.github.io/angular-google-maps/#!/ and have an issue.
So i have a $scope.homeBase where i am setting a lat & long for the owners 'Home Base', i want to use that location to set the on load map center, & a pin to show the location. So in my mind cool, set the one var and use it in both locations. Wrong.
So this works on load, but every time i pan the map, i guess it re-sets the map center location, which in turn binds to the map marker and sends the marker to the middle of the screen, on every pan.
Is there anyway to have the two not bound? or have separate vars? without them bound?
i thought a simple 'var homebase' would remove binding and not update the var. instead of using scope but it still binds?
This perhaps is a newb question but i appreciate any pointing in proper direction.
Thanks again
here's my code.
// uiGmapGoogleMapApi is a promise, The "then" callback function provides a maps object.
uiGmapGoogleMapApi.then(function() {
// Setting homebase coords, these will come from firebase
$scope.homeBase = { latitude: -34.18405, longitude: 150.71319 };
// Set default map.
$scope.map = {
center: $scope.homeBase,
pan: true,
zoom: 14,
events: {
click: function(){
}
}
};
// Set homebase marker.
$scope.homebaseMarker = {
id: 0,
coords: $scope.homeBase,
options: { draggable: false },
};
});
I was able to set the center on page load via
angular.copy(var)
According to the documention a marker is optional with an infoWindow, so how is this achieved please? I have tried infowindow.open(map) and infowindow.open(map,null) but both produce nothing.
If the position is set, there is no problem showing the info window
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 55.6761, lng: 12.5683},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var infowindow = new google.maps.InfoWindow({
content: "Copenhagen"
});
infowindow.setPosition({lat: 55.6761, lng: 12.5683});
infowindow.open(map);
}
infowindow.open(map) makes no sense since you need to specify the position where the infowindow should open, also it has a tapered stem which specifies the location where it should point.
According to the documentation of Infowindows- InfoWindows may be attached to either Marker objects (in which case their position is based on the marker's location) or on the map itself at a specified LatLng.
So if you donot want the marker to open the infowindow, use the map click event-
var iwindow= new google.maps.InfoWindow;
google.maps.event.addListener(map,'click',function(event)
{
iwindow.setContent(event.latLng.lat()+","+event.latLng.lng());
iwindow.open(map,this);
iwindow.open(map,this);
});
And to close a InfowWindow- infowindow.setMap(null);
Hope that cleared your doubts.
Since the api has changed, it is not possible to set position on info window any more. the solution i found is to add a marker to the map with visibility false:
this.map.addMarker({
position: {
'lat': sites[0].latitude,
'lng': sites[0].longitude
},
// setting visible false since the icon will be the poi icon
visible: false
}).then((marker: Marker) => {
this.htmInfoWindow.open(marker);
});
I have the the following Lat Long coordinates (in a JS array), how can we draw the Google Map with markers on these coordinates.
Please give a simple example, as the examples in the API documentation do not really give a conclusive answer or are too complex for me.
43.82846160000000000000, -79.53560419999997000000
43.65162010000000000000, -79.73558579999997000000
43.75846240000000000000, -79.22252100000003000000
43.71773540000000000000, -79.74897190000002000000
Thanks in advance.
You may try this
var map,
locations = [
[43.82846160000000000000, -79.53560419999997000000],
[43.65162010000000000000, -79.73558579999997000000],
[43.75846240000000000000, -79.22252100000003000000],
[43.71773540000000000000, -79.74897190000002000000]
];
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(locations[0][0], locations[0][1]),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent('Current location is: '+ locations[i][0]+', '+locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
DEMO.
I have worked with google maps and if you just need to place a few markers (make sure you are using API v3) v2 is depreciated and will fall off at some point. Next, your lat/long coords. They need to be clipped down to 9 or 10 chars. I have been unlucky when I go with super-long lat/long Coords values.
Google has a nice tool that lets you build a map with. Start here:
https://developers.google.com/maps/documentation/javascript/
Realize you will need a key on your webhosts domain. You can get your key here:
https://developers.google.com/maps/signup
A long list of demos, with 65 v3 API examples.
https://developers.google.com/maps/documentation/javascript/demogallery
In the demos i found this example which looks to be close. Reuse the code you find by viewing the source. You can see the lat/long coord pairs and how it calls it with this link.
http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/js/data.js
Here is a campus map example.
http://beta.gr-3.net/map-api/
Finally, here is the simplest example. A one marker map. Look at the source and reuse it. Hopefully it will be enough to get you started.
https://google-developers.appspot.com/maps/documentation/javascript/examples/marker-simple
I hope all this is helpful.
First, you would create google maps object, somewhere within head tag you would listen for ready event and in the handler have:
var mapOptions =
{
zoom: 10,
center: new google.maps.LatLng( <%= #drawings.first.latitude %>, <%= #drawings.first.longitude %> ),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
This assumes you have a div in your html with id map_canvas.
Than you should be ready to add markers to the page, you should have your coordinates stored in an array, so you can iterate through it and those markers.
for( var i=0; i < coords.length; i++ )
{
latlng = coords[i].latitude + ", " + coords[i].longitude;
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: '',
icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(coords.length + 65) + ".png"
});
}