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.
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 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.
I'm using CFGMap solution to place markers on a google map (API V3) but I want the map to always be centered on a certain long/latitude. Right now it seems to center on the last marker placed on the map so if the majority are where I want the long/lat centered then one random marker will take view miles away.
Any help on this is appreciated.
Thanks!
CFGMap is infuriating for it's lack of documentation. I don't use it myself; I only tried to track down something that might help you. On the face of it, it appears only to take a tiny subset of the full API functionality and doesn't offer much else.
From what I can glean from the testmap.js found here, it appears that you can only center the map on an existing marker in your locations array (see line 616 of the github file).
_cfGMapObj.resetCenterToLoc(index);
So, for example, in the source of the example is the line:
_cfGMapObj.resetCenterToLoc($('#locID','#printLink').val());
which grabs the number from the value of the current option in the select at the top of the page.
Now, if you chose instead to knock CFGMap on the head you could employ the Map API fully and set the center of the map using the setCenter method of the API.:
map.setCenter(new google.maps.LatLng(lat, lng));
e.g.
map.setCenter(new google.maps.LatLng(57.4419, -121.1419));
which in my mind is much easier. Plus, if you decided to do this, there are tons more articles on the API on StackOverflow than there are on CFGMap. YMMV.
I was wondering if there is any example of javascript that I could refer to: I built a Google map javascript with Oracle APEX. In this application, I need to make my javascript code working as this way, whenever my mouse moves across a pin icon on the Google map, the info window pops up, and when mouse moves away, the info window disappears. I am not familiar to javascript, I wish I could know which term I could use to search in forums to find examples. Could anyone help me?
Something like this:
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map,marker);
});
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
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);