Issue with google.maps.event.trigger(map, "resize") - javascript

Thanks for checking it out.. I have an issue with this .js were i am using jquery to resize the map-canvas div. But once it has been resized i need the actual google map to reset its boundaries which i am using google.maps.event.trigger(map, "resize"), here is my code but once it fires the resize of the div, it cannot run the resize map trigger due to it being undefined? here is my .js
// JavaScript Document
// Scripts below in regards to instantiating the google map.
var map;
function initialize() {
var myLatLng = new google.maps.LatLng(-34.1840517,150.7131903);
var mapOptions = {
zoom: 17,
center: myLatLng,
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_LEFT
}
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: myLatLng,
map: map,
title: '6 Station Street, Douglas Park, 2569'
});
var contentString = '<div id="mapContent">'+'TESTING'+'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(function() {
$("#expand-map").click(function() {
$("#map-canvas").animate({"height" : "800px"}, 500);
google.maps.event.trigger(map, "resize");
});
});

You have just call the initialize function to draw map again after the map-canvas dimensions changed in animate function callback.
$(function() {
$("#expand-map").click(function() {
$("#map-canvas").animate({"height" : "800px"}, 500,function(){
initialize();
});
});
});
see here:
demo jsfiddle

Related

Event for showing map marker content in google map

I have a google map integration in my ionic app. I want my marker on map appear whenever map appears however it depends on 'click' event. I have changed into 'idle' however, it doesn't even show the content of marker.
Question: Into what shall I change 'click'?
function getMap(lat, lon, content) {
var latLng = new google.maps.LatLng(lat, lon);
var mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
//Wait until the map is loaded
google.maps.event.addListenerOnce($scope.map, 'idle', function () {
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: latLng
});
var infoWindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open($scope.map, marker);
});
});
}
just delete google.maps.event.addListener(marker, 'click', function () {}) and leave infoWindow.open($scope.map, marker); alone

google maps: open infowindow after map & marker load

I'm working with google maps api 3. It's a bit of annoyance, but how do I get infowindow.open after the marker and the map have loaded?
I've tried to add various listeners such as tilesloaded and idle and haven't had any joy.
In this working example you see the infowindow is loading before anything else:
http://codepen.io/anon/pen/WvbexY
function initialize() {
if (document.getElementById("maper")) {
var latlng = new google.maps.LatLng(52.370778, 4.899448);
var mapOptions = {
zoom: 11,
center: latlng,
scrollwheel: "",
scaleControl: "",
disableDefaultUI: "",
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var tinygmaps = new google.maps.Map(document.getElementById("maper"), mapOptions);
var marker = new google.maps.Marker({
map: tinygmaps,
position: tinygmaps.getCenter()
});
var contentString = '<p>WHY ME FIRST?</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
position: latlng,
});
infowindow.open(tinygmaps, marker);
//var openwindow = google.maps.event.addListener(tileListener, 'tilesloaded', open_infowindow); // Hummmm!
}
}
google.maps.event.addDomListener(window, 'load', initialize);
function open_infowindow() {
infowindow.open(tinygmaps, marker);
google.maps.event.removeListener(tileListener);
};
Edit: Changed the codepen to listen for tilesloaded before displaying the infowindow. The fork of your codepen with the tilesloaded listener is here: http://codepen.io/brenzy/pen/VLYwGN
Because SO needs some code:
google.maps.event.addListenerOnce(tinygmaps, 'tilesloaded', function() {
// open the infowindow
});
On my machine, listening for both tilesloaded and idle appear to function the same. (Without either listener, the infowindow is displayed before the map.)
I am assuming that your version didn't work, because you missed the line
infowindow.open(tinygmaps, marker);
when you were refactoring, so the infowindow was being opened before the listener fired.

Centering Google Maps on responsive resize with marker

I'm trying to get Google Maps to keep its center when resizing responsively.
I've managed to get the map to center but can't work out how to add my marker back in to the JS to make it center too. I'm using the code from here for the map centering... Google maps responsive resize
var map; //<-- This is now available to both event listeners and the initialize() function
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(LAT,LNG),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scrollwheel: false,
keyboardShortcuts: false,
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
The code I am using to center the map is above. I have the marker code below too, but I'm not sure how to add it to make it keep its center too.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(LAT,LNG),
map: map,
title: 'Title',
animation: google.maps.Animation.DROP,
})
}
Can anybody help with this?
Here is a first step to get what you want to do:
var map; //<-- This is now available to both event listeners and the initialize() function
var mapCenter; // Declare a variable to store the center of the map
var centerMarker; // declare your marker
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(LAT,LNG),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scrollwheel: false,
keyboardShortcuts: false,
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Create a new marker and add it to the map
centerMarker = new google.maps.Marker({
position: new google.maps.LatLng(LAT,LNG),
map: map,
title: 'Title',
animation: google.maps.Animation.DROP
});
mapCenter = map.getCenter(); // Assign the center of the loaded map to the valiable
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
// Here you set the center of the map based on your "mapCenter" variable
map.setCenter(mapCenter);
});
Edit: Based on #Chad Killingsworth comment:
You may want to add an 'idle' event handler to the map to set the mapCenter variable. You can achieve this like this:
google.maps.event.addListener(map,'idle',function(event) {
mapCenter = map.getCenter();
});
Description of the 'idle' event from the doc:
This event is fired when the map becomes idle after panning or zooming.

