Question
Why doesn't changing the zIndex values for my KML layers change which layer is plotted on top?
Working example
According to the documentation the KmlLayerOptionsIterface has a zIndex property.
However, in this example, no matter which layer I set as zIndex: 1 and zIndex: 2, the circles are always displayed on top of the polygons
var map;
var kml1 = 'http://www.energy.ca.gov/maps/renewable/BuildingClimateZonesMap.kmz';
var kml2 = 'http://www.energy.ca.gov/maps/renewable/renewable_development.kmz';
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-19.257753, 146.823688),
zoom: 2
});
var kmlLayer1 = new google.maps.KmlLayer(kml1, {
suppressInfoWindows: true,
preserveViewport: false,
map: map,
zIndex: 2
});
var kmlLayer2 = new google.maps.KmlLayer(kml2, {
suppressInfoWindows: true,
preserveViewport: false,
map: map,
zIndex: 1
});
}
Working JSFIddle
Should changing the zIndex values change which layer is displayed on top?
Related
I am wanting to put my own custom label over certain places on a map, take for example the image below where there is text for Albert Park Lake which is not associated with a place marker. This is an example of what I am wanting to do as I am designing an app that has a number of regions and I wanting to put the names of those regions on the map which will only be visible at certain zoom levels as to ensure there is no clutter when being viewed by the user. I had experimented with place markers but found that the text being on top of the marker was bad look and I would have had to write a function to adjust the text visibility for the zoom level to deal with the clutter of many being on the screen at once.
Cheers Jordan Smith
I suggest to convert the text you want to set to bitmap image and set this bitmap as custom marker, you may find this question useful if you want to know how to convert text to bitmap.
Here are a few things you could try:
1. Pop up multiple infowindows: https://jsfiddle.net/kjqfs0bo/
function initMap() {
const uluru = { lat: -25.363, lng: 131.044 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: uluru,
});
const contentString ="lalala";
const infowindow = new google.maps.InfoWindow({
content: contentString,
});
const infowindow2 = new google.maps.InfoWindow({
content: contentString,
});
const marker = new google.maps.Marker({
position: uluru,
map,
title: "Uluru (Ayers Rock)",
});
const marker2 = new google.maps.Marker({
position: { lat: -20.363, lng: 130.044 },
map,
title: "Uluru (Ayers Rock)",
});
infowindow.open(map, marker);
infowindow2.open(map, marker2);
}
2. Invisible markers with text label: https://jsfiddle.net/0koynbz2/1/
function createMarker() {
var canvas, context;
canvas = document.createElement("canvas");
return canvas.toDataURL();
}
var map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 13,
center: new google.maps.LatLng(56.1304, -106.3468),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(56.1304, -106.3468),
map: map,
icon: {
url: createMarker()
},
label: {
text: 'My Place',
color: '#000',
fontSize: '14px',
fontWeight: 'bold'
}
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(56.1204, -106.3468),
map: map,
icon: {
url: createMarker()
},
label: {
text: 'My Place2',
color: '#000',
fontSize: '14px',
fontWeight: 'bold'
}
});
3. Maybe try geojson, but since geojson only supports point, line and polygon. I'm not sure if there is a way to display text only.
this is code i use to initialize the map, nothing special.
function initializeMap() {
var mapArray = document.getElementById("latLong").value.split("_");
var latLng = new google.maps.LatLng(mapArray[0], mapArray[1]);
var mapOptions = {
center: latLng,
zoom: 10,
tilt: 30,
zoomControl: true,
panControl: false,
streetViewControl: true
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({ position: latLng, map: map, title: mapArray[2] });
}
latitude is -39.3455 and longitude is -8.0554. however when the map displays the marker is in the middle of the ocean, where point 0,0 is. Why is this happening? I tried a few browsers, nothing different. I tried to hardcode the values from a google example showing canada and I did see canada, however it does not want to work with my values.
Usually 0,0 will be displayed when the coordinates are not valid. Try to switch the order, maybe you made a mistake there.
in the following code generated an undetermined number of markers, this works well.
for(i=0;i<idr.length;i++){
var LatLng = new google.maps.LatLng(lat[i], lng[i]);
m[i] = new google.maps.Marker({
position: LatLng,
icon: image,
map: map,
draggable: false,
val: idr[i]
});
}
I want to get the properties of the corresponding marker when the mouse passes over this
This does not apply for you should create a function for each marker and can not be that many
This function only access the first marker
google.maps.event.addListener(m[0], "click", function(e) {
var latitud = e.latLng.lat();
alert(latitud);
});
use this inside the callback to get access to the current marker(m[i] will not work there, because it will always refer to the last created marker)
google.maps.event.addListener(m[i], 'mouseover', function() {
alert(this.val)
});
for(i=0;i<idr.length;i++){
var LatLng = new google.maps.LatLng(lat[i], lng[i]);
m[i] = new google.maps.Marker({
position: LatLng,
icon: image,
map: map,
draggable: false,
val: idr[i]
});
google.maps.event.addListener(m[i], 'mouseover', function() {
//Do stuff
});
}
The above is how I would do it.
API v3
I have a strange issue with a marker:
The marker that I place on the map is set to be draggable, WebInspector reports it as being draggable, but I still can't drag it. The cursor doesn't change when I go over the marker.
The underlying map is draggable, and that works.
On another page, with a different setup (less layers), but the same javascript, it works as expected (so there I can drag it).
I also made the marker clickable and bound an event to it, and that works fine. The cursor changes as well on mouseover.
I have run out of options.... Why can I not drag it? Can this have to do with some zIndex or layer positioning? As far as I can see, the map has a higher zIndex than all the other layers....
// display map
geocoder.geocode( { 'address':address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// map options
var mapOptions = {
zoom: 14,
center: results[0].geometry.location,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
// render map
map = new google.maps.Map(J('#'+mapElementId)[0], mapOptions);
// set marker
marker = new google.maps.Marker({
clickable: true,
draggable: true,
icon: markerImage,
shadow: markerShadow,
shape: markerShape,
map: map,
position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'click', function () { alert('marker clicked'); });
google.maps.event.addListener(marker, 'dragend', function () {
alert('marker dragged')
map.setCenter(marker.getPosition());
J('input[name=coordinates]').val(marker.getPosition());
J('input[name=address]').val('');
});
J('input[name=address]').val(results[0].formatted_address);
}
});
you have draggable: false,.
change it to true
see it working here: http://jsfiddle.net/RASG/vA4eQ/
Try this:
map.setOptions({draggable: true});
I have a map in which I apply a custom overlay using KMbox overlay to signify where I think the users general point of interest lies. What I want is to display this map to the user and allow them to click on the map to give me an exact location match of their POI.
This all works fine except for when the user clicks on the map and changes the zoom of the map.
Here's my code to add the marker to the map.
function addMarker(location) {
if(KmOverlay)
{
KmOverlay.remove();
}
if(last_marker)
{
last_marker.setMap(null);
}
marker = new google.maps.Marker({
position: location,
map: map
});
// Keep track for future unsetting...
last_marker = marker;
}
And to show the map I have this function.
function show_map(lt, ln, zoom, controls, marker)
{
var ltln = new google.maps.LatLng(lt, ln);
var vars = {
zoom: zoom,
center: ltln,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: controls,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN} ,
mapTypeControl: false,
scaleControl: false,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), vars);
KmOverlay = new KmBox(map, new google.maps.LatLng(lat, lon), KmOpts);
var totalBounds = new google.maps.LatLngBounds();
totalBounds.union(KmOverlay.getBounds());
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}
I have a working example at the following link here
fixed this by using the setMap() method on the KmOverlay and passing null as a parameter.
eg:
function addMarker(location) {
if(KmOverlay)
{
KmOverlay.setMap(null);
}