I need help to create a sidebar. I have it partially working, but there are 2 problems to solve. First, the sidebar only shows the last marker information. I may not have placed some of the sidebar coding in its proper place. Second, (which may be part of the first problem), all the icons appear when using Firefox, but when using IE8 all the icons except the last icon appears. To view the map and code, first go to http://www.askdata.net/propmap/mapdata.php and do the demo (paste addresses into text area), then the map page will be displayed. Thanks again. The code also follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<h1>'Comparables Map'</h1><!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Comparables Map</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
Subject: {
icon: 'http://askdata.net/compmap/mapicons/sub.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp1: {
icon: 'http://askdata.net/compmap/mapicons/c1.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp2: {
icon: 'http://askdata.net/compmap/mapicons/c2.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp3: {
icon: 'http://askdata.net/compmap/mapicons/c3.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp4: {
icon: 'http://askdata.net/compmap/mapicons/c4.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp5: {
icon: 'http://askdata.net/compmap/mapicons/c5.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp6: {
icon: 'http://askdata.net/compmap/mapicons/c6.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(41.95, -87.65),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("genxml2.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + type + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
draggable: true,
icon: icon.icon
//shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (markers.length == 0) {
sidebar.innerHTML = 'No results found.';
map.setCenter(new GLatLng(41, -87), 4);
return;
}
var sidebarEntry = createSidebarEntry(marker, type, address);
sidebar.appendChild(sidebarEntry);
}
});
function createSidebarEntry(marker, type, address) {
var div = document.createElement('div');
var html = '<b>' + type + '</b>' + address;
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
google.maps.event.addDomListener(div, 'click', function() {
google.maps.event.trigger(marker, 'click');
});
google.maps.event.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
google.maps.event.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div;
}
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<br/>
<br/>
<div style="width:1200px; font-family:Arial,
sans-serif; font-size:11px; border:1px solid black">
<table>
<tbody>
<tr id="cm_mapTR">
<td width="200" valign="top"> <div id="sidebar" style="overflow: auto; height: 700px; font-size: 11px; color: #000"></div>
</td>
<td> <div id="map" style="overflow: hidden; width: 1000px; height: 700px"></div> </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
IE doesn't like trailing commas at the end of a structure, e.g. the comma after the icon here:
Comp5: {
icon: 'http://askdata.net/compmap/mapicons/c5.png',
}
You're mixing Google Maps API 2 and 3 code. e.g. you declare latlng objects using API 3:
center: new google.maps.LatLng(41.95, -87.65)
but then you use API 2 here:
map.setCenter(new GLatLng(41, -87), 4);
Here is your problem: sidebar.innerHTML = '';
Since it is within the loop, every time it loops, it deletes the prior side bar entry.
Place it fight after function load() { -Outside the loop AND within Load().
Use document.getElementById('sidebar').innerHTML = '';
Also, you have to do something about your customIcons
You can change them to something like this
Subject: { icon: 'http://askdata.net/compmap/mapicons/sub.png' }
And you are done!
EXAMPLE
function load() {
document.getElementById('sidebar').innerHTML = '';
var map = new google.maps.Map(document.getElementById("map"), {
//rest of the code goes here
Also, it might be a good idea to replace this code with CSS:
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
google.maps.event.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
google.maps.event.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
CSS option:
#sidebar {
background-color: white;
}
#sidebar div {
cursor: pointer;
margin-bottom: 5px;
}
#sidebar div:hover {
background-color: #eee;
}
Related
I'm using the latest release of geoxml3 downloaded from Google Code Project. I can see the KML file placemarks on my map. The problem is I would like to display the labels as well. In my KML file I have Style id and StyleMap id assigned.
I have searched this site for gemoxml3 label and was pointed to this post label a kml file in Google Maps API v3. The problem is the wiki for the code project points to Google Markers which doesn't mention how to display the label either.
I have also searched the geocodezip website and didn't find anything on their either. Any direction would be greatly appreciated.
* Added KML Format *
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>KML Test</name>
<StyleMap id="Tester-ICON">
<Pair>
<key>normal</key>
<styleUrl>#Tester-TEMPLATE</styleUrl>
</Pair>
<Pair>
<key>highlight</key>
<styleUrl>#Tester-TEMPLATE</styleUrl>
</Pair>
</StyleMap>
<Style id="Tester-TEMPLATE">
<IconStyle>
<scale>2</scale>
<Icon>
<href>http://maps.google.com/mapfiles/kml/paddle/ylw-stars.png</href>
</Icon>
</IconStyle>
<LabelStyle>
<color>ff0000ff</color>
<scale>2</scale>
</LabelStyle>
<BalloonStyle>
<text><![CDATA[
$[description]
]]>
</text>
</BalloonStyle>
</Style>
<Placemark id="Event 1">
<name>Event 1</name>
<Snippet maxLines="0"></Snippet>
<description>
<![CDATA[
<style type="text/css">
.TDcell {
color: Black;
text-align: left;
}
.THeader {
color: Black;
font-weight: bold;
white-space: nowrap;
text-align: left;
vertical-align: text-top;
}
</style>
<p><b>Event ID:<b> 1</p>
<p><b>Type of Event:<b> Formal Dinner</p>
<hr>
<table cellspacing="1" cellpadding="3" width="500">
<tr>
<td class="THeader">Who:</td>
<td class="TDcell">POTUS</td>
</tr><tr>
<td class="THeader">What:</td>
<td class="TDcell">State of the Union Address</td>
</tr><tr>
<td class="THeader">When:</td>
<td class="TDcell">Jan, 20th 2016</td>
</tr><tr>
<td class="THeader">Where:</td>
<td class="TDcell">United States Capitol</td>
</tr><tr>
<td class="THeader">Why:</td>
<td class="TDcell">Updates</td>
</tr>
</table>]]>
</description>
<styleUrl>#Tester-TEMPLATE</styleUrl>
<Point>
<coordinates>-77.009072,38.890131,0</coordinates>
</Point>
</Placemark>
</Document>
</kml>
One option would be to create a custom createMarker function which uses InfoBox to display a label over the marker:
function createMarker(placemark, doc) {
// create a Marker to the map from a placemark KML object
// Load basic marker properties
var markerOptions = {
map: map,
position: new google.maps.LatLng(placemark.Point.coordinates[0].lat, placemark.Point.coordinates[0].lng),
title: placemark.name,
zIndex: Math.round(placemark.Point.coordinates[0].lat * -100000)<<5,
icon: placemark.style.icon,
shadow: placemark.style.shadow
};
// Create the marker on the map
var marker = new google.maps.Marker(markerOptions);
// add label
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: white; padding: 5px;";
boxText.innerHTML = placemark.name;
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-40, -60)
,zIndex: null
,boxStyle: {
textAlign: "center"
,fontSize: "8pt"
,width: "80px"
}
,closeBoxURL: ""
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
ib.open(map, marker);
// Set up and create the infowindow
var infoWindowOptions = {
content: '<div class="geoxml3_infowindow"><h3>' + placemark.name +
'</h3><div>' + placemark.description + '</div>'+
'<input type="button" onclick="displayInfo(\''+placemark.name+'\',\''+placemark.description+'\');" value="populate div"></input>',
pixelOffset: new google.maps.Size(0, 2)
};
infowindow.setOptions(infoWindowOptions);
marker.infoWindowOptions = infoWindowOptions;
marker.infoWindow = infowindow;
// Infowindow-opening event handler
google.maps.event.addListener(marker, 'click', function() {
this.infoWindow.close();
marker.infoWindow.setOptions(this.infoWindowOptions);
this.infoWindow.open(this.map, this);
});
placemark.marker = marker;
return marker;
}
Use it in geoxml3 like this:
geo = new geoXML3.parser({
map: map,
zoom: true,
singleInfoWindow: true,
infoWindow: infowindow,
createMarker: createMarker
});
geo.parse(document.getElementById('kmlFile').value);
proof of concept (with posted
KML)
proof of concept (with a different
KML)
code snippet:
var map, infowindow;
function initialize() {
infowindow = new google.maps.InfoWindow({});
var googlemaps_options = {
mapTypeId: google.maps.MapTypeId.SATELLITE,
streetViewControl: false
}
map = new google.maps.Map(document.getElementById('map_canvas'), googlemaps_options);
var geo = new geoXML3.parser({
map: map,
zoom: true,
singleInfoWindow: true,
infoWindow: infowindow,
createMarker: createMarker
});
geo.parseKmlString(kmlStr);
}
function createMarker(placemark, doc) {
// create a Marker to the map from a placemark KML object
// Load basic marker properties
var markerOptions = {
map: map,
position: new google.maps.LatLng(placemark.Point.coordinates[0].lat, placemark.Point.coordinates[0].lng),
title: placemark.name,
zIndex: Math.round(placemark.Point.coordinates[0].lat * -100000) << 5,
icon: placemark.style.icon,
shadow: placemark.style.shadow
};
// Create the marker on the map
var marker = new google.maps.Marker(markerOptions);
// add label
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: white; padding: 5px;";
boxText.innerHTML = placemark.name;
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-40, -60),
zIndex: null,
boxStyle: {
textAlign: "center",
fontSize: "8pt",
width: "80px"
},
closeBoxURL: "",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
ib.open(map, marker);
// Set up and create the infowindow
var infoWindowOptions = {
content: '<div class="geoxml3_infowindow"><h3>' + placemark.name +
'</h3><div>' + placemark.description + '</div>' +
'<input type="button" onclick="displayInfo(\'' + placemark.name + '\',\'' + placemark.description + '\');" value="populate div"></input>',
pixelOffset: new google.maps.Size(0, 2)
};
infowindow.setOptions(infoWindowOptions);
marker.infoWindowOptions = infoWindowOptions;
marker.infoWindow = infowindow;
// Infowindow-opening event handler
google.maps.event.addListener(marker, 'click', function() {
this.infoWindow.close();
marker.infoWindow.setOptions(this.infoWindowOptions);
this.infoWindow.open(this.map, this);
});
placemark.marker = marker;
return marker;
}
function displayInfo(name, description) {
document.getElementById('info').innerHTML = name + "<br>" + description;
}
google.maps.event.addDomListener(window, 'load', initialize);
var kmlStr = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2"><Document><name>KML Test</name><StyleMap id="Tester-ICON"><Pair><key>normal</key><styleUrl>#Tester-TEMPLATE</styleUrl></Pair><Pair><key>highlight</key><styleUrl>#Tester-TEMPLATE</styleUrl></Pair></StyleMap><Style id="Tester-TEMPLATE"><IconStyle><scale>2</scale><Icon><href>http://maps.google.com/mapfiles/kml/paddle/ylw-stars.png</href></Icon></IconStyle><LabelStyle><color>ff0000ff</color><scale>2</scale></LabelStyle><BalloonStyle><text><![CDATA[$[description]]]></text></BalloonStyle></Style><Placemark id="Event 1"><name>Event 1</name><Snippet maxLines="0"></Snippet><description><![CDATA[<style type="text/css">.TDcell {color: Black;text-align: left;}.THeader {color: Black;font-weight: bold;white-space: nowrap;text-align: left;vertical-align: text-top;}</style><p><b>Event ID:<b>1</p><p><b>Type of Event:<b>Formal Dinner</p><hr><table cellspacing="1" cellpadding="3" width="500"><tr><td class="THeader">Who:</td><td class="TDcell">POTUS</td></tr><tr><td class="THeader">What:</td><td class="TDcell">State of the Union Address</td></tr><tr><td class="THeader">When:</td><td class="TDcell">Jan, 20th 2016</td></tr><tr><td class="THeader">Where:</td><td class="TDcell">United States Capitol</td></tr><tr><td class="THeader">Why:</td><td class="TDcell">Updates</td></tr></table>]]></description><styleUrl>#Tester-TEMPLATE</styleUrl><Point><coordinates>-77.009072,38.890131,0</coordinates></Point></Placemark></Document></kml>';
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#map_canvas {
height: 90%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>
I have a list of places in a text box in Google maps. When a person clicks on one of the places in the text box, I want the corresponding marker of that location in Google Maps to bounce. Any ideas on how I can make this work? Right now I am only able to make the marker bounce when I click on the marker itself.
Here is my code:
var Points = [ {
name: 'Duomo-Cathedral',
lat: 43.7732,
long: 11.2560,
url: 'http://www.google.com'
}, {
name: 'Orsanmichele-Church',
lat: 43.770947,
long: 11.254981,
url: 'http://www.google.com'
}, {
name: 'Ponte Vecchio-Old Bridge',
lat: 43.768350,
long: 11.253323,
url: 'http://www.google.com'
}, {
name: 'Galleria delgi Uffizzi-Art Gallery',
lat: 43.768657,
long: 11.255737,
url: 'http://www.google.com'
}, {
name: 'Santa Croce-Church',
lat: 43.768816,
long: 11.262394,
add1: 'Piazza Santa Croce, 16',
add2: ' Florence, Italy 50122',
phone: '+39 055 246 6105',
url: 'https://www.santacroceopera.it/'
}, {
name: 'Palazzo Vecchio-TownHall',
lat: 43.769670,
long: 11.256075,
url: 'https://www.google.com'
}, {
name: 'Piazza della Signoria-OpenSquare',
lat: 43.769725,
long: 11.255474,
url: 'http://www.google.com/'
}, {
name: 'Santa Maria Novella-Church',
lat: 43.774502,
long: 11.249466,
url: 'https://www.google.com'
}, {
name: 'Santa Maria Novella-TrainStation',
lat: 43.776261,
long: 11.248737,
url: 'https://www.google.com'
}, {
name: 'San Lorenzo- ChurchMarket',
lat: 43.774858,
long: 11.254584,
url: 'http://www.google.com'
}
];
var markersArray = ko.observableArray([]);
Points.forEach(populateMarkersArray);
function populateMarkersArray(element) { //, index, array
markersArray.push(element);
}
// Set up a google map
var mapOptions = {
center: { lat: 43.771341,lng: 11.256875},
zoom: 16
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
function initialize() {
Points.forEach(loadMarkers);
var infowindow0 = new google.maps.InfoWindow();
var marker0 = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
google.maps.event.addListener(function() {
infowindow0.close();
marker0.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
// If the place has a geometry, then present it on a map.
marker0.setIcon(/** #type {google.maps.Icon} */({
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(35, 35)
}));
marker0.setPosition(place.geometry.location);
marker0.setVisible(true);
infowindow0.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow0.open(map, marker0);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function loadMarkers(element) { //, index, array
var myLatlng = new google.maps.LatLng(element.lat,element.long);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: element.name
});
loadInfoWindow(element, marker);
}
function loadInfoWindow(element, marker) {
var contentString = '<div class="strong">' + element.name + '</div><div>' + element.add1 + '</div><div>' + element.add2 + '</div><div>'+ element.phone + '</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
toggleBounce(marker);
});
}
function toggleBounce(marker) {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
function viewModel() {
}
ko.applyBindings(new viewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker Animations</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0; }
#map-canvas { height: 100% }
.place-list {
display: inline-block;
width: 250px;
max-height: 70%;
float: right;
position: absolute;
top: 40px;
right: 6px;
z-index: 5;
overflow-y: auto;
background-color: white;
border: 2px solid grey;
opacity: 0.8;
list-style-type: none;
padding: 20px;
margin: auto;
font-weight: bolder;
border-radius: 25px;
}
</style>
</head>
<body>
<ul class="place-list" data-bind="foreach: Points" >
<li data-bind="text: name, click: $parent.marker" ></li>
</ul>
<div id="map-canvas"></div>
<script type="text/javascript" src="https://maps.googleapis.Com/maps/api/js?key=AIzaSyCPgww-LhtxoQqq2zLI1_gOU1L2XayS-rE"> </script>
<script src="js/lib/knockout-3.2.0.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Thanks for your help,
Max
One of the ways to do it is to use Knockout.js data-binding. In particular, you can use foreach binding to display all your items as a list and apply functions to each of them. Then use click binding to execute functions attached to list items when a user clicks on it. An example of how to use it for list view of places in Google Maps with search function:
HTML:
<h4>Places</h4>
<input type="text" id="my-Input" data-bind="textInput: filter" placeholder="Search for places..">
<div class="scroll" id="my-UL">
<ul data-bind="foreach: visiblePlaces">
<li>
<input data-bind="value: title, click: $parent.zoomToPlace, text: address" type="button" class="btn btn-small btn-link" id="zoomTo">
</li>
</ul>
</div>
JS:
/ ViewModel - provides list view of places, on click zooms map, shows the marker, infowindow, etc.
function viewModel() {
var self = this;
self.places = ko.observableArray(locations);
self.address = ko.observable();
self.title = ko.observable();
self.id = ko.observable();
this.filter = ko.observable();
this.visiblePlaces = ko.computed(function() {
return this.places().filter(function(place) {
if (!self.filter() || place.title.toLowerCase().indexOf(self.filter().toLowerCase()) !== -1)
return place;
});
}, this);
//Zooms to a selected marker and open infowindow
self.zoomToPlace = function() {
// Initialize the geocoder.
var geocoder = new google.maps.Geocoder();
// Get the place.
var address = this.address;
var id = this.id;
// Geocode the address/area entered to get the center. Then, center the map on it and zoom in
geocoder.geocode({
address: address,
}, function(results, status) {
map.setCenter(results[0].geometry.location);
map.setZoom(15);
google.maps.event.trigger(markers[id], 'click');
});
};
}
var vm = new viewModel();
ko.applyBindings(vm);
This will produce a list of places from an array (styles and array aren't shown in the code) and the corresponding marker will open an infowindow and bounce.
For full code, you can look it in my repo: https://github.com/DmitryGrechko/Neighborhood_Map
I have two columns in my fusion table, both store the names of icons. One of the tables is the default icons.
I'm wondering if there is a way to toggle between the two columns to change icons in JavaScript?
Cheers
set up two maps in the FusionTables UI with the appropriate columns defining the icons (Fusion Tables Help article describing how to do that)
"publish" the map, get HTML and Javascript, that will contain the values to use for styleId and template for each configuration.
call .setOptions on the FusionTablesLayer to change between them
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"></meta>
<title>Astraptes fulgerator- demo data - Google Fusion Tables</title>
<style type="text/css">
html, body, #googft-mapCanvas {
height: 300px;
margin: 0;
padding: 0;
width: 500px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
google.maps.visualRefresh = true;
var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
(navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
if (isMobile) {
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
}
var mapDiv = document.getElementById('googft-mapCanvas');
mapDiv.style.width = isMobile ? '100%' : '500px';
mapDiv.style.height = isMobile ? '100%' : '300px';
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(10.902224578468406, -85.43183000000005),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col12",
from: "1_DWHpdjPNGQwVZU5OLbMMS-6yrbIY4wTGJoRMLg",
where: ""
},
options: {
styleId: 3,
templateId: 3
}
});
if (isMobile) {
var legend = document.getElementById('googft-legend');
var legendOpenButton = document.getElementById('googft-legend-open');
var legendCloseButton = document.getElementById('googft-legend-close');
legend.style.display = 'none';
legendOpenButton.style.display = 'block';
legendCloseButton.style.display = 'block';
legendOpenButton.onclick = function() {
legend.style.display = 'block';
legendOpenButton.style.display = 'none';
}
legendCloseButton.onclick = function() {
legend.style.display = 'none';
legendOpenButton.style.display = 'block';
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input type="button" value="change A" onclick="layer.setOptions({styleId:2, template:2});"></input>
<input type="button" value="change B" onclick="layer.setOptions({styleId:3, template:3});"></input>
<div id="googft-mapCanvas"></div>
</body>
</html>
Kinda of new to Google mashups. I have an KML on our Webserver (http://www.madisonareampo.org/maps/BRT_National.kmz) to draw on Google Maps.
I have a Google Maps mashup where I want an infowindow to display the contents of the KML description field through a click event. The KML file was exported from a geodatabase using ArcGIS.
Nothing is being returned when I click on a marker in the KML file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Street View Layer</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBvkXCNOcIGLKZVgFtIykSQEbEk0db1XxY&sensor=false">
</script>
<script>
function initialize() {
var BRT = new google.maps.LatLng(40.380028, -93.440917);
var mapOptions = {
center: BRT,
zoom: 3,
overviewMapControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById('map_canvas'), mapOptions);
var layer= new google.maps.KmlLayer('http://www.madisonareampo.org/maps/BRT_National.kmz',
{ suppressInfoWindows: true,
map: map });
google.maps.event.addListener(layer, 'click', function(kmlEvent) {
showInContentWindow(kmlEvent.featureData.description);
});
function showInContentWindow(text) {
var content = "<div style='margin-left:-20px;border:2px dotted #897823;'>" + text + "</div>";
var infowindow = new google.maps.InfoWindow({
content: content
})
}
var panoramaOptions = {
position: BRT,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 650px; height: 400px"></div>
<div id="pano" style="position:absolute; left:660px; top: 8px; width: 650px; height: 400px;"></div>
</body>
</html>
InfoWindows needs a position attribute and you have to call open(map) to bind it to the map. Here's a working version of your code :
google.maps.event.addListener(layer, 'click', function(kmlEvent) {
showInContentWindow(kmlEvent.latLng, kmlEvent.featureData.description);
});
function showInContentWindow(position, text) {
var content = "<div style='margin-left:-20px;border:2px dotted #897823;'>" + text + "</div>";
var infowindow = new google.maps.InfoWindow({
content: content,
position: position
})
infowindow.open(map);
}
I'm using Google Maps API V3 plugin Infobox and I need some help. In the code a loop is creating several markers an infoboxes on the map, but I wonder how to hide the infoboxes from the beginning? I have tried to change the isHidden value, but not working. I also wonder how to hide previuosly infobox when click on a new marker to show a new infobox? Preciate some help! Thanks!
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="infobox.js"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(55.672962361614566, 12.56587028503418);
var myMapOptions = {
zoom: 15
,center: latlng
,mapTypeId: google.maps.MapTypeId.ROADMAP
,streetViewControl: false
};
var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
// namn
var name=[];
name.push('Test 1');
name.push('Test 2');
// positioner
var position=[];
position.push(new google.maps.LatLng(55.667093265894245,12.581255435943604));
position.push(new google.maps.LatLng(55.66453963191134, 12.584795951843262));
// infoboxes
var infobox = [];
infobox.push("<div>Hello 1</div>");
infobox.push("<div>Hello 2</div>");
for (i = 0; i < position.length; i += 1) {
// Call function
createMarkers(position[i], infobox[i], name[i]);
}
function createMarkers(position,content,name) {
var marker = new google.maps.Marker({
map: theMap,
draggable: false,
position: position,
visible: true,
title: name
});
var boxText = document.createElement("div");
boxText.style.cssText = "background: yellow; width: 300px; height: 70px; padding: 5px;";
boxText.innerHTML = content;
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-37, -120)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 1
,width: "300px"
}
,closeBoxMargin: "5px 5px 5px 5px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
google.maps.event.addListener(marker, "click", function (e) {
ib.open(theMap, this);
});
var ib = new InfoBox(myOptions);
ib.open(theMap, marker);
}
}
</script>
<title>Creating and Using an InfoBox</title>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 400px"></div>
Remove the line:
ib.open(theMap, marker);
And the infobox should remain hidden until you click the marker.