I've finished my last project that uses GoogleMaps API v3 sucessfully.
But now, with no reasons the map is not being generated anymore.
The window with all map controls is opened correctly but the map
itself is not. It shown only a gray screen.
There is no errors on the script before calls google.maps function and
there is no errors after it too!
Can anyone try to help me with this issue?
Thx anyway.
I had a similar problem when I used GoogleMaps API in a Jquery UI Dialog, the map div would be gray. I corrected this problem by resizing the map when I opened the Dialog. I am also using the GMAP3 Jquery plugin.
Here is the resizing function:
function resizeMyMap() {
var mymap = $('#map_canvas').gmap3({ action: 'get', name: 'map' });
google.maps.event.trigger(mymap, "resize");
$('.gmap3').gmap3({
action: 'autofit'
});
}
If you do not use the GMAP3 Jquery plugin, you can try this to resize the map:
google.maps.event.trigger(map, 'resize')
Related
I am using Smart slider 3 for carousel video slider. Its working fine by default.
I want to by default load 2nd slide of my slider.I am using below link in reference.
https://smartslider3.helpscoutdocs.com/article/312-move-slides-with-javascript
jQuery( document ).ready(function() {
n2ss.ready(8, function(slider){
jQuery('.switch').click(function(){
slider.slide(1);
});
});
});
I am putting my code in custom.js of my theme.
Am i putting code at right place?
I am getting error > Uncaught ReferenceError: n2ss is not defined
I tried to solve it with below referance link but still not able to solve it.
https://smartslider3.helpscoutdocs.com/article/485-n2-is-not-defined
Nexted Setting:
Smart Slider 3.3 introduced a new JavaScript API. You should be able to switch to that slide with the following code:
N2R('#n2-ss-70', function($, slider){
$('.switch').click(function(){
slider.slide(1);
});
});
Where 70 is the slider ID
I have implemented jPanel Menu via a rendered template, which works great, until a route has been changed, then the menu stops working. Here is the code I am using to evoke the plugin.
Template.mobileMenu.rendered = function(){
var jPM = $.jPanelMenu({
menu: '#mobile-menu',
trigger: '.menu-trigger'
});
jPM.on();
};
The template is loaded on all pages in the footer. I am thinking it needs to be rerun on route change, OR prevented from being rerun. I am not sure which. Thanks for any tips.
This sounds similar to the problem many people have with using 3rd-party ui components. I put together a working example of using a modal dialog component which may be of some help:
https://github.com/alanning/meteor-modal-example
Also I should point out that the new Meteor UI rendering system, "Blaze", should eliminate these kinds of issues. I would expect Blaze to be released soon.
(For those visitors coming from the future, at the time of writing Meteor v0.7.0.1 is the latest version.)
The solution was to wrap it in an if not rendered, to prevent it from being re-rendered on template / route changes.
Template.mobileMenu.rendered = function(){
if (!this.rendered){
var jPM = $.jPanelMenu({
menu: '#mobile-menu',
trigger: '.menu-trigger'
});
jPM.on();
this.rendered = true;
}
};
I am developing a custom imagemap type map without geo referencing i.e. latlng of my map do not relate to acutal latlng of that place. Now i have also created custom streetview panoramas of certain buildings and places in that map.
The issue is am not able to integrate those custom streetview panoramas with my custom imagemap.
Following is the link to see whats going on:
http://cdi.astateweb.org/virtual_tour/
First Approach:
There are two markers on the map right now. When you click on them a small infobubble pops up. Now when you click on the virtual tour link a dialog comes up. I want to load the custom streetview panorama in that dialog. I tried several things but to no avail. I am trying to reuse the same dialog for both markers. I tried initializing the panorama in jquery ui dialog open function. It worked for the first one but when you close the dialog and open it again it fails with some cbk error from google apis.
SECOND APPROACH:
I tried to use the default streetview pegman such that when the pegman is dropped on a certain building or place which has a panorama the streetview comes up just like in normal google maps. This didn't work either.
Can somebody point me to the right direction. Any help will be highly appreciated.
Thanks
Ok, try like this:
Change at line 41
from
'Virtual Tour'
to
'Virtual Tour'
Change at line 96
$("#dialog").dialog({
autoOpen: false,
width: 650,
open: function() {
console.log($("#" + virtualTour.currentPano));
$("#" + virtualTour.currentPano).appendTo("#dialog").css("display", "block");
},
close: function() {
$("#" + virtualTour.currentPano).appendTo("body").css("display", "none");
}
});
And the below code to add into "createMarker" function.
//After this line.
virtualTour.hotspotArray.push(marker);
//Add this code.
setTimeout(function(){
document.getElementById(pano).style.display = "none";
}, 100);
I'm working with google maps utility library. More specifically with infoBubble, and I'm currently able to open an InfoBubble for a Marker, placed on my google map. What I want to know is how to attach an event to close that infoBubble. I'm struggling with this. Please help me.
Sincerely,
J
// Listen for user click on map to close any open info bubbles
google.maps.event.addListener(map, "click", function () {
infoBubble.close();
});
In the infobubble options simply write hideCloseButton: false,.
You will be able to see a close button on the right top corner of the infobubble
or add an event as DeeZone's answer has shown.
I'm looking to replace the default Google Maps API InfoWindow with a Fancybox overlay.
Version
Google Maps API 3.0
Goal
Replace the default Infowindow with a Fancybox popup
Use Case
Google map is loaded up in full screen (100% by 100%)
Markers are placed onto the map
User clicks on a marker and is shown a Fancybox popup that overlays the map
User clicks on "X" in the top right hand corner of the Fancybox to close it
I'm at a loss as to how best to tackle this. Is it easiest to call Fancybox using the addListener event handler, passing in the marker as a parameter? If so, how would any of you recommend doing this?
For example:
google.maps.event.addListener(marker, 'click', function(){
// Call Fancybox, but how?
});
Thank you in advance,
Graham Kennedy
I've found that the best way to go about this is to pass in your content manually with Fancybox's href method. Works like a charm for me.
function addMarker(data) {
// build the window contents
var contentForBox = data;
google.maps.event.addListener(marker, 'click', function() {
$.fancybox({
href: contentForBox
// other options
});
});
}