I am using this library to dynamically generate my markers because the dynamic icons are deprecated. Now, in this API there is not the possibility to set the markers opacity..and this is crucial for my application. Currently I am loading the markers in this way:
var marker = new StyledMarker({
styleIcon:new StyledIcon(StyledIconTypes.MARKER,
{color:generateColor()}),
position:new google.maps.LatLng(lat,lon),map:map});
I have not been able to find a solution and I think that I will have to switch to statically generated markers instead .. :(
Related
I need a googlemap with clusters, popup and list where you can click on.
Hoping to find a simple solution which I can easily add markers and have a marker list which points to the marker on the map.
I have successfully used markercluster.js
Just load all your markers into a json (in my example they are in the variable locations), then load them:
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location
});
return marker;
});
If you look at the example code, it will show you how easy it is.
The Google Maps JS API documentation is as clear as it comes.
https://developers.google.com/maps/documentation/javascript/adding-a-google-map
I don't think there's an off-the-shelf solution that looks exactly like your example. Getting that list is going to require some HTML work to position/render the module, and Javascript/DOM integration to sync it with the map. Some rudimentary front-end development is involved and if that's not something you want to tackle, perhaps you could just make a custom Google Map and link to it.
https://www.google.com/maps/about/mymaps/
I'm using Google Map API to display my route. I have an array of way points. Because I need to use optimizeWaypoints, so all stopover of all markers have to be set to true. By doing that, Google Map automatically creates a marker at each way point, with click event to show info window.
My question is, how can I customize those auto generated markers? For example, if I want to change the content of those info windows, what should I do?
Thanks a lot for your help :)
There is no implemented option to customize these markers.
The content of the infoWindow may be modified by using a custom infoWindow(via the infoWindow-option of the DirectionsRenderer ), listen to the domready-event of the InfoWindow and modify the content....but this InfoWindow will also be used by the origin/destination-markers, there is no way to differentiate these markers from waypoint-markers.
The best you can do is to use the suppressMarkers-option to hide the automatically generated markers, and create the markers on your own based on the DirectionsResult.
I'm new to Google Maps API, and have been looking for ways to customize the markers. The API provided only allows me to change icons but what I actually need is to pass HTML content to the marker. I want to pass some data e.g.numbers to the marker, and when user clicks the marker, more details will show inside infoWindow. (something like this website)
At first, I thought it would be something like Instagram Photo Map, you have a summary of photos within a region. But then I realize that's more like a markerClusterer which simply counts the total number of markers within the range (correct me if I'm wrong).
I still couldn't find any way to display customized data on the marker. Is there any plugin I can use if no default API available?
P.S. first time posting a question, hope it's clear! highly appreciate your help!!!!
Basically what you see on the linked map are not real google.maps.Markers, you see Custom Overlays. With a custom overlay you may draw any HTML-content on the map, e.g. these labels.
You may either use the build-in methods to draw these overlays, or use a library like infobox
You can customise markers using styledmarker library. This library is used to create Markers that can be styled in different ways, such as changing the color or shape, or adding text labels. Below is an example of how to use this library with XML.
for (var i = 0; i < markers.length; i++) {
var text = markers[i].getAttribute("text");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var styleMaker = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:"00ff00",text:text}),position:myLatLng,map:map});
}
I have a DEMO using this with a database of 2 tables state centroids and cities in USA using XML . The marker shows the state and number of cities in state.
I have many different KML layers on a Google Map (v3). Random colors of markers were assigned to each set of markers. I would like to be able to control this, however.
So far, this is what I have:
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var kmlLayerOptions = { preserveViewport: true, suppressInfoWindows: true };
var Layer1 = new google.maps.KmlLayer('http://myurl.com/1.xml', kmlLayerOptions);
Layer1.setMap(map);
var Layer2 = new google.maps.KmlLayer('http://myurl.com/2.xml', kmlLayerOptions);
Layer2.setMap(map);
I need to be able to say I want Layer 1 to use blue markers and layer 2 to use red markers, but I can't seem to figure this out.
From what I can tell, there is no way to do this with the kmlLayerOptions, which is where it would seem like it would happen, so I don't see where else I could logically make this change other than directly on the layer object.
You can't change it with KmlLayer (at least currently, you could create an Enhancement request to add the functionality).
You can do it with FusionTablesLayers (import your KML into FusionTables, then use either the User Interface to set the icons or dynamic styling in the Google Maps API v3 (assuming you need less than 5 different icons, and the ones you want are available in FusionTables).
A final option would be to edit the existing KML to use the icons you want.
The KmlLayer renders according to the styling in the KML document itself, and you cannot override this in any layer options.
If you don't want to modify the KML itself, you could use a third party library such as http://code.google.com/p/geoxml3/ to render the KML on the clientside rather than having Google's servers render it, and this would give you the ability to override the rendering defaults.
Is there a way to get all the markers on Google Maps?
If you mean "how can I get a reference to all markers on a given map" - then I think the answer is "Sorry, you have to do it yourself". I don't think there is any handy "maps.getMarkers()" type function: you have to keep your own references as the points are created:
var allMarkers = [];
....
// Create some markers
for(var i = 0; i < 10; i++) {
var marker = new google.maps.Marker({...});
allMarkers.push(marker);
}
...
Then you can loop over the allMarkers array to and do whatever you need to do.
The one way found is to use the geoXML3 library which is suitable for usage along with KML processor Version 3 of the Google Maps JavaScript API.
I'm assuming you have multiple markers that you wish to display on a google map.
The solution is two parts, one to create and populate an array containing all the details of the markers, then a second to loop through all entries in the array to create each marker.
Not know what environment you're using, it's a little difficult to provide specific help.
My best advice is to take a look at this article & accepted answer to understand the principals of creating a map with multiple markers:
Display multiple markers on a map with their own info windows
If you are using JQuery Google map plug-in then below code will work for you -
var markers = $('#map_canvas').gmap('get','markers');
For an specific cluster use:
getMarkers() Gets the array of markers in the clusterer.
For all the markers in the map use:
getTotalMarkers() Gets the array of markers in the clusterer.
Google Maps API v3:
I initialized Google Map and added markers to it. Later, I wanted to retrieve all markers and did it simply by accessing the map property "markers".
var map = new GMaps({
div: '#map',
lat: 40.730610,
lng: -73.935242,
});
var myMarkers = map.markers;
You can loop over it and access all Marker methods listed at Google Maps Reference.