InfoBox won't load HTML content - google-maps-api-3

I am trying to use the Google Map API (V3) to drop pins on a map. I am able to place the pin and open an info box. Unfortunately the info box won't display HTML content, only a string. I am using the following code to create/display my pin/info box.
addMarker('1600 Pennsylvania Avenue, Washington DC');
function addMarker(address) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
boxText.innerHTML = "Hello World!";
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
backgroundColor: '#ffffff'
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
google.maps.event.addListener(marker, 'click', function(){
if( ib.anchor === this ){
ib.close();
}
else {
ib.open(map, this);
}
});
}
});
}
When doing this, the infobox contents are always [object HTMLDivElement] and I can not figure out how to have it properly display the informationfound in boxText. The code for the info box is taken almost 100% straight from Google's own example.

So, the answer is incredibly simple. Use the most up-to-date version of infobox.js and it works fine.

Related

Utilizing geoxml3 to display KML labels

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>

make markers bounce from a list on google maps

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

Does the draggable property of the google maps marker (v3) influence the zIndex of the marker?

I have a map, a marker with zIndex = 6, and when i click on it an infobox appears (zIndex: 5 and pane: "overlayImage"). So the marker and the tooltip are in the same pane so it depends of the zIndex which is on top and which is under. The problem that i have is that if the marker has (draggable: true) the zIndex compare works. (marker is on top because 6>5), but if i delete the draggable property, the marker will be under the infobox even if the zindex is higher than the infobox zIndex.
Can somebody explain me why this happens? Code:
function initialize() {
var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);
var myMapOptions = {
zoom: 15
,center: secheltLoc
,mapTypeId: google.maps.MapTypeId.ROADMAP
};
var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
var marker = new google.maps.Marker({
map: theMap,
draggable: true,
position: new google.maps.LatLng(49.47216, -123.76307),
zIndex: 6
});
var boxText = document.createElement("div");
boxText.style.cssText = "zindex: 3;border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-10, -20)
,zIndex: 5
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 0.75
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "overlayImage"
,enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
google.maps.event.addListener(marker, "mouseover", function (e) {
ib.open(theMap, this);
});
}
If you set the marker to draggable, it is not optimized (not rendered in canvas).
If you set the optimized to false, it will have the same effect (without setting the marker to draggable).

How to delete all the shape after draw

