I couldn't figure out how to change/hide Street View controls in scenario where there's a map by default and you drag "little guy" to road.
This is the piece of code about my options:
function initMap() {
var mapOptions = {
center: new google.maps.LatLng( <?php echo $latitude . ',' . $longitude; ?>),
zoom: 12,
disableDefaultUI: true,
backgroundColor: 'white',
streetViewControl: true
};
// I have markers & other stuff in here, it's properly closed function!
I found reference for Street View controls only when it's Street View by default, here's a code example from Google Developers:
function initPano() {
// Note: constructed panorama objects have visible: true
// set by default.
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map'), {
position: {lat: 42.345573, lng: -71.098326},
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
linksControl: false,
panControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
enableCloseButton: false
});
}
How to add Street View UI options if default view is map and you can drag Street View "guy" to map?
Have a look at this answer to see if it helps. I think you need to listen for the streetview becoming visible and then hide the controls using streetViewControl = false etc.
Detecting Google Maps streetview mode
Related
The InfoWindow is not displayed if I use it in a loop.
Here is an example of how to use it with Marker:
https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/infowindow-simple
I made similar but with Circle, code below, as you can see, console.log is working, but the Infowindow isn't.
What am I missing?
function initMap() {
// Map settings, location : Barcelona, Spain
let map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.37, lng: 2.17},
zoom: 15,
mapTypeId: 'roadmap',
zoomControl: true,
mapTypeControl: false,
scaleControl: true,
streetViewControl: false,
rotateControl: false,
fullscreenControl: true
});
// Circle distribution data : location, radius, data
let distribution = {
target_garden: {
center: {lat: 41.371400, lng: 2.171942},
population: 1,
data: `<div>Text 01</div>`
},
target_wtc: {
center: {lat: 41.373477, lng: 2.177650},
population: 2,
data: `<div>Text 02</div>`
}
};
// Display 2 red circles on map
let target;
for (target in distribution) {
let circle = new google.maps.Circle({
// colors
strokeColor: '#000',
strokeOpacity: .2,
strokeWeight: 3,
fillColor: '#f00',
fillOpacity: 0.5,
// position
map: map,
center: distribution[target].center,
radius: Math.sqrt(distribution[target].population) * 100,
// settings
draggable: false,
editable: false,
clickable: true
});
let infowindow = new google.maps.InfoWindow({
content: distribution[target].data
});
// Event : on click a circle open infowindow
circle.addListener('click', function () {
infowindow.open(map, circle);
console.log('on');
});
}
}
I expect a click on the red circle to open an InfoWindow.
The problem isn't the loop, it's that you're trying to anchor the InfoWindow to a Circle. This is from the Maps API documentation:
open([map, anchor])
Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an anchor. In the
core API, the only anchor is the Marker class. However, an anchor can
be any MVCObject that exposes a LatLng position property and
optionally a Point anchorPoint property for calculating the
pixelOffset (see InfoWindowOptions).
So, you could extend Circle somehow to make sure it has a position property, or you can set the position of InfoWindow explicitly (and not use anchor):
circle.addListener('click', function () {
infowindow.setPosition(circle.center)
infowindow.open(map);
});
I would like to define a locate control in my Leaflet Angular 2 project.
For now I have this code
ngOnInit() {
let map = L.map("map", {
center: [48.13, 11.57],
zoom: 13,
zoomControl: true,
maxZoom: 30,
minZoom: 8,
}).addLayer(this.googleStreets);
map.invalidateSize();
map.locate({setView: true, maxZoom: 16, watch: true});
L.control.scale().addTo(map);
function onLocationFound(e) {
var radius = e.accuracy/2;
L.circle(e.latlng, radius).addTo(map);
}
map.on('locationfound', onLocationFound);
}
The map searches location automatically and shows where user is.
I would like to add GPS icon thing to my map, like on the picture.
How could I implement this in Angular 2?
You can just use the location that you got from the locationFound() function and add a new marker with that latlngs.
I have requirement to display only one country in google map either i can pass the country code and country should appear on the google map if you have any solution please revert below find the code which i was trying to do same?
I have highlighted this part using a below code
I saw many solution but they did it by hiding google properties and set image for the particular country but i want to show the labels as well
map_options = {
center: new google.maps.LatLng(21.098116, 96.033701),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
navigationControl: false,
streetViewControl: false,
minZoom: 6, maxZoom: 15,
zoomControl: true,
//0.2
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options);
var world_geometry = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
where: "ISO_2DIGIT IN ('MM')"
},
styles: [
{
polygonOptions: {
// fillColor: "#87ceeb",
strokeColor: "#rrggbb",
strokeWeight: "int"
},
polylineOptions: {
strokeColor: "#rrggbb",
strokeWeight: "int" }
},
],
map: google_map,
suppressInfoWindows: true
});[![enter image description here][1]][1]
I want to show only Myanmar country in the google map but the output display other countries as well if you have solution please revert thanks in advance.
So my Google Maps API WAS working and now it's not. Looking through the documentation on Google's Maps API I don't see that anything has changed. We're using the maps embedded in a Wordpress PHP Template and everything I've checked seems to be right. Has something changed?
Here's the initial code:
<section id="main">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqnue6HpFD-HQvnk_cOKTQmqAzE6Xb9NQ"></script>
<script type="text/javascript" src="http://www.americanraceronline.com/wp-content/uploads/dev/markerwithlabel.js"></script>
<script type="application/javascript" >
var map;
var infoWindow;
function initialize() {
var myLatLng = new google.maps.LatLng(40.6,-95.665);
var myOptions = {
center: myLatLng,
scrollwheel: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: true,
draggable: true,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.Whitewater,
styles:[/lots of styles here/]};
var poly;
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker1 = new MarkerWithLabel({
position: new google.maps.LatLng(40.27488643704891, -110.740234375),
draggable: false,
raiseOnDrag: false,
map: map,
labelContent: "WEST",
labelAnchor: new google.maps.Point(22, 2),
labelClass: "mylabels", // the CSS class for the label
labelStyle: {opacity: 1.0},
icon: {}
});
The link to the page is: http://www.americanraceronline.com/distributors/
What am I missing?
In your browser console:
You have included the Google Maps API multiple times on this page. This may cause unexpected errors.main.js:60 yl
This does not need much explanation: you must be including the Google API repeated, check your includes to contain API reference only once.
Maybe file main.js, line:60 ??
For Google Maps mapOptions, zoom is required (see reference), e.g.
var myOptions = {
center: myLatLng,
scrollwheel: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: true,
draggable: true,
disableDefaultUI: true,
zoom: 9,
styles:[/lots of styles here/]
};
For example, I created a simple Fiddle of your code that did not work until zoom was provided.
Hello I am using google maps api 3 ,this is the way how I am initializing the map:
myLatlng = new google.maps.LatLng(19.1113635001101, 72.86958755554201);
var myOptions =
{
zoom: 17,
center: myLatlng,
panControl: false,
zoomControl: true,
scaleControl: false,
scrollwheel: false,
disableDoubleClickZoom: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
I also have image-map(vector/raster) of entire location which I want to overlay onto the above map(so that overlayed section would be hide google maps(default) underneath ),is there a way to do that?
Google maps JS API supports this with: https://developers.google.com/maps/documentation/javascript/reference#GroundOverlay?