Google Maps API: When infowindow closes, map zooms back to center - javascript

I have multiple markers on a google map that -- when clicked on -- open up an infowindow. The problem is, when the infowindow is on the periphery of the map, it resets the center of the map. I want to have the map zoom back to the original center after the infowindow closes.
I'm thinking I could do something like the following:
google.maps.event.addDomListener(infowindow, "close", function() {
google.maps.event.trigger(map, "close");
map.setCenter(new google.maps.LatLng(53.0,-1.0));
}); //pseudo-code
Any tips?

use setzoom
google.maps.event.addDomListener(infowindow, "close", function() {
google.maps.event.trigger(map, "close");
map.setZoom(8);
map.setCenter(new google.maps.LatLng(53.0,-1.0));
}); //pseudo-code
Explaination:
we already defined map so use map object to set zoom level or relocation(setCenter)

Related

InfoWindow doesn't open correctly with link when marker is outside view on Google Maps V3

I made a map with markers clustered on Google Maps. The makers have a listener that set the zoom, then center the map and then open a infowindow.
In a for loop I made a list with links to every marker that looks like this
' + item.nombre + '
If I click a marker on the map there is no problem: the map is centered and the infowindow is showed.
The problem is if I press a link form the list: if the maker is not showing on the map the infowindow is open incorrectly (in a wrong position and overlapping an icon) and the map is not centered (the map doesn't even show the correct place of the marker).
Strangely, if I zoom out the map at a point that the real position of the marker is showed the InfoWindow is set correctly on the correct marker and there is no problem if I press the same link again, just like in the second image.
Here is the jsfiddle, the error could be reproduced if I click on Playa Maqui Lodge and then on any other link using Firefox 43
So, what am I missing? Why the map is not centering on the link?
The marker isn't added to the map until it is "unclustered", zoom to it then "click" on it. The zoom must be higher than the maxZoom of the markerClusterer.
Either set the markerClusterer maxZoom to 15 or change your code to zoom in closer to the marker.
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
map.setZoom(21);
map.setCenter(this.getPosition());
infowindow.setContent(this.html);
infowindow.open(map, this);
});
proof of concept fiddle
Looks like there is an issue with the computation of the anchor using a custom infowindow (which I didn't see before as you didn't provide your custom marker). It works if you don't use the InfoWindow.open(map, anchor) syntax and set the pixelOffset and position of the InfoWindow manually.
var infowindow = new google.maps.InfoWindow({pixelOffset:new google.maps.Size(0,-35)});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
map.setZoom(16);
map.setCenter(this.getPosition());
infowindow.setContent(this.html);
infowindow.setPosition(this.getPosition());
infowindow.open(map);
});
updated proof of concept fiddle (with custom marker)

Google Maps API: How to Set Scroll Zoom to Anchor in on One Marker

I'm working on a project, where I need the scroll zoom to zoom in on a marker (or alternatively on a specific point), and not on my cursor as is the default. Currently the scroll zoom zooms in on the cursor. How can I achieve that?
You can try this
Set the center of you map"
center: new google.maps.LatLng( , )
Then add function to move to marker position
google.maps.event.addListener(map, 'center_changed', function()
{
map.panTo(marker.getPosition();
});

Set Google maps coordinates as center screen

I wrote a script which allows an admin to click on a map (google maps api v3) setting up as many locations as he wants, naming them. That is, clicking on the map shows an information window with a form for naming that location. These locations are saved in a database (LatLng coordinates) and show as markers on the map.
Then, users (admin or not) may choose any of these locations from a select box (by name). Once this is selected, there's an option for showing a map with a marker on the selected location. The marker shows correctly, but I would like the map to be centered in that location. That is, the marker in the center of the screen but, instead, it shows in the extreme upper left corner. Actually, initially, the marker isn't even visible. You have to drag the map up and left a little for it to show.
This is rather strange, as I use the same coordinates for both the marker and the center screen. Here's my code (or the relevant part, at least):
var latlng = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.ltn));
var latlng2 = new google.maps.LatLng(parseFloat(location.lat) + 0.025, parseFloat(location.ltn) - 0.05);
var map = new google.maps.Map($('.modal-body', modal)[0], {
'center': latlng,
'zoom': 13,
'mapTypeId': google.maps.MapTypeId.ROADMAP,
});
var marker = new google.maps.Marker({
'position': latlng,
'map': map,
'title': location.name,
});
marker.setMap(map);
Notice how in this sample I don't use the latlng2 value. This is what I tried, but it seems to only work for a given resolution. How can I center the map in those coordinates?
Best regards
Edit:
$(map).focus();
modal.on('shown', function() {
$(window).resize(function() {
google.maps.event.trigger(map, 'resize');
});
google.maps.event.trigger(map, 'resize');
});
I'm not sure if this will work... If that window resize is cause than it might help. I don't know how it will interact with other code.
Add event listener for resize event:
...
marker.setMap(map);
google.maps.event.addListener(map, 'resize', function() {
map.setCenter(latlng);
});

Google Maps API - Offset the center point to ensure marker and infowindow are visible

I have the following code to zoom into a google map and show an infowindow when you click on a marker...
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
map.setCenter(this.position);
if(map.getZoom() < 10 || map.getZoom() > 10) {
map.setZoom(10);
}
});
However, the map size is based on the users browser window size and sometimes - when the map is not tall because of the browser window size - the infowindow disappears off the top. What I want to do is center the marker and infowindow rather than just the marker.
Any ideas?
You could get the height of your infowindow, then pan the map down half that amount.
map.panBy(0, info_window_height / 2);
If having the marker/infowindow in the center of the map isn't a strict requirement, also look at a SmartInfoWindow demo: http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/smartinfowindow.html

customize google map's InfoWindow

I want to completely customize the infowindow in google maps v3? I just want to show a image there, No white rounded background with arrow.
Is it possible in v3? or any workaround?
Something like this
take a look at the sources of this example - completely customized info window (Google Map API v3 is used).
I found that example on Google Map API v3 Group - "Custom InfoWindow examples" - just in case you will need more info
If you just need a image as a marker, then you don't need an InfoWindow. You can set a custom image as a location marker.
pin=new google.maps.LatLng(50.00, 50.00);
if(marker) {
marker.setMap(null);
}
var markerIcon = "car.png";
marker=new google.maps.Marker({
position:pin,
zIndexProcess: function( m )
{
return 9999999
},
icon:markerIcon
});
marker.setMap(map);
map.setCenter(marker.getPosition());

Categories