Google Maps API - InfoWindow not opening with custom marker icon

I've spent a few days trying to fix this to no avail. Any help would be appreciated.
I have a very simple Google map with one marker which when clicked zooms in and displays an infoWindow. My problem is that when I replaced the standard marker with a custom image marker, it zooms in but the infoWindow fails to appear. I've been using the Google API doco and a bit of cut & paste to get this.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=weather"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-22.062160, 144.142205);
var mapOptions = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var image = 'images/cccMap.png';
var myLatLng = new google.maps.LatLng(-22.062160, 144.142205);
var cccMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: 'Click to zoom to Orielton, Crown Cattle Company',
animation: google.maps.Animation.DROP
})
var infowindow = new google.maps.InfoWindow({
content:"<h1>Orielton</h1><p>Welcome to the center of Queensland.</p><p>View Photos or Videos</p>",
maxWidth: 200
});
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
google.maps.event.addListener(cccMarker, 'click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I'm sure it's something simple, but I could really use the help. Cheers.
You did it almost right. marker was undefined in click event listener:
google.maps.event.addListener(cccMarker, 'click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
infowindow.open(map,marker);
});
}
Change your event listener to:
google.maps.event.addListener(cccMarker, 'click', function() {
map.setZoom(15);
map.setCenter(cccMarker.getPosition());
infowindow.open(map, cccMarker);
});
}
Here is the whole code at jsbin. Note: you will not see the pointer icon there because it is on my system and I do not know how to provide it. But you have the code to compare.
And here is the result from my system:
Your Code:
google.maps.event.addListener(cccMarker, 'click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
infowindow.open(map,marker);
});
You are attempting to assign a marker "cccMarker" as first parameter, but it is assigned (as properly attempted) in the line infowindow.open(map,marker); – remove your first parameter of addListener() and properly assign it as "cccMarker" (you wrote "marker") in infowindow's open().
It should look like:
google.maps.event.addListener('click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
infowindow.open(map,cccMarker);
});
This way it should work properly.

Google Map loading partially on click on the hidden tab

I'm using 2 tabs, first for showing list and another showing map.
When the first time page is loaded 1 tab is shown by default and on click of second tab map is shown, but when i click list tab and again click map tab map loading partially.
Here is my JAVASCRIPT code:
$(document).on('click', "#load-map-view", function() {
locateStores();
$("#store-list-view").hide();
$("#store-list-view").removeClass('disabled');
$("#store-map-view").show();
$("#store-map-view").addClass('disabled');
});
function locateStores() {
var mapContent;
var map = new google.maps.Map(document.getElementById("store-map-view"), {
center: new google.maps.LatLng(47.6145, -122.3418),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 13
});
var markers = [];
$("#store-list-view .listed-shop").each(function() {
markers.push({
lat: $(this).attr('data-lat'),
lng: $(this).attr('data-lan'),
name: $.trim($(this).find('div.shop-name').text())
});
});
for (index in markers)
addMarker(markers[index]);
function addMarker(data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.name
});
var infobox = new InfoBox({
content: document.getElementById("infobox"),
disableAutoPan: false,
maxWidth: 150,
pixelOffset: new google.maps.Size(-140, -10),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 0.80,
width: "400px"//"280px"
},
closeBoxMargin: "12px 4px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1)
});
google.maps.event.trigger(map, 'resize');
map.setZoom(map.getZoom());
google.maps.event.addListener(marker, 'click', function() {
$(".infoBox").fadeOut(300);
infobox.open(map, this);
map.panTo(new google.maps.LatLng(47.6145, -122.3418));
});
}
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
var data = markers[index];
bounds.extend(new google.maps.LatLng(data.lat, data.lng));
}
map.fitBounds(bounds);
var pin = new google.maps.MVCObject();
function openInfoWindow(marker) {
title.innerHTML = marker.getTitle();
pin.set("position", marker.getPosition());
infowindow.open(map, marker);
}
}
I have tried several solutions like :
adding this code
google.maps.event.trigger(map, "resize");
and many other solutions, but still the page still isn't loading.
can someone help me out in this?
I have figured out the problem I was getting.
I was adding below code on wrong position:
google.maps.event.trigger(map, "resize");
The solution to my problem is:
If you are using map for hidden div. Declare map variable as global.
Then show the div first, load the map after div is shown and resize it using the code given.
var map; //globalize your map variable
// Then do the necessary loading
$(document).on('click', "#load-map-view", function() {
$("#store-list-view").hide();
$("#store-list-view").removeClass('disabled');
locateStores();
google.maps.event.trigger(map, "resize");
$("#store-map-view").show();
$("#store-map-view").addClass('disabled');
});

Categories