This is my first time posting here. I am new in working with Javascript or Google Maps API. I have a map with one KML layer, and I want to create a checkbox that will turn the layer on or off when clicked. I have seen a lot of examples on the web, but nothing seems to work in my application. Here is the code:
(function() {
window.onload = function() {
var options = {
center: new google.maps.LatLng(44.65, 22.64),
zoom: 10,
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: true,
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.TERRAIN
]
},
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById('map'), options);
var kmlUrl = 'http://googledrive.com/host/0B55_4P6vMjhITEU4Ym9iVG8yZUU/trasee.kml';
var kmlOptions = {
suppressInfoWindows: false,
preserveViewport: false,
};
var trasee = new google.maps.KmlLayer(kmlUrl, kmlOptions).setMap(map);
}
})();
I have no idea what function to create to toggle the visibility of the layer, altough I've created a checkbox in the HTML file:
<input type="checkbox" id="straturi" onClick="togglefunction()" />
Could you give me any advice?
Best regards,
Alexandru
The toggle function should be something like
var toggleKml=function(layer) {
if(layer.getMap()===null) {
layer.setMap(map)
} else {
layer.setMap(null)
}
};
And it needs to be defined in the same context as map and trasee, otherwise it won't see those objects. In your case, you would call it with trasee as parameter
toggleKml(trasee);
Related
I have a system using google maps api v3, the system is quite big with various javascript modules that I load. Now I found a tricky thing: if I set the map options with setOptions, previous setting is deleted:
I.e., if one of my modules needs to change the position of the map selector:
my_map.setOptions({ mapTypeControlOptions:
{ position: google.maps.ControlPosition.TOP_RIGHT }
});
it will reset settings of another module, which is adding new map types!! :
my_map.setOptions({ mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.TERRAIN,
'OSM',
'OCM'
]
})
I was thinking of a workaround which would get the current options, merged in the new ones and then run setOptions. But there is no clean way to get the google.maps.Map options!
This really seem to suck... this really tempts me to refrain to direct object modification as I asked in another question, but that could be dangerous, right? But it's really hard to program in a clean way with Google maps api v3!!
Any solutions, thoughts, workarounds?
What I usually do is have my maps options stored somewhere where I could retrieve them and changed them as needed before setting them back. You could either use a global JS variable of local storage for that purpose. For instance:
var myOptions = { zoom : 12};
map.setOptions(myOptions);
...
myOptions.mapTypeControlOptions = {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.TERRAIN,
'OSM',
'OCM'
]};
map.setOptions(myOptions);
Indeed, Google Maps options are not getting preserved in that case. But you could consider the following workaround .
Even though google.maps.Map class does not expose accessor for MapTypeControlOptions property you could still access it (and therefore modify it) using the below approach:
var options = map.mapTypeControlOptions; //undocumented
The below example demonstrates how to preserve Google Maps options:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: { lat: -28.643387, lng: 153.612224 },
mapTypeControl: true
});
printInfo('Settting map type control options...')
setMapTypeControlOptions(map);
var before = JSON.stringify(map.mapTypeControlOptions);
printInfo('Before:' + before);
printInfo('Setting map type control options position..');
setMapTypeControlOptionsPosition(map,google.maps.ControlPosition.TOP_RIGHT);
var after = JSON.stringify(map.mapTypeControlOptions);
printInfo('After:' + after);
}
function setMapTypeControlOptions(map) {
map.setOptions({
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.TERRAIN
]
},
mapTypeId: google.maps.MapTypeId.TERRAIN,
});
}
function setMapTypeControlOptionsPosition(map,value){
/*map.setOptions({
mapTypeControlOptions:
{ position: value }
});*/
var options = map.mapTypeControlOptions;
options.position = value;
}
function printInfo(s){
//console.log(s);
document.getElementById('output').innerHTML += s + '<br/>';
}
html, body {
height: 220px;
margin: 0;
padding: 0;
}
#map {
height: 220px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap" async defer>
</script>
<div id='output'/>
Trying to add a marker into a google map from a hidden variable on page load. Is this possible to do based on the address rather than the coordinates?
Code is:
var place = $('#hidden-place').val();
var markers = [];
var mapOptions = {
zoom: 15,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById('google-map'),
mapOptions);
You could use the Geocoding service in the API - take a look at this example https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
In that example it lets you use a free form address and plots the first matching result as a marker.
This would get you started at least.
I have written something similar to this in the past using an older version of the google maps api I want to add some geocoding with some autocomplete using the api3. But my map won't even load in. The map will load in only if I take the map options and the geocoder off. Why is this?
function mapLoad(){
jQuery(function($) {
$('#map').animate({height:300,width:300,opacity:1},1500);
});
var mapOptions = {
center: new google.maps.LatLng(57.698254, 12.037024),
zoom: 16,
mapTypeId: google.maps.MapTypeId.HYBRID,
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true
};
// Define map
map = new google.maps.Map(document.getElementById("map"),mapOptions);
// Define Gecoder
geocoder = new google.maps.Geocoder();
window.alert("no errors with map load");
}
EDITED neither the geocoder or the options work
i used this as a reference purely because it looks simple.
Where are you calling mapLoad? I assume in body onload. I setup this jsbin without issue. Does it help?
I have a mapping page which retrieves a json response and creates the relevant array of points to load a heatmap.
All of this is in the required initialize query which is loaded is called in a jquery document.ready.
Here is the strange thing though, all the external data is returning fine and being populated fine, the points array is fine also.
However when I call the setMap(map) method on the heatmap it does not display. But weirdly if I use an on page link to toggle it on or off it will display. Any ideas?? No errors at all in firebug.
var map;
var markers = [];
var markerLatLngArray = [];
function toggleHeatmap() {
heatmap.setMap(heatmap.getMap() ? null : map);
}
function initialize() {
var map_options = {
center: new google.maps.LatLng(53.4902, -7.96),
zoom: 7,
mapTypeId: google.maps.MapTypeId.TERRAIN,
draggableCursor: 'crosshair',
mapTypeControl: true,
scaleControl: true,
streetViewControl: false,
overviewMapControl: false,
overviewMapControlOptions: {
opened: false
}
};
map = new google.maps.Map(document.getElementById('map_canvas'), map_options);
google.maps.event.addListenerOnce(map, 'idle', function(){
document.getElementById('ajax_loading_icon').style.display = "none";
document.getElementById('map_canvas').style.visibility = "visible";
});
jQuery.get("<?php echo $data_url; ?>", {}, function(data) {
jQuery(data).find("marker").each(function() {
var marker = jQuery(this);
var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")),
parseFloat(marker.attr("long")));
markerLatLngArray.push(latlng);
});
});
pointArray = new google.maps.MVCArray(markerLatLngArray);
heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
});
heatmap.setMap(map);
}
It is a timing problem. The map is not initialized until after heatmap.setMap is called.
I was messing about with some code but I am struggling a little bit to achieve what I want. In the example here I have a map which displays when there are coordinates in my fields:
http://jsfiddle.net/spadez/xJhmk/9/
// Generic Map Display
function mapDisplay() {
var latval = $('#lat').val(),
lngval = $('#lng').val();
if ($.trim(latval) != '' && $.trim(lngval) != '') {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(latval, lngval),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
scrollwheel: false,
draggable: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
$('#map_canvas').removeClass('hidden');
} else {
$('#map_canvas').addClass('hidden');
}
}
What I want to do is have this execute once per page, so that if there are values in the fields when the page loads then the map displays, but if the values get deleted after the page load or changes, the map will not change, since it read the variables at the start of ther page load only.
Can someone show me on my jsfiddle how that might be displayed please?
You are not calling the function mapDisplay();, on document ready call mapDisplay
jQuery(function($){
mapDisplay();
})
Demo: Fiddle
window.onload = function(){
mapDisplay();
}
This runs your code on the onload event
Use:
$(function()
{
mapDisplay();
}
// Generic Map Display
function mapDisplay() {
var latval = $('#lat').val(),
lngval = $('#lng').val();
if ($.trim(latval) != '' && $.trim(lngval) != '') {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(latval, lngval),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
scrollwheel: false,
draggable: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
$('#map_canvas').removeClass('hidden');
} else {
$('#map_canvas').addClass('hidden');
}
}
You declare a function, and after page is loaded (the $(function() {} ), it is executed.