I have a google maps where I can click on the map and markers appear:
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID,
draggableCursor: 'crosshair',
draggable: true,
panControl: true,
zoomControl: true,
scaleControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Wherever I click, a function gets called to do some work (add markers).
I've been asked to add a kml layer:
var url = window.location.protocol + "//" + window.location.host + "/data/polygon.cfm?TYPE=GEOID&VALUE=" + getUrlVars()["GEOID"] + "&LC=641400FF&LW=3&FC=14F11C2E&F=1&FO=1";
var kmlLayer = new google.maps.KmlLayer(url, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
now, once the kml layer is added, the "crosshair" is gone, and I can't click on the map anymore. Is there a setting in the kmlLayer that I can set that "ignores" the layer while still displaying it?
Thanks.
Change your KML initialization code from:
var kmlLayer = new google.maps.KmlLayer(url, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
to
var ctaLayer = new google.maps.KmlLayer(
{
url: url,
suppressInfoWindows: true,
map:map,
zindex: 0,
clickable : false
});
Here is a fiddle: http://jsfiddle.net/loanburger/jnrnmog4/ You can click the map and the marker which is over the KML
The key being the clickable = false property on the KML Layer option
Related
On one of my webpages there a Google V3 API map upon which I add four KML layers.
Sometimes all four KML Layers will be displayed, but more often or not, only two or three layers are loaded. It is the last KML layer that loads less frequently. Refreshing the page will load more.
Here's my javascript
function initializeGoogleMap()
{
var mapOptions = {
center: { lat: 45.325, lng: 14.254},
zoom: 12,
panControl: false,
zoomControl: false,
mapTypeControl: true,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/PlacesOPOV1c.kml",map: map, preserveViewport: true});
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/RoutesEdgeV1k.kml",map: map,preserveViewport: true});
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/RoutesFillV1k.kml",map: map,preserveViewport: true});
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/RoutesOPOV1n.kml",map: map,preserveViewport: true});
}
Presumably the KML files are to taking too long to download and are not available in time to be added to the map.
What can I do to resolve this?
So for clarity, here's the final solution
function initializeGoogleMap()
{
var mapOptions = {
center: { lat: 45.325, lng: 14.254},
zoom: 12,
panControl: false,
zoomControl: false,
mapTypeControl: true,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/PlacesOPOV1c.kml", map: map, zIndex: 0, preserveViewport: true});
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/RoutesEdgeV1k.kml", map: map, zIndex: 1, preserveViewport: true});
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/RoutesFillV1k.kml", map: map, zIndex: 2, preserveViewport: true});
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/RoutesOPOV1n.kml", map: map, zIndex: 3, preserveViewport: true});
}
<script type="text/javascript">
function initMap() {
// Map
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.000000,-40.000000),
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false,
scrollwheel: false,
disableDefaultUI: true,
disableDoubleClickZoom: true
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
// Markers
var madrid = new google.maps.Marker({
position: google.maps.LatLng(40.412154, -3.704301),
map: map,
title: 'Madrid'
});
madrid.setMap(map);
}
</script>
I am trying to put some markers on the map of certain cities. I can not seem to make the makers apear. I have looked through several forums, and tried everything.
I hope this is enough information. I am still very new to stack overflow, so If I did this wrong, please let me know how to post a question more clearly.
Thank you,
You are missing the new keyword for position parameter while creating marker, please check the below code, it should work.
function initMap() {
// Map
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.000000, -40.000000),
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false,
scrollwheel: false,
disableDefaultUI: true,
disableDoubleClickZoom: true
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
// Markers
var madrid = new google.maps.Marker({
position: new google.maps.LatLng(40.412154, -3.704301),
map: map,
title: 'Madrid'
});
madrid.setMap(map);
}
Does anyone know the way to prevent the repeating property of circle in every clone part of google map.
In google.Maps API I found the similar option of marker it's: optimized property set to false.
The parts of my code:
this.map = new google.maps.Map(this.el, {
zoom: 4,
center: new google.maps.LatLng(33.2169, -97.1336),
disableDefaultUI: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
mapTypeControl: true,
mapTypeControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
});
this.circle = new google.maps.Circle({
center: new google.maps.LatLng(33.2169, -97.1336),
radius: 1609344,
strokeWeight: 1,
strokeColor: "#e64646",
draggable: true,
editable: true,
visible: false,
map: this.map
});
I'm updating the marker on my google map with new positions constantly from the server. The positions are stored in the variables called Longitude and Latitude. I managed to get the markers moving to the new positions but the map constantly refreshes. What can I do to stop this from happening? I only want the markers to move.
google.maps.visualRefresh = true;
//in my actual code the coordinates aren't var lat and lon
var myLatlng = new google.maps.LatLng(lat,lon);
var mapOptions = {
zoom: 15,
center: myLatlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.trigger(map, 'resize');
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
var latlng = new google.maps.LatLng(Latitude,Longitude);
marker.setPosition(latlng);
//map.setCenter(latlng);
//covertlisten.remove();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Get rid of
map.setCenter(latlng);
I have following Demo where I try to draw Polygon by using Google maps v3.
But when I try to draw Polygon its invisible till I change map center.
Do I need repaint it somehow?
Here is the code:
var map2;
function linesmap(){
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(51.425, -0.955),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// map2 = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var options = {
zoom: 14,
center: new google.maps.LatLng(51.425, -0.955),
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false,
scrollwheel: true,
draggable: true,
rotateControl: false,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
zoomControl: true,
disableDoubleClickZoom: false
};
map2 = new google.maps.Map(document.getElementById("map_canvas"), options);
buildDrawManager();
}
var buildDrawManager = function(){
console.log('buildDrawManager');
// Creates a drawing manager attached to the map that allows the user to draw
// markers, lines, and shapes.
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: null,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.POLYGON
]
},
polygonOptions: {
fillColor: '#1E90FF',
strokeWeight: 0,
fillOpacity: 0.3,
editable: true
},
map: map2
});
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) { });
}
[EDIT]
It happens on Chrome version 32.0.1700.76
#fessy Your fix doesn't seem to be working for me. I was able to get it working by touching the zoom level. You don't event notice it happen.
document.getElementById("map_canvas").onclick = function(){
if(drawingManager.getDrawingMode() !== google.maps.drawing.OverlayType.HAND){
map2.setZoom(map2.getZoom() + 1);
map2.setZoom(map2.getZoom() - 1);
}
};
http://plnkr.co/edit/TP8TIjvdRHHOyg6NKQWc?p=preview
Thanks to #geocodezip that posted workaround to solve this issue.
Here is a fix:
Changed version
https://maps.googleapis.com/maps/api/js?sensor=false&v=3&libraries=geometry,visualization,drawing
to exp.:
https://maps.googleapis.com/maps/api/js?sensor=false&v=3.exp&libraries=geometry,visualization,drawing
and Plunker with fix