I have got a file which overlays the state of New South Wales' electoral boundaries onto a Google Map. The markers which popup on each electorate really interfere with the visuals of the map when zoomed out. I have found how to disable the info window, but can't work out how to turn the markers off all together.
Map example is here:
http://www.codepress.com.au/nsw_lower_house_map.html
With markers turned off, is there then a way to make the whole electorate polygon clickable to work with in JS?
To make polygons clickable bind an event listener to a layer after you add layer to the map
ctaLayer.setMap(map);
google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.name;
alert(text);
})
The above will alert the name of the feature that you clicked on (providing the name is set in KML). PLEASE NOTE: for polygons to be "usefully" click able they need a fill to be set. Your KML file does not have the fill so the only area click able will be the border of the polygon. You will need to set the fill to make this feature useful.
In general The KML feature object returns the following data:
{
author: {
email: "nobody#google.com",
name: "Mr Nobody",
uri: "http://example.com"
},
description: "description",
id: "id",
infoWindowHtml: "html",
name: "name",
snippet: "snippet"
}
Again - providing these are set in KML
To get rid of the markers you will need to modify the KML and remove all Placemarks and their containing Folder which have no polygons specified in them - only Point data (which is rendered as a marker). Make sure you re-validate your XML after deletion.
Here is your file without the markers http://www.mediafire.com/?f9ewd0c5ymk3ccv . However you will need to make sure that your polys have fill set otherwise you will only be able to click on the borders.
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 need to draw some graphics over google maps. Graphics is not always transparent, so I'd like to draw text labels (country names, city names, etc.) over my graphics.
For graphics I use overlay map type , it is shown over base map. But I failed to draw labels over it?
I guessed that there shall be a way to draw base map twice, with different style settings (so I style map with not labels, put my overlay, and then put overlay with roadmap with labels only), but it does not seem like I can use basic map types as overlay ones. Another way I see is to manually get tile with labels only by composing URL. This works, but as far as I understand accessing map tiles directly is prohibited by ToS.
Is there a working and, well, legal way to do that?
Here is jsfiddle which illustrates URL composing solution: https://jsfiddle.net/GRaAL/jyr81p2c/
// here is how I get google maps tile with labels only
function getLabelsOnlyTile(coord, zoom) {
return "https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i" + zoom + "!2i" + (coord.x) + "!3i" + (coord.y) + "!4i512!2m3!1e0!2sm!3i353022921!3m14!2sen!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC52Om9mZixzLmU6bHxwLnY6b24!4e0";
}
I found that StyledMapType could be used as overlay map type (have same interfaces), so I created StyledMapType with labels only and instead of registering it in map type registry just added it as overlay, this way:
var onlyLabels = new google.maps.StyledMapType([...], {name: 'labels'});
//draw useful data over map
map.overlayMapTypes.insertAt(0, new UsefulDataOverlay());
//and then draw labels over it
map.overlayMapTypes.insertAt(1, onlyLabels);
Full working example is here: https://jsfiddle.net/GRaAL/jyr81p2c/2/
You might want to check MapLabel for Google Maps V3:
This library allows text to be added to the map at a particular location. Note that the user's browser must support Canvas for the label to be displayed.
MapLabel class
This class extends OverlayView.
Note that browser <canvas> support is required for the label to be displayed. Analytics
Source:
https://github.com/googlemaps/js-map-label
How to add text label in Google Map API
Hope this helps
This question already has an answer here:
Can the Google Maps API base map be used as an overlay above a custom map layer?
(1 answer)
Closed 7 years ago.
I have an image overlay that displays high-resolution imagery over the selected Google map (See an example of this in the Google API Examples). When in satellite view, this works very well. However, when the user switches to the hybrid view, I noticed that none of the labels or streets are shown over my map overlay. Does anyone know a way to get the streets and labels to be displayed on top of my map overlay?
-- BEGIN EDIT --
I did find a similar question here. However, I can't figure out how to not get a duplicate data street/label layer on the portion of the map where my custom overlay has no imagery. If this is the best solution, then is there a way to hide the labels when the selected map type id is HYBRID?
I think you need to do two things:
Add your custom tiles as the base map layer
Add a StyledMapType with labels only to the overlayMapTypes of your map
Adding custom tiles as the base map layer
Refer to this example to create an ImageMapType, which I'm guessing is what you want in order to use your own custom map type tiles.
Adding a StyledMapType with labels only
You can create a StyledMapType:
var featureOpts = [{
elementType: 'geometry'
stylers: [
{ visibility: 'off' }
]
}];
var labelsOnlyMapType = new google.maps.StyledMapType(featureOpts, {
name: 'Labels Only'
});
You can then put it into the Map's overlayMapTypes.
// assuming you made a Map called 'map'
map.overlayMapTypes.insertAt(0, labelsOnlyMapType);
I'm just going by what I think should happen here, but what you should end up with is
your tiles on the bottom as the base map
the StyledMapType with labels only appearing on top of the map
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.
I'm working on a project where, after creating some nice code for creating polygons and attaching mouse events to them, the addition of KML layers (mainly placemarkers) results in uncooperative behaviour between the placeholders of the KML layer and the generated polygons.
If I create the polygons first and set the KML file afterwards, clicking on the placemarkers brings up the infowindow () as expected. However, mouseovers on the polygons below yield no result, whereas before they get highlighted and are clickable (which they aren't).
Setting the KML layer to null doesn't help either. The placemarkers disappear, but my polygons aren't registering.
When I first call the KML with placemarkers, the polygon layer called later goes on top of the placemarkers. The polygons are opaque, so you can see the placemarkers like you could through a window, but you can't click or interact with the placemarkers.
Setting the polygons to null results in the same behaviour as before. Placeholders still cannot be clicked on.
Help? I couldn't find a zIndex reference for the KML layer code, and I'm hoping that's all it is. I read somewhere else - and imagine this to be true - that the KML and user-gernated content "layers" are conflicting with one another - the latter one that's put on the map takes focus, captures events, etc. I would've thought that it wouldn't matter, in the same way that you can have divs on top of other divs, especially if you use indexing.
If you simply want to display the information in the KML layer and not have it react to user events, you can add the suppressInfoWindows flag to the constructor:
var myKmlLayer = new google.maps.KmlLayer('http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml', { suppressInfoWindows: true });
This will effectively shut off all interactions and let your other layers receive interactions.
Edit: Forgot to mention that a good source of information is the Google API V3 site discussing KML layers