I would like to personalize the position badge on a Google Map (with API). I know it's possible to change the appeareance of the badge with CSS or image. But how I can do that ?
This is what I want :
The small rectangle is the normal view, and the big rectangle is the clicked view (with informations). Thanks !!!
The 'big rectangle' and 'small rectangle' are both infowindows. Styling infowindows has been asked here before:
Styling Google Maps InfoWindow
You'd need to have an event listener, so initially the small infowindows are all displayed on load. Then when you click on a point or on an infowindow, you then show the large infowindow.
Related
I'm building a Backoffice and want the 1st page to resemble the google Apps dashboard (see image). Any idea how I can create large buttons that include a title, image and sub text?
Google Apps Dashboard
Behaviour on mouseOver
It looks like the best option from the layout perspective will be Grid widget with onClick handler for GridCell(select Cards style variant for mot prominent hover effect):
// Cell onClick handler
app.showPage(app.pages.SomePage);
But the datasource for this thing will be the whole different story...
I have a Googlemap with multiple markers on that I refresh when moving around or zoom in/out the map. So far so good. The problem is that if a marker is refreshed, I mean repainted on the map, then it blinks for an instance, as it first gets deleted as an old marker and then painted as a new marker. I use setMap(null) to hide markers. Is there a way to avoid this blinking? Is there a way f.e. to add easingout effect at setMap(null) using jQuery or something?
Write your code to not do that. Don't delete all the existing markers, only delete those that no longer appear in the updated data and add new ones.
I am hoping someone can point me in the right direction. I have a google map v3 with fusion table that I am looking to create a custom box with the content that would normally be displayed in an infowindow.
Much like http://www.instaearth.me or
http://chrismcaleenan.com/map/?page_id=7
So the user clicks on the marker and the content is loaded into a box/window/div that is not attached to the marker itself.
Does anyone know of any samples / tutorials where someone shows this being done.
Thanks
The FusionTablesLayer has a FusionTablesMouseEvent which is returned on a click (if you add a click event listener to the FusionTablesLayer). That Object contains the data in the row associated with that geographic object (icon, polyline or polygon), and you can use it to populate an HTML div on your page.
working example, zoom in past zoom level 2 to see the FusionTable code work, at zoom 0, 1 it uses the KmlLayer
I am using google maps 3 api and am changing the icon of a marker when it is clicked. I am also registered for mouseover and mouseout events on the marker. I am finding that when the icon is changed because it has been clicked, it triggers a mouseout and then a mouseover. Is there a way to prevent these extra events from triggering?
edit: I'm changing the icon with the following code:
marker.setIcon(selecticon);
Thanks
How are you changing the icon? Are you sure you are not destroying the marker, and then recreating it.
We have no way of knowing because you haveing let us see your code (please include a link)
I can't find an answer for that simple question anywhere!
How on earth can we zoom in with one level (+1 from the current one) in google maps API V3?
I mean is there a function for that purpose? or a hack or whatever?
What I actually want to do is to zoom by one level onclick on a link located in a marker's infowindow and also the same result ondblclick on the marker but in both cases the zoom should increment only +1 at each event (click on link or dblclick on marker) and the zoom center should be the marker in question.
I'm open to any suggestion involving native Googlemaps methods, jQuery or plain Javascript.
Anyone who tickled the same problem?
map.setCenter(marker.getPosition()); //marker is marker to center on
map.setZoom(map.getZoom() + 1);