I am trying to display an overlay image within street view.
I used the code available on google documentation regarding Custom Overlays:
https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays
It says that if I want to show my overlay within Street View I have to pass a panorama instead of a map, this is what I do:
panorama = map.getStreetView();
panorama.setPosition(astorPlace);
panorama.setPov({
heading: 120,
zoom:1,
pitch:0}
);
var swBound = new google.maps.LatLng(40.725882, -74.000986);
var neBound = new google.maps.LatLng(40.734886, -73.980990);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
var srcImage = 'overlay.jpeg';
overlay = new USGSOverlay(bounds, srcImage, panorama);
Nothing shows up (if I pass "map" instead of "panorama" to USGOverlay everything's fine).
What am I doing wrong?
Thanks
Related
I use nativescript vue and display the google map.
I can show the image on the map in the marker, but I cannot show the image of the circle on the map.
How can i do this?
I use ns sidekick in windows 10 and i create apps to android and ios.
I show the image like this:
var mapView = args.object;
var marker = new GoogleMaps.Marker();
marker.position = GoogleMaps.Position.positionFromLatLng(36.799441, 10.178554);
marker.title = "Tunis";
marker.snippet = "Tunisia";
marker.userData = {index: -1};
let imgSrc = new ImageSource();
imgSrc.fromBase64("iVBORw0KGgoAAAANSU.......kJggg==")
let image = new Image();
image.imageSource = imgSrc;
marker.icon = image;
mapView.addMarker(marker);
I used this plugin to make my own custom marker nativescript-bitmap-factory. If you want a very custom element for your markers something like this can help you to achieve that
I have the following problem:
I'm working in an aplication to book hotels that has tabs ("Hotel Details", "Map", "Reviews") in the overview page. the tabs are created with angularjs.
also, in the page I have the hotel address that is a link to the "Map" tab.
When I click on the "Map" tab, the google map is rendering ok. But, when I click on the hotel address, the "Map" tab opens but the map is not centered. If I refresh the page, it appears centered.
this is the code that process the map:
$scope.loadMap = function (targetID){
var latitude = $scope.latitude;
var longitude = $scope.longitude;
if(latitude && longitude && document.getElementById(targetID) != null ){
var center = new google.maps.LatLng(latitude, longitude);
var map_options = {
zoom: 13,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create map
var map = new google.maps.Map(document.getElementById(targetID), map_options);
// configure marker
var marker_options = {
map: map,
position: center,
title: $scope.hotelName
};
// create marker
var marker = new google.maps.Marker(marker_options);
var infoWindow = new google.maps.InfoWindow();
window.setTimeout(function(){
google.maps.event.trigger(map, 'resize');
},2000);
}
}
Can you help me, please?
I've had this very problem when I was creating maps using Leaflet.js. I was trying to initialize the map inside of my angular service and it was loading very strangely. It appears you are trying to do the same thing, but you're doing it inside of your controller, rather than a service, but the effect is the same thing.
The problem is timing. Your controller is run before the DOM finishes loading and before angular has a chance to scan through the DOM to build out your Map page partial. Because of that, the page is only partially loaded when you call $scope.loadMap, which loads the google map, as you would expect. The problem is that once Angular finishes scanning the DOM partial, it modifies the DOM and then loads it into the view. When this happens, the google map has already been initialized to its default size based on the previous state of the DOM, and doesn't resize properly when angular is finished with the DOM.
Ok, that was a long explanation, but here's how you fix it:
You should do all of your map initialization inside of a directive's linking function. You could create a directive called something like app.directive('hotelMap'), which would initialize your map using the $scope.latitude and $scope.longitude variables from your controller.
link: function(scope, elem, attrs){
var center = new google.maps.LatLng(scope.latitude, scope.longitude);
var map_options = {
zoom: 13,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create map
var map = new google.maps.Map(document.getElementById(targetID), map_options);
// configure marker
var marker_options = {
map: map,
position: center,
title: $scope.hotelName
};
// create marker
var marker = new google.maps.Marker(marker_options);
var infoWindow = new google.maps.InfoWindow();
}
And then in your map partial, you would have an element that looks something like <div hotel-map></div>. This fixes your problem, because your map will never be initialized until Angular has finished scanning/modifying the DOM and has finished rendering your partial. That way, the map's containing element will be at its final size/position and the map will be loaded into the element's center properly. Give it a try and let me know if that works.
I'm implementing an application in which I have to show google map with circle at the center of the map. I'm able draw a circle on map but after few seconds I've to update the circle's radius. I want to use same instance of map rather than creating new one.
When i create the new circle its overlapping on older circle. I want to remove previously added circle and show new one.
While checking the api I got this method from Circle class which will hide the circle.
myCity.setOptions({visible:false});
but the problem is I don't have access to older circle instance.
Is there any way which will allow me to get maps markers and infoboxes assigned to that map and remove them?
Below is method which will get called interval of few seconds
function mapByCoordinates()
{
var lat=document.getElementById("latValue").value;
var lng=document.getElementById("lngValue").value;
var accuracy = document.getElementById("zoomValue").value;
var zoomVal=getZoomBasedOnAccuracy(accuracy);
var zm = parseInt(zoomVal);
var tempRadius = getRadiusBasedOnAccuracy(accuracy);
var amstr = new google.maps.LatLng(lat,lng);
var mapProp = {
center:amstr,
zoom:zm,
mapTypeId:google.maps.MapTypeId.HYBRID
};
map.setOptions(mapProp);
myCity.setOptions({visible:false});
infobox.close();
myCity = new google.maps.Circle({
center:amstr,
radius:tempRadius
});
marker=new google.maps.Marker({
position:amstr,
});
myCity.setMap(map);
myCity1.setMap(map1);
infobox = new google.maps.InfoWindow({
content:"Welcome to google map",
disableAutoPan:true
});
infobox.open(map,marker);
map.panTo(amstr);
map.setZoom(19);
}
Thanks
We can make the already drawn circle invisible on google maps by using following method
circle.setOptions({visible:false});
and can null the instance of that map.
Try circle.setRadius(radiusvalue)
I want to draw marker on google maps. The marker data is from JSON.(from json file, not from database) and all data have a geometry (latitude, longitude)
An important thing is when I drag google maps, the browser will show some boundary.
And then the markers have to show on only shown maps.
After drag map again, the marker resets and show new marker in new boundary.
google.maps.event.addListener(map, 'dragend', function(event) {
var bd = map.getBounds();
var ne = bd.getNorthEast();
var sw = bd.getSouthWest();
var nw = new google.maps.LatLng(ne.lat(), sw.lng());
var se = new google.maps.LatLng(sw.lat(), ne.lng());
I can not progress any more..
Please give some example url or help..
So you've got the points for the 4 corners of some kind of boundary, and you want to put a marker in there. So you have a bunch of markers, but you only want to plot the ones that fall within the current bounds.
So something like this might work:
var latlng = new google.maps.LatLng(54.42838,-2.9623);
var marker = new google.maps.Marker({
position: latlng,
});
if (bd.contains(latlng)) {
marker.setMap(map);
}
You might want to setMap(null) for any markers that fall outwith the bounds.
I'm adding a collection of markers to a map in the v3 api. Everything works fine, but when I drag the map (enough so the markers are off the screen), zoom in, and then drag the map back to the original center, the marker images are offset by roughly the distance I dragged the map. They're still arranged in the correct shape, just moved.
A few other notes:
The marker images don't move if I drag and don't zoom in, or if I drag and zoom out.
If I just zoom in on the map until the markers are off the screen, the same thing happens
Polylines do not move (i.e., they retain their correct position no matter what)
In Firefox, marker images move (or rather, stay in their same pixel position and don't move with the coordinates point on the map) whenever i zoom in on a point other than map center
Here's the code I'm using the add markers:
var bounds = new google.maps.LatLngBounds;
for (i=0, len=points.length; i<len; i++) {
var myPoint = points[i];
var myLatLng = new google.maps.LatLng(myPoint.lat, myPoint.lng);
var markerImage = new google.maps.MarkerImage(
'http://www.mysite.com/images/marker.png',
new google.maps.Size(21,21), // size
new google.maps.Point(0,0), // origin
new google.maps.Point(10,10), // anchor
new google.maps.Size(21,21) // scale
);
var markerOptions = {};
markerOptions.map = this.map;
markerOptions.position = myLatLng;
markerOptions.icon = markerImage;
markerOptions.draggable = true;
this.markers[i] = new google.maps.Marker(markerOptions);
bounds.extend(myLatLng);
}
It's like the pane for the markers is disconnected from the pane for the map and polylines. Is there something I can do differently when adding the markers so the images retain their correct display position? This wasn't a problem in V2.
I'm fired.
Just after the block of code in the example, I had
if (init) {
//a bunch of stuff, PLUS
this.map.fitBounds(bounds);
} else {
//a bunch of other stuff, BUT NO fitBounds
}
so, adding
this.map.fitBounds(bounds);
in both logic paths fixed the problem