I use this code :
var fenway = new google.maps.LatLng(y, x)
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
};
new google.maps.StreetViewPanorama(div, panoramaOptions);
It works.
In the top left, i have a info windows with the link to show in google maps, if i click over, i show google maps in a new browser and this time in the top left, I see a link "See more dates".
If I click over I show a new panel (in bottom) with several labels to show another images for a year XXXX.
So, I would like to add this link directly in my StreetViewPanorama.
Is this possible via APIs?
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
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.
This is my gmaps avscript code, i print maps as many as my data database, these gmaps are inside at collapsed div:
var maps = {!! $maps !!};
var googlemaps = [];
$.each(maps, function( key, item ) {
googlemaps[key] = new GMaps({
div: '#gmaps-' + key,
lat: item.latitude,
lng: item.longitude,
width: '100%',
height: '100%',
});
googlemaps[key].addMarker({
lat: item.latitude,
lng: item.longitude,
width: '100px',
draggable: false,
title: 'Marker'
});
googlemaps[key].setCenter( item.latitude, item.longitude );
googlemaps[ key ].setZoom( 15 );
});
The div by default is collapsed, after i open the div and show the gmaps, it's just showing blank grey maps, i try drag my map to search my marker, it only view a little part of the gmaps panel at the top left.
after i resize my browser the marker finaly can drag to center of panel but still grey.
I zoomed out/in and the image loaded, the image only loaded when i zoom in and out.
I really confused searching so many answer but not solving my problem.
Please help me..
When the map div, or it's parent, or it's parent parent (any predecessor) has display:none style, and you create the map, the map view won't initialize properly. You have to trigger resize event on map for it to reinitialize the map view.
In GMaps the google.maps.Map object is accessible using .map attribute, so your code will have to look something like this:
google.maps.event.trigger(googlemaps[key].map, "resize");
Remember to trigger it AFTER the div is visible. To be sure you can put the resize trigger into a timeout, when they click the div to display.
Side note: I am not sure if you are aware, but every map you create is a separate API call so to have multiple maps results in lot of separate API calls and if you don't have maps for business license you can hit limits pretty fast.
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