I am looking for numbered markers.
and manually creating marker numbered from 1-1000 is quite laborious.
Is there are better way to upload an image and the program generated 1000 images from that numbered from 1 to 1000
You can use Dynamic Icons of Google Chart API, and get customized markers for your map.
You can use for example this pattern for marker's icon:
https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=*number*|FF776B|000000
and the usage could be this:
var number = 15; //
var marker = new google.maps.Marker({
position: latlngOfMarker,
map: map,
icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+number+'|FF776B|000000'
});
The icon will be like this:
However, note that the service is deprecated ,and it will not be suitable for long term projects.
Here are some options:
MarkerWithLabel
numbered markers from 0 - 300 (found with a little googling)
numbered markers from 0 - 999 (more googling)
Related
I am fairly new to Google Maps- how do I make a google maps AirBnB type marker? I am setting my markers fine, I just need to be able to create a rectangle with a background with text in it like the picture...
I have a "price" variable I can set as well.
Here's my code:
var marker = new google.maps.Marker({
position : latlng,
map : map,
label: {
text: price, // $100,000
color: 'white'
}
});
A marker Label is typically a letter or number that appears in the marker. You can put more than one letter or number, but the marker won't resize automatically to fit the text. One possible solution would be using an infowindow to display the information you want. There is some good documentation on infowindows here:
https://developers.google.com/maps/documentation/javascript/infowindows
Another alternative would be to use custom markers:
https://developers.google.com/maps/documentation/javascript/custom-markers
Google allows you to use custom markers instead of the default ones, you can follow the instructions for simple marker icons here:
https://developers.google.com/maps/documentation/javascript/markers#simple_icons
The only drawback with the custom icons is if you are listing price information like in the image you posted, you will need a custom icon for each price.
I hope this helps!
I want to create a google map marker which has an animating gif.I know google maps has 2 animation drop and bounce.I want to create one except those.Is is possible to do this. Could you lead a way?
Thanks in advance.
Per docs, in google.maps.MarkerOptions you can pass optimized: false if you want to use gif as marker icon:
optimized Type: boolean
Optimization renders many markers as a single
static element. Optimized rendering is enabled by default. Disable
optimized rendering for animated GIFs or PNGs, or when each marker
must be rendered as a separate DOM element (advanced usage only).
var marker = new google.maps.Marker(
{
position: myLatLng,
map: map,
optimized: false,
icon: "http://preloaders.net/preloaders/489/Classic%20map%20marker-32.gif"
});
JS fiddle: http://jsfiddle.net/T78Hd/138/
I am trying to decide if the Google Maps API is the right tool to use for me.
I have a list of places I'd like to display on a map (a map of Italy)
and I'd like that:
The map doesn't show any other label but mines, and
My places are shown as labels on the map, without any icon/pin
I saw (e.g. Changing markers icons in Google Maps application) that you can change the pin icons, but I'd like not to have any.
Style the map to remove all other labels - I like using this wizard. Note the 'More Options' link in the bottom left gives many more customization options.
To create markers with only labels, not pins, you'll need a transparent PNG to use for the marker icon. I used a 20x20 one. Tweak the icon anchor to move the label to the right spot, I found 7,7 to be reasonable. For more about custom icons, see the docs.
var marker = new google.maps.Marker({
position: markerPosition,
map: map,
icon: {
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(7, 7),
url: transparentIconURL
},
label: '1'
});
You can use a styled map with the Google Maps API v3 (or a completely custom map with your own tiles)
If you just want text labels for your places, look at the InfoBox library (this example).
See related question: google maps custom local search / search control
I know I can create Custom Locations and Information Windows in a Google Map
e.g. http://code.google.com/apis/ajax/playground/#info_windows_sharing_v3
And I understand that Local Search can find near-by places (public ones)
e.g. http://code.google.com/apis/ajax/playground/#localsearch_with_markers
However my question is simple: how do I combine both?
How do I enable the same as the local/places search functionality but only on custom marker locations (e.g. my own location data rather than Google's places/local data)?
For example, if I have a set of custom location data/markers (not published to Google Places), how to allow the user to find a list of near by custom places relative to an address or his/her current location?
The Local Search API is deprecated, so you should probably look into moving to the Places API.
In either case, all you need to do is query the (Search or) Places API, extract LatLngs from the results and place your markers on the map.
I'm not sure what you mean with custom markers, I'd guess either (a) using each result's own icon as the marker's icon or (b) let users search among your data (markers) instead of Google's Local/Places.
(a) is kinda easy with the Places Library. In the place-search.html example you'd add just one line to the createMarker() callback function:
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
icon: place.icon,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
Original icons looks big though, so you may want to scale them down.
(b) would be a different story, like Creating a Store Locator with PHP, MySQL & Google Maps.
Is there a way to get marker clustering (ie makerclusterer) to work with a Fusion Table layer? It seems that you have to assign markers to markerclusterer yet when using a fusion table layer, Google is handling the markers/infowindows? Still trying to figure this fusion table thing out.
Basically looking for a way to cluster large amounts of markers being provided via a Fusion Table
Fusion Table Layers render an additional png image for each tile that gets overlaid on top of the map tile, containing the data points for that tile, this is the server side rendering part. So it's multiple data points per tile that contains data points.
Generating your own markers from data, which is necessary for MarkerClusterer, doesn't overlay an image per tile, it creates an individual Marker on the map for each data point and overlays a sprite image on to that.
Based on this, it is not possible to use MarkerClusterer and a FusionTablesLayer.
This is my own code. I was trying the technique in the earlier link but it didn't work for me. So this is how i did it.
First i queried the fusion table with the regular chart api query
function initialize() {
mapMain = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(37.4, -100.1),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
mc = new MarkerClusterer(mapMain);
var queryText = encodeURIComponent("select wikipedia_article, xy from "+tableid);
var query = new google.visualization.Query("https://www.google.com/fusiontables/gvizdata?tq="+queryText);
query.send(handleQueryResponse);
}
Next, in my handleQueryResponse, I dynamically created markers and added it to the Mapclusterer
function handleQueryResponse(response){
dataTable = response.getDataTable();
for(var i=0; i< dataTable.getNumberOfRows();i++){
var hrefval = dataTable.getValue(i,0).toString();
var arr = dataTable.getValue(i,1).toString().split(" ");
var latlng = new google.maps.LatLng(arr[0], arr[1]);
var marker = new google.maps.Marker({
position: latlng,
map:mapMain
});
fn = markerClick(i, marker);
google.maps.event.addListener(marker,'click', fn);
markers.push(marker);
}
mc.addMarkers(markers);
}
In this case, the main map, the array of markers (mc in the code below) are global variables. You can see the full working example here.
I don't think you will get it work with a fusion table. IMO the fusion table is lacking the support for a spatial index. A si helps reduce the 2d complexity to a 1d complexity. It's uses in a lot of applications like heatmaps, treemaps, post code search, maps application. You want to look for Nick's hilbert curve spatial index quadtree blog.
Fusion Tables allows you to view thousands of points at once by using server side rendering (from the google servers). Marker Clusterer solves the problem by building a set of clusters from nearest points (from the clients browser). I wouldn't necessarily use them both at the same time, but it might work for your use case it's up to you.
You can read more information about how they work here:
http://code.google.com/apis/maps/articles/toomanymarkers.html
If you really wanted too you could use the Fusion Tables API to feed the data from Fusion Tables to the Marker Clusterer.
Hope this helps.