I have been working on this website http://www.knudtzon.co and I have tried to include a google maps in the contact page. Unfortunately, the maps doesn't render properly, and when I navigate in the maps, it still doesn't work or load in content properly. I have found out that if I re do my script, so that the google maps is the first thing appearing on the screen, the map actually loads in correctly, but that doesn't really suit my design-wishes that much :)
I have looked for solutions on this, and tried to reload the map when I open the contact page, but it still doesn't seem to work. My log doesn't show any errors or anything, so I can't seem to figure it out.
If anybody has an idea of how to solve this, it would be amazing!
I think, once you are done with displaying the contact div, you need to call the resize event on google map.
var map = new google.maps.Map(selector, mapOptions); //Initialising map.
var currCenter = map.getCenter(); //Get the center location of the map
google.maps.event.trigger(map, 'resize'); //Trigger resize
map.setCenter(currCenter); //Setting the center in resized map.
Should be easy. Make sure you call this code after your contact div is loaded/resized/animated completely.
Let me know if it works.
Related
I am using a WordPress plugin for integrated Google Maps into the website, but I can only see the top left corner: http://prntscr.com/4i3eus
I looked at the other questions and someone said to use this:
google.maps.event.trigger(map, 'resize');
However map is undefined... When I resize my browser the map loads however. Anyone knows how to solve it?
Well in this case the variable of the map object is the map passed in trigger method . If your map object is referenced by a different variable you should use that.
I am using the Fluster library to do some clustering with the Google Maps API v3.
http://blog.fusonic.net/2009/12/fluster2-011-with-significant-performance-improvements/
I have "real-time" searching on the map. As you type in an input it hides or shows markers that match the search.
This works fine, however I can't get it to work with Fluster. i.e. I can show/hide my own markers, but I can't update the cluster markers.
Fluster doesn't seem to have a removeMarker() method. I tried adding my own, but with no luck...
this.removeMarker = function(_marker)
{
var index = me.markers.indexOf(_marker);
me.markers.splice(index, 1);
};
I would then try calling fluster.createClusters() or fluster.zoomChanged() but again, it just isn't doing what I want.
Does anyone know what I can do to work around this?
If it comes down to it, I guess I can remove the instant-search and just get it to re-render all the markers/clusters on the search form being submitted, but that is not an ideal solution.
Any advice would be greatly appreciated.
I am finishing an app for iphone/android in which I display a map (google maps) with my position and a lot of pins nearby.
My problem is that the first time it works perfect and the second time I open it, it centers it wrong and it only shows a part of the map, the top left part and only like the first quarter of the map is visible.
Did someone have this issue?
Thanks for your help
Can you provide some code. I've faced same when i tried to reuse the division with data role
try creating new request each time you wish to see map
For me, the following worked:
After creating the 'map' object, do:
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
map.setCenter(mapCenter);
});
This is not my solution. I found it somewhere here on SO, but I just can't seem to find the same post again.
There are few locations that are not loading in satellite view what could be the reason behind it?
If i use the same lat,lng and try opening it in maps.google.com it happens to load but why not in my app.
Suggest me how can i overcome this ? I have to make sure that is loads in my app.
you might be zoomed in too far. try zooming out and see if the tiles show. Some area do not have map data for all the zoom levels.
I'm relatively new with using Google Maps API. Right now I am working on a project where a user can select various search filters and see results automatically show up on the map without reloading the page. My approach thus far has been to create a Javascript object with controls the map so that I could manipulate pieces of it as I wish (ie, centerMap(), addMarker(), clearMap(), etc). I developed several proof-of-concept pieces before beginning this phase of the project.
Right now I am at the point where I have a custom JS object which controls my GMap. The GMap is drawn correctly, the zoom and center are fine. Next I try to run a function which adds a Marker to the map. I'm guessing it's possible to add markers after a map has been generated and I'm simply making a mistake somewhere. Below is my code as it exists. I'm wondering if anybody can shed some light as to why my marker isn't showing up...
Any and all help is greatly appreciated!
Code: http://pastebin.com/1ZzH9zHk
Thanks in advance!!
Dima
In your code, shouldn't
var map = new google.maps.Map($('map_canvas'), myOptions);
be
this.map = new google.maps.Map($('map_canvas'), myOptions);