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.
Related
Currently, I'm working on a website where it is wanted to place the info window below the marker.
By default, when you have a map and click a marker, the info window will show above that marker, with the arrow point it to the marker. I would like to switch that around.
In the google maps api there is a section about pixelOffset that might work But I just don't get it.
This pixel offset, where would completely 0 be? And what if you zoom out.
I can't seem to figure out how this pixelOffset works and if it is really the thing I need to place the infowindow below the marker.
So my question in general is: Does someone know how to place the google map infoWindow below the marker ? Do I need pixelOffset for it or is this something completely diffrent?
Thanks!
It's possible to adjust offset using pixelOffset property, but I don't think that's what you want, because the arrow would always point downwards, not upwards to the marker.
What you want is more control over infowindow, and you won't get that using google.maps.InfoWindow class. There is a library called InfoBox which supports the same functinality as infowindow but have couple of more features, which allow for better customization.
Check this tutorial, the author is demonstrating very similar functionality to what you want to achieve. Basically you will create your own structure for the info infowindow, including the arrow yourself. Just using HTML and CSS. More in the tutorial.
One more thing, the link to infobox library is broken on the blogpost, because it has been moved recently to github, you can find it here. Download it to your project from there (either as infobox.js or infobox_packed.js which is the minified version).
Hi Pardon me if this is repeat question or obvious one as i am new to programming
I am trying to implement an angular google map using this api. it has a property called options boxClass,boxStyle,content,disableAutoPan,maxWidth,pixelOffset,alignBottom,position,zIndex,closeBoxMargin,closeBoxURL,infoBoxClearance,isHidden,visible,enableEventPropagation as different values(seen from the JS file.)
Now i want to know what each one of those will do as it is not specified in their documentation. and mostly i wanna know how i can make the info window to appear on rightside of marker like shown here I designied the html for the infobox and when i give boxClass as the option the infobox is rendered properly but is displaying below the marker. i want it to be to the side of marker.
EDIT: let me clarify on certain points. I mainly wanted to know
1.how to remove the default close button and replace with mine. (which function to call for it to work )
2.how to use pixelOffset or another property to help me display the infobox to the side of marker as in example above without using margin or padding. gmaps api v3 specify the pixelOffset to be of type size. i tried various ways to offset the infobox so that it will shift but it seems i am using it wrong as the box either wont change its position or will be displayed at the top of map irrespective of the marker.
A lot of them are CSS properties that changes appearance and not really maps term. You can google them or learn from here.
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 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.