I have website that has Google Map.
<div id="map"></div>
That is the div in my website where is the map.
function initMap() {
const mapContainer = document.getElementById('map');
const location = {lat: 44.116395, lng: 27.261184};
const map = new google.maps.Map(mapContainer, {
zoom: 17,
center: location
});
const marker = new google.maps.Marker({
position: location,
map
});
}
That's map code in javascript file.
When website is opened by computer, I want nothing to happen. When website is opened by mobile or tablet, I want when someone click on the map, Google Map App to be opened. How can I do this?
You could use media queries in jquery to find out whether the user is using mobile or not.
In your case I'd recommend using matchmedia queries: https://www.w3schools.com/jsref/met_win_matchmedia.asp
if (window.matchMedia("(max-width: 700px)").matches) {
/* The viewport is less than, or equal to, 700 pixels wide */
} else {
/* The viewport is greater than 700 pixels wide */
}
If it's not mobile change the "initMap()" code to something that does not return a map and voilà - map gone.
Related
I'm initializing a map using leaflet(openstreetmaps) in angular and setting a center that the user sees when opening the site. How can i change the center so the map rotates to the new coordinates on click of e.g. a button? Setting a new center doesn't appear to do anything, neither do i want to reload the site itself. Thanks!
private initMap(): void {
this.map = L.map('map', {
center: [48.1841234, 11.5877796],
zoom: 16
});}
you can use map.flyTo([latlng]) or map.panTo([latlng])
https://leafletjs.com/reference-1.6.0.html#map-panto
Hey I am trying to have a map in my project. I got my API_KEY from google for GoogleMaps... I have no error in console but map doesnt display anything, till I open developers tools on google Chrome...
2
After that is working but marker is in work palce.. Still no errors in console.
WHat am I doing wrong?
Style:
#map {
width: 100%;
height: 300px;
background-color: grey;
}
Code:
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: -0.250608, lng: 52.025528};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Title!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap">
</script>
You are init-ing the map in a container that is not visible/has no dimensions.
Opening dev tools triggers a resize on your browser which causes the map to resize itself.**
You can fix it by either:
either waiting to init the map until it's container is visible
or calling google.maps.event.trigger('resize',map) (where map is an
instance of the map) when your container becomes visible.
** Proof that this is what's happening: undock your dev tools so it's a floating window. Then refresh your page (with dev tools closed) and open dev tools again after you fail to see the map, it still won't be visible because your browser never resized (because your dev tools is floating and not docked)
Have you made sure to register your URL / domain with Google for the use of the Maps API? https://developers.google.com/maps/premium/previous-licenses/clientside/auth#register-urls
I want to center my map at these coords here (google maps website)
I copy pasted the coordinates in my website code:
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(56.4611388, -2.9719832),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Because my map slides down from the top of the page when user hovers over some text I call the function to refresh the map at the end of the animation:
$('#map').mouseover(function() {
if ($(this).offset().top == mapHiddenHeight) {
$(this).animate({
top: 0
}, 500, function() {
google.maps.event.trigger(map,'resize'); // refresh map
});
}
})
But the map is slightly offset from the center on my website. (Map drops down when you hover over "Find us on the map", top right)
NB: Actually I just noticed, if I clear the browser cache and load the website it appears at the right location. It's when you reload the page with cache full that it constantly displays with the same location offset. No matter how many times you refresh the page after that. So it only displays at correct location with a cleared cached, which of course is annoying.
I don't even know where to start debugging this. Tested on Chrome and Firefox,
Basically there is nothing to "debug", it may sound funny but when there is something that may be called "bug" it's the position you get when it works as expected.
When you trigger the resize-event the API re-calculates the size of the map to be able to load missing tiles. The API will not re-center the map based on the current center/size(the center of a hidden map usually is the location in the northwest-corner).
You must re-center the map on your own.
there are 2 options:
always center the map at the same position:
store the desired center as a map-option:
var map_options = {
center: new google.maps.LatLng(56.4611388, -2.9719832),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
//default-center, should have same value as center
originalCenter:new google.maps.LatLng(56.4611388, -2.9719832)
}
in the $.animate-callback first trigger the resize-event and then set the center of the map:
google.maps.event.trigger(map,'resize');
map.setCenter(map.get('originalCenter'));
center the map at the center before resizing(when a user drags the map this position will be restored):
inside the $.animate-callback:
var center=map.get('center');
google.maps.event.trigger(map,'resize');
map.setCenter(center);
I have a weird problem with Google Maps Control.
I've tested in a blank page my custom maps with custom markers and everything seems to be ok, also with the control panel.
When I tried to import all my code in the page I'm working with ( I use a full screen fluid grid system ) the control panel is displayed with strange size.
I tried everything for disable/enable the ui of the Google Maps but the problem remain.
The code of my maps are exactly the same, both in my blank page and in my site, but in the site the ui control panel is displayed very strange.
Here's the code:
<div id="map_canvas2" style="height: 580px; width: 100%;"></div>
<script>
var image = 'path/to/your/image.png';
var mapOptions = {
zoom: 17,
center: new google.maps.LatLng(45.499290, 12.621510),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
var map = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions);
var myPos = new google.maps.LatLng(45.499290,12.621510);
var myMarker = new google.maps.Marker({position: myPos, map: map, icon: 'http://www.factory42.it/jtaca/wordpress/wp-content/uploads/2014/06/pin-map.png' });
</script>
</div>
Here's an img:
http://www.factory42.it/jtaca/wordpress/wp-content/uploads/2014/06/img-maps.png
there is a global rule on images style that is applied on your page
Are you including the same .css files ?
Is your page accessible online? Otherwise, you can inspect your image yourself from your favorite console debugger and see what styles are applied on it You can try removing them one by one to detect your problem
I am building a site and I have a page which takes an address and uses it to generate a 2D roadmap style google-map and then next to it, the street view for that address.
My problem is that these two maps span almost the entire width of the site and the user is likely to have their mouse go over it when scrolling down the page and get confused by their inability to scroll down further (while zooming into a map).
Disabling this for the 2D map was pretty strait forward
//works to disable scroll wheel in 2D map
var mapOptions = {
zoom: 12,
center: latlng,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions );
//not working to disable scroll wheel in panorama
var panoramaOptions = {
position: results[0].geometry.location,
scrollwheel: false
};
panorama = new google.maps.StreetViewPanorama(document.getElementById("map_canvas2"), panoramaOptions );
but the street view does not seem to allow me to disable the scroll wheel using these options and I am not able to find this issue addressed in the google-docs. Anyone know if this CAN be done or suggestions on how to approach it?
There was a feature request with Gmaps API v3 issues to add scrollwheel: false to streetview http://code.google.com/p/gmaps-api-issues/issues/detail?id=2557. This is now fixed, just use scrollwheel: false within your StreetViewPanorama options.
I am having the same problem, when the user scrolls down using the mouse wheel, the cursor gets caught in the Google street view and starts zooming instead of scrolling down the page.
In Google Maps they provide the scrollwheel property which can disable this, but unfortunately this does not seem to be implemented in Street view.
The only workaround I found as of now is as #bennedich said in the previous answer, I placed an empty/transparent div exactly over the street view div.
I am enabling the controls when the user clicks anywhere over the street view area by using jQuery to hide this empty div (using css visibility property) on mousedown event and when the user moves his mouse out I am placing this empty div back over. Which basically means everytime the user wants to interact with the street view control he has to click it once. It's not the best solution but it's better than getting your mouse caught up when scrolling
Don't know about the javascript way, but with html and css you can place an invisible div with higher z-index over the map/streetview.
There is a patch coming up from Google to address this issue.
The fix that works for now is to set the version number explicitly to 3.25 for scrollwheel: false to work.
Example:
https://maps.googleapis.com/maps/api/js?key=XXX&v=3.25
My solution was the following. As soon as the mouse is scrolled on the street view using the "wheel" event, then do the scroll artificially and bring an overlay to the front.
$('.streetViewOverlay').click(function(e) {
$(this).addClass('streetViewOverlayClicked');
});
document.querySelector('#street-view').addEventListener("wheel", function(evt) {
$(document).scrollTop($(document).scrollTop() + evt.deltaY);
$('.streetViewOverlay').removeClass('streetViewOverlayClicked');
});
$('#street-view').mouseleave(function() {
$('.streetViewOverlay').removeClass('streetViewOverlayClicked');
});
var panorama;
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('street-view'),
{
position: {lat: 37.869260, lng: -122.254811},
pov: {heading: 165, pitch: 0},
zoom: 1,
gestureHandling: 'cooperative',
scrollwheel: false
});
}
.streetViewOverlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 0;
}
.streetViewOverlayClicked {
z-index: 1;
}