Refer from this source google map drawing tools, how to deleted all the drawing shape by one click button?
code snippet:
var drawingManager;
var selectedShape;
var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082'];
var selectedColor;
var colorButtons = {};
function clearSelection() {
if (selectedShape) {
selectedShape.setEditable(false);
selectedShape = null;
}
}
function setSelection(shape) {
clearSelection();
selectedShape = shape;
shape.setEditable(true);
selectColor(shape.get('fillColor') || shape.get('strokeColor'));
}
function deleteSelectedShape() {
if (selectedShape) {
selectedShape.setMap(null);
}
}
function selectColor(color) {
selectedColor = color;
for (var i = 0; i < colors.length; ++i) {
var currColor = colors[i];
colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
}
// Retrieves the current options from the drawing manager and replaces the
// stroke or fill color as appropriate.
var polylineOptions = drawingManager.get('polylineOptions');
polylineOptions.strokeColor = color;
drawingManager.set('polylineOptions', polylineOptions);
var rectangleOptions = drawingManager.get('rectangleOptions');
rectangleOptions.fillColor = color;
drawingManager.set('rectangleOptions', rectangleOptions);
var circleOptions = drawingManager.get('circleOptions');
circleOptions.fillColor = color;
drawingManager.set('circleOptions', circleOptions);
var polygonOptions = drawingManager.get('polygonOptions');
polygonOptions.fillColor = color;
drawingManager.set('polygonOptions', polygonOptions);
}
function setSelectedShapeColor(color) {
if (selectedShape) {
if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) {
selectedShape.set('strokeColor', color);
} else {
selectedShape.set('fillColor', color);
}
}
}
function makeColorButton(color) {
var button = document.createElement('span');
button.className = 'color-button';
button.style.backgroundColor = color;
google.maps.event.addDomListener(button, 'click', function() {
selectColor(color);
setSelectedShapeColor(color);
});
return button;
}
function buildColorPalette() {
var colorPalette = document.getElementById('color-palette');
for (var i = 0; i < colors.length; ++i) {
var currColor = colors[i];
var colorButton = makeColorButton(currColor);
colorPalette.appendChild(colorButton);
colorButtons[currColor] = colorButton;
}
selectColor(colors[0]);
}
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(22.344, 114.048),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
});
var polyOptions = {
strokeWeight: 0,
fillOpacity: 0.45,
editable: true
};
// 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: google.maps.drawing.OverlayType.POLYGON,
markerOptions: {
draggable: true
},
polylineOptions: {
editable: true
},
rectangleOptions: polyOptions,
circleOptions: polyOptions,
polygonOptions: polyOptions,
map: map
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
if (e.type != google.maps.drawing.OverlayType.MARKER) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
// Add an event listener that selects the newly-drawn shape when the user
// mouses down on it.
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function() {
setSelection(newShape);
});
setSelection(newShape);
}
});
// Clear the current selection when the drawing mode is changed, or when the
// map is clicked.
google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
google.maps.event.addListener(map, 'click', clearSelection);
google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);
buildColorPalette();
}
google.maps.event.addDomListener(window, 'load', initialize);
#map, html, body {
padding: 0;
margin: 0;
height: 100%;
}
#panel {
width: 200px;
font-family: Arial, sans-serif;
font-size: 13px;
float: right;
margin: 10px;
}
#color-palette {
clear: both;
}
.color-button {
width: 14px;
height: 14px;
font-size: 0;
margin: 2px;
float: left;
cursor: pointer;
}
#delete-button {
margin-top: 5px;
}
<script src="http://maps.google.com/maps/api/js?libraries=drawing"></script>
<div id="panel">
<div id="color-palette"></div>
<div>
<button id="delete-button">Delete Selected Shape</button>
</div>
</div>
<div id="map"></div>
If you want to delete (or do anything with) all the objects on the map, you need to keep references to them that you can use.
When a shape is created, push it into an array (needs to be global to be used in a button click handler).
When the "delete all" button is clicked, iterate through that array, calling .setMap(null) on each of the objects.
Example
Push the overlay onto an array (all_overlays):
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
all_overlays.push(e);
if (e.type != google.maps.drawing.OverlayType.MARKER) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
// Add an event listener that selects the newly-drawn shape when the user
// mouses down on it.
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function() {
setSelection(newShape);
});
setSelection(newShape);
}
});
Delete all shapes:
function deleteAllShape() {
for (var i=0; i < all_overlays.length; i++)
{
all_overlays[i].overlay.setMap(null);
}
all_overlays = [];
}
Code snippet:
var drawingManager;
var all_overlays = [];
var selectedShape;
var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082'];
var selectedColor;
var colorButtons = {};
function clearSelection() {
if (selectedShape) {
selectedShape.setEditable(false);
selectedShape = null;
}
}
function setSelection(shape) {
clearSelection();
selectedShape = shape;
shape.setEditable(true);
selectColor(shape.get('fillColor') || shape.get('strokeColor'));
}
function deleteSelectedShape() {
if (selectedShape) {
selectedShape.setMap(null);
}
}
function deleteAllShape() {
for (var i = 0; i < all_overlays.length; i++) {
all_overlays[i].overlay.setMap(null);
}
all_overlays = [];
}
function selectColor(color) {
selectedColor = color;
for (var i = 0; i < colors.length; ++i) {
var currColor = colors[i];
colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
}
// Retrieves the current options from the drawing manager and replaces the
// stroke or fill color as appropriate.
var polylineOptions = drawingManager.get('polylineOptions');
polylineOptions.strokeColor = color;
drawingManager.set('polylineOptions', polylineOptions);
var rectangleOptions = drawingManager.get('rectangleOptions');
rectangleOptions.fillColor = color;
drawingManager.set('rectangleOptions', rectangleOptions);
var circleOptions = drawingManager.get('circleOptions');
circleOptions.fillColor = color;
drawingManager.set('circleOptions', circleOptions);
var polygonOptions = drawingManager.get('polygonOptions');
polygonOptions.fillColor = color;
drawingManager.set('polygonOptions', polygonOptions);
}
function setSelectedShapeColor(color) {
if (selectedShape) {
if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) {
selectedShape.set('strokeColor', color);
} else {
selectedShape.set('fillColor', color);
}
}
}
function makeColorButton(color) {
var button = document.createElement('span');
button.className = 'color-button';
button.style.backgroundColor = color;
google.maps.event.addDomListener(button, 'click', function() {
selectColor(color);
setSelectedShapeColor(color);
});
return button;
}
function buildColorPalette() {
var colorPalette = document.getElementById('color-palette');
for (var i = 0; i < colors.length; ++i) {
var currColor = colors[i];
var colorButton = makeColorButton(currColor);
colorPalette.appendChild(colorButton);
colorButtons[currColor] = colorButton;
}
selectColor(colors[0]);
}
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(22.344, 114.048),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
});
var polyOptions = {
strokeWeight: 0,
fillOpacity: 0.45,
editable: true
};
// 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: google.maps.drawing.OverlayType.POLYGON,
markerOptions: {
draggable: true
},
polylineOptions: {
editable: true
},
rectangleOptions: polyOptions,
circleOptions: polyOptions,
polygonOptions: polyOptions,
map: map
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
all_overlays.push(e);
if (e.type != google.maps.drawing.OverlayType.MARKER) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
// Add an event listener that selects the newly-drawn shape when the user
// mouses down on it.
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function() {
setSelection(newShape);
});
setSelection(newShape);
}
});
// Clear the current selection when the drawing mode is changed, or when the
// map is clicked.
google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
google.maps.event.addListener(map, 'click', clearSelection);
google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);
google.maps.event.addDomListener(document.getElementById('delete-all-button'), 'click', deleteAllShape);
buildColorPalette();
}
google.maps.event.addDomListener(window, 'load', initialize);
#map,
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
#panel {
width: 200px;
font-family: Arial, sans-serif;
font-size: 13px;
float: right;
margin: 10px;
}
#color-palette {
clear: both;
}
.color-button {
width: 14px;
height: 14px;
font-size: 0;
margin: 2px;
float: left;
cursor: pointer;
}
#delete-button {
margin-top: 5px;
}
<script src="http://maps.google.com/maps/api/js?libraries=drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="panel">
<div id="color-palette"></div>
<div>
<button id="delete-button">Delete Selected Shape</button>
<button id="delete-all-button">Delete All Shapes</button>
</div>
</div>
<div id="map"></div>

Google Maps API V3 Infobox plugin hide/show?

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.

Resources