I just came across the fantastic DrawingManager class for Google Maps API v3 -- which is exactly what I need for my "create a map" webapp.
Alas, adding a marker tool only drops the marker itself onto the map -- I need the ability to add infoboxes to markers, preferably similar to how Google Maps Engine does it (I.e., you place a marker and can click on it to set title and description).
Is there something I'm missing (Possibly a property I need to set to get this type of behaviour), or will I need to wire together my own implementation? If the latter, know of any helper classes that might make this easier?
Thanks!
In the first link you posted, at the bottom of that page there is section "Drawing Events" which begins to explain that the DrawingManager would have an event 'markercomplete' which returns the actual marker instance. See also DrawingManager api docs (see events and their arguments) https://developers.google.com/maps/documentation/javascript/reference#DrawingManager
So, once you have access to the instance of the marker which was just created, it's just a matter of creating InfoWindow's and handling things from there.
//code
Here is an example fiddle for you: http://jsfiddle.net/A96Hu/
Related
I'm using Google Maps to set some markers. I have things setup so that when an item in a list is hovered on the marker will highlight.
This is done easy enough by keep a hash of the markers. So that when I hover over an item it just updates the icon in the marker.
this.markers[hoverItem.id].setIcon('/img/map/active-marker.png');
This works just fine. However I'm also using the marker-clusterer-plus plugin with Google Maps. The problem I'm having is to highlight the cluster icon if the marker is inside.
I can't find away to access the cluster object of the marker. Is there anyway to access or set it somehow?
Looking at the code...:
...you'd probably need to call MarkerClusterer.getClusters to get all the clusters.
Then loop through them, perhaps then calling Cluster.getMarkers and checking if your marker is in each cluster's array of markers.
Cluster.isMarkerInClusterBounds and Cluster.isMarkerAlreadyAdded_ might also be useful.
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).
What I want to do, is to display a simple google map (with basic, satelite and hybrid as options), add a custom marker to it, have it centered on a specific location, AND .. have the entire MAP faded out a bit so the marker would be more clear.
This last bit proves to be quite a difficult task, since I need to somehow fade the map, but maintain the marker and mapcontrols on top of the map, so the normal functions of dragging the map, zooming and clicking the marker would still work. If this was simple HTML, I would control it all using z-index values, but it looks like the markers are embedded inside the map tiles using canvases, so I'm really bound to using the google API to do this.
I've spent an entire day looking through Q&A here on stackoverflow, browsing the google API and trying to find some simple way to add a transparent overlay on a google map using API v3.
So far, the closest I can find about this, is to create a custom layer using KML and have it displayed as a control, but since I'm really not into how the KML works, this is really advanced, and I feel like I have to spend weeks to make this work correctly.
Is there really no simple way to create this transparency effect in a google map?
For simplicity I'm using gmap from smashinglabs.com, but I could easily switch that out with a more general google maps API call. This is the javascript-code I'm currently using:
$("#bmap").gMap({
latitude: 'fit',
longitude: 'fit',
zoom: 'fit',
maptype:google.maps.MapTypeId.HYBRID,
controls:[{pos:google.maps.ControlPosition.TOP_LEFT,div:$("#bmapoverlay")}],
markers: [extraMarker,{ latitude:XX,longitude:XX,html:'',
icon:{image:'*URL*',iconsize:[56,90],iconanchor:[28,90]}}]
});
Please note I've removed the long/lat numbers as well as the icon URL for the sake of privacy :)
Adding the DIV bmapoverlay doesn't work at all, and I would consider removing that all together.
Documentation for the smashinglabs gmap can be found here.
The gamma or lightness styler should work for what you asked. This is not a transparency effect, which means it will not allow to see any element that would be behind the map but it should achieve the fade out effect that you mentioned in your question.
See the documentation about stylers here.
Example usage:
var mapStyles = [{
"stylers": [{
"gamma": 6
}]
}];
map.setOptions({
styles: mapStyles
});
JSFiddle demo
Hope this helps!
Interesting question.
I am sorry but there is no way to apply any sort of opacity on map itself that can visually highlight your marker.
Using KML is seriously a bad option. Using KML is very once you understand it but it will not fulfill your case. Furthermore, it will make your map slow. You can try it by using world kml file and using the following tutorial:
KML files
https://www.google.com/fusiontables/DataSource?docid=1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk#rows:id=1
and
https://www.google.com/fusiontables/data?docid=1zn8cjdD6qlAFI7ALMEnwn89g50weLi1D-bAGSZw#rows:id=1
sample code:
https://developers.google.com/maps/documentation/javascript/examples/layer-kml
What I think will be best for your problem is that you create simple google map by sample code:
Now you add one more div above map div and set your opacity/transparency to it.
Next you add custom markers using D3. Here is a great tutorial/sample code:
http://bl.ocks.org/mbostock/899711
If you are not familiar with D3, do not worry, code is very simple. (If you need any help understanding this code of D3, please ask). You'll be creating markers using SVG.
Profit of using D3 for markers is that even if you place 1000+ markers on your map, it will not effect any performance.
Well you can also use custom style maps. Use following link and check on "lightness" and do modifications with it.
Regards,
Suyash
I have been trying to create fancy info windows like google maps have on their maps.
what makes it fancy?
1. the tip of the info window is long and narrow and looks slick coming out of the marker
2. there is a shadow with the shape of the info window on the google map itself.
In the documentation of the maps api there is the official info window:
https://developers.google.com/maps/documentation/javascript/infowindows
but I also found this one from the utility library:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html
which I use like so:
var infoWindowHTML = get_movingInfoWindowHTML();
context.bubble = new InfoBubble({
content: infoWindowHTML,
padding:5,
borderColor: "#ccc",
ShadowStyle:1,
hideCloseButton:true,
arrowSize:25,
arrowStyle:1,
arrowPosition:99,
borderRadius:0,
width:150,
height:150
});
context.bubble.open(map,marker);
even though in the example of info bubble they show it with a shadow, currently the shadow is not working for me with this code.
but the bigger problem is that bubble info doesn't look as slick and fancy as the one google maps are using, the arrow is thick and not slick.
How can I get to a result like the one on google maps?
thanks!
try using infoBox. These are as functional as infowindows and are much more customizable.
infoBox reference
I want to put a Google Maps map on our website.
I know that custom markers can be added to a map with Javascript, but I'd rather use Google's MyMaps service instead, because then my co-workers could edit the map without any programming knowledge.
You can add a custom My Map to websites with an embedded iframe. I'm using the Javascript API instead though, so that I can take advantage of the controls the API delivers (such as zoom through custom controls or changing the position on the map without touching the map itself).
Can I insert the map created and saved with My Maps as a layer in my JS API map?
You can use GGeoXml to add My Maps content to your API map.
In your My Map there's a "View in Google Earth" link, use the URL of that link as your GGeoXml URL.
The link generates an indirect "network link" reference to the data, so the map on your page will reflect the latest changes made to the My Map.
The downside is that there's a limit to how many markers you can place on one page of a My Map, and the "View in Google Earth" link only returns data for the current My Maps page.
Another strategy is to use GeometryControls in your own API map.
That involves a lot more coding effort on your side. It gives the same look and feel to your co-workers, so they still need no programming skills. The advantage is that it bypasses the My Maps limit to the number of markers that can be displayed at once.
Apparently you can embed the My Map you created in your website by using the Link To This Page functionality as described here.