I have this code, I'm trying to toggle some kml layers. The problem is that when I click the marker it isn't showing the infowindow.
Maybe someone can show me my error.
Here is the CODE:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=IzaSyAvj6XNNPO8YPFbkVR8KcTl5LK1ByRHG1E&sensor=false">
</script>
<script type="text/javascript">
var map;
// lets define some vars to make things easier later
var kml = {
a: {
name: "Productores",
url: "https://maps.google.hn/maps/ms?authuser=0&vps=2&hl=es&ie=UTF8&msa=0&output=kml&msid=200984447026903306654.0004c934a224eca7c3ad4"
}
// keep adding more if you like
};
// initialize our goo
function initializeMap() {
var options = {
center: new google.maps.LatLng(13.324182,-87.080071),
zoom: 8,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), options);
createTogglers();
};
google.maps.event.addDomListener(window, 'load', initializeMap);
// the important function... kml[id].xxxxx refers back to the top
function toggleKML(checked, id) {
if (checked) {
var layer = new google.maps.KmlLayer(kml[id].url, {
preserveViewport: true,
suppressInfoWindows: true
});
// store kml as obj
kml[id].obj = layer;
kml[id].obj.setMap(map);
}
else {
kml[id].obj.setMap(null);
delete kml[id].obj;
}
};
// create the controls dynamically because it's easier, really
function createTogglers() {
var html = "<form><ul>";
for (var prop in kml) {
html += "<li id=\"selector-" + prop + "\"><input type='checkbox' id='" + prop + "'" +
" onclick='highlight(this,\"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/>" +
kml[prop].name + "<\/li>";
}
html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" +
"Remove all layers<\/a><\/li>" +
"<\/ul><\/form>";
document.getElementById("toggle_box").innerHTML = html;
};
function removeAll() {
for (var prop in kml) {
if (kml[prop].obj) {
kml[prop].obj.setMap(null);
delete kml[prop].obj;
}
}
};
// Append Class on Select
function highlight(box, listitem) {
var selected = 'selected';
var normal = 'normal';
document.getElementById(listitem).className = (box.checked ? selected: normal);
};
</script>
<style type="text/css">
.selected { font-weight: bold; }
</style>
</head>
<body>
<div id="map_canvas" style="width: 50%; height: 200px;"></div>
<div id="toggle_box" style="position: absolute; top: 200px; right: 1000px; padding: 20px; background: #fff; z-index: 5; "></div>
</body>
</html>
The "suppressInfoWindows:true" in the KmlLayerOptions in the KmlLayer constructor causes the infowindows to be suppressed.
Related
My objective right now is to basically add a marker wherever the user is in the google maps. The API works, a KML file I added with polygons work and i'm sure it doesn't mess with any of the code so far.
However, I have" Cannot read property 'setPosition' of undefined" error at line 99 of the code. it will probably have an easy solution but I cannot see it myself.
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAjp8cvAcEYCwzuCyTQORL3Z1iQPdQMg_8&callback=initMap" async defer>
</script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>Protoype: Just Don't</title>
<meta charset="utf-8">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
/* Style the buttons so that they are consistently coloured and sized */
.button {
background-color: #008CBA; /* Blue */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
/* Style the search box */
.search input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 16px;
font-size: 17px;
}
/* When the screen is less than 640px wide, stack the search field vertically instead of horizontally */
#media screen and (max-width: 640px) {
.search a, .search input[type=text] {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.search input[type=text] {
border: 1px solid #ccc;
}
}
</style>
</head>
<body>
<h3>Just don't app test</h3>
<div class="search">
<input type=text placeholder="Search..">
</div>
Settings
Account
Add Review
<div id="map"></div>
<script>
var map, infoWindow;
function initMap() {
InfoWindow = new google.maps.InfoWindow;
var Paisley = {lat: 55.845890, lng: -4.423741};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: Paisley
});
var kmlLayer = new google.maps.KmlLayer({
url: 'https://firebasestorage.googleapis.com/v0/b/just-don-t.appspot.com/o/Project%20examples.kml?alt=media&token=65140cfc-de3a-4658-8b2b-0354f4909d38',
suppressInfoWindows: true,
map: map
});
kmlLayer.addListener('click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
;
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition (pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
</script>
</body>
Any tips on how to solve it or if you find another problem in my code will be greatly appreciated.
The main issue I believe was the mismatch in variable names. Initially you declared InfoWindow when creating the reference but throughout thereafter refer to infoWindow. Additionally the functions showInContentWindow and handleLocationError needn't be declared within the initMap function.
The following works OK - but the geoLocation puts the Location found nowhere near Paisley for me ... the css here was just basic for testing.
Anyone would think Paisley was an unsafe place after dark judging by some of the descriptions that appear when clicking on the KML Layer - never saw much of Paisley when we used to go to 'Club69' back in the day...
<html>
<head>
<meta charset='utf-8' />
<title>Google Maps: KML Layer</title>
<script id='gm' async defer src="//maps.google.com/maps/api/js?key=AIzaSyAjp8cvAcEYCwzuCyTQORL3Z1iQPdQMg_8&callback=initMap®ion=en-GB&language=en"></script>
<script>
var infowindow, map, Paisley, kmlLayer;
var text, pos
function initMap(){
infowindow = new google.maps.InfoWindow;
Paisley = { lat: 55.845890, lng: -4.423741 };
map = new google.maps.Map( document.getElementById('map'), {
zoom: 17,
center: Paisley
});
kmlLayer = new google.maps.KmlLayer({
url: 'https://firebasestorage.googleapis.com/v0/b/just-don-t.appspot.com/o/Project%20examples.kml?alt=media&token=65140cfc-de3a-4658-8b2b-0354f4909d38',
suppressInfoWindows: true,
map: map
});
kmlLayer.addListener( 'click', function( event ) {
text = event.featureData.description;
showInContentWindow( text );
});
if( navigator.geolocation ) {
navigator.geolocation.getCurrentPosition( function( position ) {
pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infowindow.setPosition( pos );
infowindow.setContent( 'Location found.' );
infowindow.open( map );
map.setCenter( pos );
console.info( 'Location found: %s, %s', pos.lat, pos.lng );
}, function() {
handleLocationError( true, infowindow, map.getCenter() );
});
} else {
handleLocationError( false, infowindow, map.getCenter() );
}
}
function showInContentWindow( text ) {
document.getElementById('content-window').innerHTML = text;
}
function handleLocationError( browserHasGeolocation, infowindow, pos ) {
infowindow.setPosition( pos );
infowindow.setContent( browserHasGeolocation ? 'Error: The Geolocation service failed.' : 'Error: Your browser doesn\'t support geolocation.');
infowindow.open( map );
}
</script>
<style>
body{ background:white; }
#container{
width: 90%;
min-height: 90vh;
height:auto;
box-sizing:border-box;
margin: auto;
float:none;
margin:1rem auto;
background:whitesmoke;
padding:1rem;
border:1px solid gray;
display:block;
}
#map {
width: 100%;
height: 100%;
clear:none;
display:block;
z-index:1!important;
background:white;
}
</style>
</head>
<body>
<div id='container'>
<div id='map'></div>
<div id='content-window'></div>
</div>
</body>
</html>
Current behaviour: The page constantly refreshes my location and the entire map.
Desired behaviour: I only want to find and display the current location once, not continuously.
How can I achieve this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>whereami</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript" src="cordova.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key= xyz " type="text/javascript"></script>
<script type="text/javascript">
function onSuccess(position) {
var lat=position.coords.latitude;
var lang=position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat,lang);
var mapOptions = {zoom: 17,center: myLatlng}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({position: myLatlng,map: map});
}
function onError(error) {}
var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { timeout: 0 });
google.maps.event.addDomListener(window, 'load', onSuccess);
</script>
</head>
<body>
<div id="geolocation"></div>
<div id="map-canvas"></div>
</body>
</html>
Don't keep recreating the map. Create the map once (in an "initMap" function), center the map an place the marker in the watchPosition callback function.
jsfiddle
// global variables
var map, marker, polyline;
function initMap() {
// initialize the global map variable
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {
lat: 0,
lng: 0
},
zoom: 1
});
var watchID = navigator.geolocation.watchPosition(onSuccess, onError, {
timeout: 5000
});
}
google.maps.event.addDomListener(window, 'load', initMap);
function onSuccess(position) {
var lat = position.coords.latitude;
var lang = position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat, lang);
map.setCenter(myLatlng);
map.setZoom(18);
if (marker && marker.setPosition)
marker.setMap(myLatlng); // move the marker
else // create a marker
marker = new google.maps.Marker({
position: myLatlng,
map: map
});
}
function onError(error) {
console.log('ERROR(' + error.code + '): ' + error.message);
}
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0
}
#map-canvas {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="geolocation"></div>
<div id="map-canvas"></div>
How can I add an info window to the Google Maps marker Cluster listed below? The map is designed to cluster the markers zoomed out but I would like the markers when zoomed to the nearest extent to show an info window.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
</meta>
<style>
#map_canvas {
width: 1000px;
height: 800px;
background-color:#CCC;
}
#legend {
font-family: Arial, sans-serif;
background: #fff;
padding: 10px;
margin: 10px;
border: 3px solid #000;
}
#legend img {
vertical-align: middle;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript">
function initialize() {
var pos = new google.maps.LatLng(-39.431441,-71.286622);
var myOptions = {
zoom: 2,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
map.setCenter(pos);
var all = [
[37.3952,-91.5482],
[37.212,-90.168],
[37.3331,-90.0782]
];
var gmarkers = [];
for (var i = 0; i < all.length; i++) {
var lat = all[i][0];
var lng = all[i][1];
var latLng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({map: map, position: latLng,});
gmarkers.push(marker);
}
var markerCluster = new MarkerClusterer(map, gmarkers);
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map" style="height:800px;width:1000px;"></div>
</body>
</html>
This is my sample code for adding InfoWindow to markers in MarkerClusterer
Haven't noticed that in my code is jQuery needed so suppose we include these scripts:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.js"></script>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
</meta>
You might use following code.
Thanks to geocodezip.
var info = new google.maps.InfoWindow({
maxWidth: 200,
map: map
});
/* <img src="data:image/jpeg;base64{binary data}" /> */
google.maps.event.addListener(marker, 'click', function () {
var $infoWindowContent = $("YourText);
info.setContent($infoWindowContent[0]);
info.open(map, this);
});
As I see you have a for loop where store the text so I would recommend you add this into your for loop
Hope it helps a bit.
I'm trying to make a side by side Google Fusion Map and while that seems to be working OK, when I click on a polygon, the info window shows up as blank.
I'm trying to work out why it might not be picking up and displaying the information from the table, when the rest of the data seems to be showing up.
The map is here: http://clairemiller.net/blaenaupop.html
The code I'm using to display that is:
<!DOCTYPE html>
<html>
<head>
<style>
#map_canvas { width: 335px; height: 400px; float: left}
#map_canvas2 { width: 335px; height: 400px; }
#image {float: bottom}
body { margin: 0px}
p {color: white; font-family: arial; font-size: 12px; margin: 0px; position: relative; left: 4px; top: 3px }
#left { width: 335px; height: 20px; float: left; background-color: #007A8F}
#right { width: 335px; height: 20px; float: left; background-color: #005F70}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
var map;
var layer;
var layer2;
var secondMapMove = false;
var secondMapBounds = false;
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(51.787578, -3.204393),
zoom: 12,
mapTypeId: 'roadmap'
});
var layer = new google.maps.FusionTablesLayer({
center: new google.maps.LatLng(51.5021181, -3.17909),
query: {
select: 'geometry',
from: '1F3SbppvMyF-3lcT5zrYS8S1X8JD1G2-0aQkWLPw',
}
});
layer.setMap(map);
map2 = new google.maps.Map(document.getElementById('map_canvas2'), {
zoom: 12,
mapTypeId: 'roadmap'
});
var layer2 = new google.maps.FusionTablesLayer({
center: new google.maps.LatLng(53.13359,-1.955566),
query: {
select: 'geometry',
from: '1Hf9Z80JTCiq-zWwhhSPrbifO7q9dvA_DP_BN8IY',
}
});
layer2.setMap(map2);
google.maps.event.addListener(map,'zoom_changed',function(){
if(secondMapBounds!=true) {
var tmpZoom = map.getZoom();
map2.setZoom(tmpZoom);
} else {
secondMapBounds = false;
}
});
google.maps.event.addListener(map2,'zoom_changed',function(){
secondMapBounds = true;
var tmpZoom1 = map2.getZoom();
map.setZoom(tmpZoom1);
});
google.maps.event.addListener(map,'bounds_changed',function(){
if(secondMapMove!=true) {
var tmpBounds = map.getCenter();
map2.setCenter(tmpBounds);
} else {
secondMapMove=false;
}
});
google.maps.event.addListener(map2,'bounds_changed',function(){
secondMapMove = true
var tmpBounds2 = map2.getCenter();
map.setCenter(tmpBounds2);
});
}
</script>
</head>
<body onload="initialize();">
<div class="mapMap" id="map_canvas"></div>
<div class="mapMap" id="map_canvas2"></div>
</body>
</html>
The IDs for the two tables are in there, the infowindow appears to be showing up fine on them.
I'm wondering what I've missed that is causing the infowindows to show up blank.
It doesn't show blank, it shows white.
The contents of the infoWindows are inside <p/>-elements, the background of the infoWindows is white, and this is your CSS:
p {color: white;/*......*/}
change the color
.googft-info-window p{color:#000;}
I have prepared a simplified test case and a screenshot.
I think I'm missing a tiny bit, just few lines of code.
I have 2 overlays (the weather and clouds) in my JavaScript Google Map and would like to hide or show them when a corresponding check box is clicked:
Here is the test case, just paste it into an .html file and it will run:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1,p {
text-align: center;
}
#map {
width: 700px;
height: 400px;
margin-left: auto;
margin-right: auto;
background-color: #CCCCFF;
}
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&language=de&libraries=weather"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
findCity('Berlin');
$('#weather_box,#clouds_box').click(function(){
alert('How to hide/show layers? Checked: ' + $(this).is(':checked'));
});
});
function createMap(center) {
var opts = {
zoom: 6,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
return new google.maps.Map(document.getElementById('map'), opts);
}
function findCity(city) {
var gc = new google.maps.Geocoder();
gc.geocode({address: city}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var pos = results[0].geometry.location;
var map = createMap(pos);
var marker = new google.maps.Marker({
map: map,
title: city,
position: pos,
animation: google.maps.Animation.DROP
});
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
});
weatherLayer.setMap(map);
//var cloudLayer = new google.maps.weather.CloudLayer();
//cloudLayer.setMap(map);
}
});
}
</script>
</head>
<body>
<h1>Berlin</h1>
<p>Show:
<label><input type="checkbox" id="weather_box" checked>weather</label>
<label><input type="checkbox" id="clouds_box">clouds</label>
</p>
<div id="map"></div>
</body>
</html>
UPDATE: Thanks, here a working version for everyone
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1,p {
text-align: center;
}
#map {
width: 700px;
height: 400px;
margin-left: auto;
margin-right: auto;
background-color: #CCCCFF;
}
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&language=de&libraries=weather"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
var map;
var WeatherLayer;
var CloudsLayer;
$(function() {
findCity('Berlin');
});
function createMap(center) {
var opts = {
zoom: 6,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
return new google.maps.Map(document.getElementById('map'), opts);
}
function findCity(city) {
var gc = new google.maps.Geocoder();
gc.geocode({address: city}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var pos = results[0].geometry.location;
map = createMap(pos);
var marker = new google.maps.Marker({
map: map,
title: city,
position: pos,
animation: google.maps.Animation.DROP
});
weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
});
weatherLayer.setMap(map);
cloudsLayer = new google.maps.weather.CloudLayer();
//cloudsLayer.setMap(map);
$('#weather_box').click(function(){
weatherLayer.setMap($(this).is(':checked') ? map : null);
});
$('#clouds_box').click(function(){
cloudsLayer.setMap($(this).is(':checked') ? map : null);
});
$('#weather_box,#clouds_box').removeAttr('disabled');
}
});
}
</script>
</head>
<body>
<h1>Berlin</h1>
<p>Show:
<label><input type="checkbox" id="weather_box" disabled="true" checked>weather</label>
<label><input type="checkbox" id="clouds_box" disabled="true">clouds</label>
</p>
<div id="map"></div>
</body>
</html>
You can hide/show the layer with setMap method:
if ($(this).is(':checked'))
weatherLayer.setMap(map); // show
else
weatherLayer.setMap(null); // hide
See working example: http://jsfiddle.net/EeVUr/2/ (removed your second checkbox, as you have only one layer now. But you can easily create two different layers and switch them.)
If you use deckgl along with deckgl, set the visible property to true or false.
and in updateTriggers, keep the variable that decides the visibility
eg:
new GeoJsonLayer({
...otherProps,
updateTriggers: {
visible: [decisionVariable],
}
visible: decisionVariable ? true : false,
})