We are currently using two google maps on one page, the first one is an aerial view, and this I can turn off draggable and it works fine. The other is an internal view of the building, when I use the same code on this, it doesnt disable draggable on mobile or on desktop, I can disable scrollwheel movement, but not draggable. The code I am using is below.
function initialize2() {
var fenway = new google.maps.LatLng(0, 0);
var mapOptions = {
center: fenway,
scrollwheel: false,
zoom: 8,
draggable: false
};
var panoramaOptions = {
position: fenway,
scrollwheel: false,
draggable: false,
<?php echo(isMobile()) ? 'draggable: false,' : ''; ?>
pov: {
heading: 180,
pitch: 0
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('map-canvas2'),panoramaOptions);
map.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
You just need to add: draggable: false like this
// Function to initialize the map within the map div
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 27.963989, lng: -82.799957},
zoom: 14,
draggable: false
});
}
Related
By default there are the two buttons plan and satellite at the top left corner of the map :
Here is code :
<script>
map = null;
poly = null;
function initMap() {
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: -18.92379, lng: 47.542537},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
);
directionsDisplay.setMap(map);
poly = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
});
poly.setMap(map);
document.getElementById('organisation').addEventListener('change', function() {
getFlotteByOrganisation(document.getElementById('organisation').value);
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCSJrLcMUVltUHcVjtC8ZotBshfiue8J68&callback=initMap"></script>
How to remove these two buttons ?
One option is to disable the default user interface:
disableDefaultUI: true
Add back in the street view control and the zoom control (if you want them):
streetViewControl: true, // add back streetView control
zoomControl: true, // add back the zoom control
code snippet:
html,
body,
#map {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
<div id="map"></div>
<script>
map = null;
poly = null;
function initMap() {
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {
lat: -18.92379,
lng: 47.542537
},
disableDefaultUI: true, // disable the default controls
streetViewControl: true, // add back streetView control
zoomControl: true, // add back the zoom control
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
poly = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
});
poly.setMap(map);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCSJrLcMUVltUHcVjtC8ZotBshfiue8J68&callback=initMap"></script>
in this code map and marker are working well, but marker position is not integrated with real time Geolocation and after marker appears if device replace hundred of meters it is not show moving.
initializeMap() {
var minZoomLevel=16
Geolocation.getCurrentPosition().then((position) => {
this.map = new google.maps.Map(document.getElementById('map_canvas'),
{
zoom: minZoomLevel,
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
mapTypeControl: false,
streetViewControl: false,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(this.map);
this.Marker();
});
}
Marker(){
let image = 'assets/img/Untitled-1.png';
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: this.map.getCenter(),
// draggable: true,
icon: image
});
I am trying to implement this example on my webforms page, slightly different. I have a map and when I change its mode to streetview, I want to show a small map on its bottom left corner that follows the streetview. The image I think is clear of what I try to achieve.
When the map is initialised I do the following
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 10,
tilt: 30,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
var smallmapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 15
};
smallmap = new google.maps.Map(document.getElementById("smallmap"), smallmapOptions);
and when the pegman is dropped I set the streetview to the little map as following
google.maps.event.addListener(map.getStreetView(), 'visible_changed', function () {
if (this.getVisible()) {
$("#smallmap").show();
var streetViewPanorama = new google.maps.StreetViewPanorama(document.getElementById("map"), {
position: new google.maps.LatLng(latitude, longitude),
pov: {
heading: 34,
pitch: 10
}
});
smallmap.setStreetView(streetViewPanorama);
} else {
$("#smallmap").hide();
}
});
however I do not get the desired result as you see in this pic. My setup or way of doing this must be wrong.
edit: I also tried the following, but no difference
var streetViewPanorama = new google.maps.StreetViewPanorama(document.getElementById("map"), {
position: new google.maps.LatLng(this.position.lat(), this.position.lng()),
pov: {
heading: 34,
pitch: 10
}
});
by the way, I do not understand this pov property of the above, maybe this is causing the issue?
I changed the smallmapOptions code to the following and moved it inside the visible_changed event and now I see the small map clearly with the pegman walking according to the map's streetview
var smallmapOptions = {
center: new google.maps.LatLng(this.position.lat(), this.position.lng()),
zoom: 15
};
smallmap = new google.maps.Map(document.getElementById("smallmap"), smallmapOptions);
Here is my code
panoramaOptions = {
enableCloseButton : true,
visible : false
};
myPano = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
var mapOptions = {
center: currentCenter,
zoom: defaultZoom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
overviewMapControl: true,
streetViewControl: false,
streetView : myPano
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.setStreetView(myPano);
google.maps.event.addListener(map,"click", function(e) {
map.setCenter(e.latLng);
myPano.setPosition(e.latLng);
if (marker != null) {
marker.setMap(null);
}
marker = new google.maps.Marker({
icon: new google.maps.MarkerImage("http:///maps.gstatic.com/mapfiles/cb/man_arrow-0.png"),
map: map,
draggable: true,
position: e.latLng
});
marker.setMap(map);
myPano.setVisible(true);
});
Now the problem is that sometimes the streetview doesn't come. How to solve this?
I have two Google Maps setups on a site that I'm developing, and I want to apply custom markers to both of them. This is what I have written -
var coordinates_1 = new google.maps.LatLng(x, x);
var coordinates_2 = new google.maps.LatLng(x, x);
var map_1_options = {
zoom: 14,
center: coordinates_1,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map_2_options = {
zoom: 14,
center: coordinates_2,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var marker_1 = new google.maps.Marker({
position: coordinates_1,
map: map_1,
icon: '/images/marker.png'
});
var marker_2 = new google.maps.Marker({
position: coordinates_2,
map: map_2,
icon: '/images/marker.png'
});
var map_1 = new google.maps.Map(document.getElementById('location_1'), map_1_options);
var map_2 = new google.maps.Map(document.getElementById('location_2'), map_2_options);
I guess the script can be optimised but that's not the important issue here. What happens is I don't get any error messages (or missing images), and I get both maps displayed at their right location but no markers are showing. The images are 32x32px if that matters.
Any help would be appreciated.
You must first create map_1 and map_2 before you use them as map-property for the markers.