I am using Info box plugin in google map v3
I want to replicate the same functioning as seen here
http://coolhunting.com/local/#/metroarea/chicago/jack-spade/
Basically I want that whenever some one click on sidebar , respective info box should open in map.
I have added a onclick function on click on element in sidebar , but not sure what should I do in that function
Here is the code I have
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 50% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api /js?sensor=true"></script>
<script src="js/infobox.js" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(66.672962361614566, 12.56587028503418);
var myMapOptions = {
zoom:5
,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(66.667093265894245,12.581255435943604));
position.push(new google.maps.LatLng(62.66453963191134, 12.584795951843262));
// infoboxes
var infobox = [];
infobox.push("<div>Hello 1</div>");
infobox.push("<div>Hello 2</div>");
var markers=new Array();
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
});
markers.push(marker);
var boxText = document.createElement("div");
boxText.style.cssText = "background: #ffffff; 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);
}
}
function show_marker(){
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div><div><a onclick="show_marker()" href="javascript:void(0)">show marker</a></div>
</body>
</html>
This isn't hard, because when you add an info window to the map, the map scrolls to show the info window.
Make your map.
Make your sidebar.
Add markers to the map, while adding elements to the sidebar. Make the elements in the sidebar clickable, so that when you click on them you have something like this:
(This is from my own site.)
var marker =new google.maps.Marker({
position: new google.maps.LatLng(searchResult.Latitude,searchResult.Longitude),
map: googleMap,
Title: searchResult.CompanyName
});
$('sideBarElement').addEvent('click', function() {
infoWindow.setContent("Some content for your info window.");
infoWindow.open(googleMap,marker);
});
When you .open() and infoWindow, the map automatically pans to display it.
( May be too late but if someone is googling for this )
Look into this question's answer which is exactly the samething I was looking for and now I found the answer Open infobox on button clicked "OUTSIDE" map ( google map v3 )
Related
i am trying to do a website for school project
and i have this prototype
i want to put sound on differnt locations using googlemaps api
I already did it, but the sound do not stop if you play other sound... can we try help me.
i am newbie at this sorry for my english
<!DOCTYPE html>
<html>
<head>
<title>Sound Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://mm1.ellieirons.com/sm2.js"></script>
<style>
/* CSS to define the size and style of the map: */
#map {
width: 500px;
height: 500px;
padding: 15px;
margin: 15px;
}
</style>
</head>
<body>
<!-- HTML creating a div to hold the map: -->
<div id="map"></div>
<!-- JavaScript to pull in the Google Maps API: -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!-- JavaScript to create the variable "map", and set its zoom, location and map type -->
<script>
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: new google.maps.LatLng(40.818259, -73.950262), // Center the map at this lat/lng point
mapTypeId: google.maps.MapTypeId.SATELLITE //Also takes ROADMAP
});
var offIcon = new google.maps.MarkerImage("http://fri.ellieirons.com/wp-content/uploads/2012/03/marker_sound_off_y.png");
var onIcon = new google.maps.MarkerImage("http://fri.ellieirons.com/wp-content/uploads/2012/03/marker_sound_on_y.png");
var marker1_edm = new google.maps.Marker({
position: new google.maps.LatLng(40.821523, -73.949661),
map: map,
icon: offIcon
});
marker1_edm.mp3 = 'http://fri.ellieirons.com/wp-content/uploads/2012/03/suction.mp3';
function markerClick1() {
var audio1 = document.createElement('audio');
audio1.src = 'http://fri.ellieirons.com/wp-content/uploads/2012/03/suction.mp3';
audio1.play();
}
var marker2_nac = new google.maps.Marker({
position: new google.maps.LatLng(30.819834, -73.950455),
map: map,
icon: offIcon
});
marker2_nac.mp3 = 'http://fri.ellieirons.com/wp-content/uploads/2012/03/machine.mp3';
function markerClick() {
var audio2 = document.createElement('audio');
audio2.src = 'http://fri.ellieirons.com/wp- content/uploads/2012/03/machine.mp3' ,'' ;
audio2.play();
}
google.maps.event.addListener(marker1_edm, 'click', markerClick1);
google.maps.event.addListener(marker2_nac, 'click', markerClick);
</script>
</body>
</html>
The audio needs to be explicitly stopped and to do this you need the variables to be declared globally:
<script>
var audio2 = document.createElement('audio');
audio2.src = 'http://fri.ellieirons.com/wp- content/uploads/2012/03/machine.mp3' ,'' ;
var audio1 = document.createElement('audio');
audio1.src = 'http://fri.ellieirons.com/wp-content/uploads/2012/03/suction.mp3';
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: new google.maps.LatLng(40.818259, -73.950262), // Center the map at this lat/lng point
mapTypeId: google.maps.MapTypeId.SATELLITE //Also takes ROADMAP
});
var offIcon = new google.maps.MarkerImage("http://fri.ellieirons.com/wp-content/uploads/2012/03/marker_sound_off_y.png");
var onIcon = new google.maps.MarkerImage("http://fri.ellieirons.com/wp-content/uploads/2012/03/marker_sound_on_y.png");
var marker1_edm = new google.maps.Marker({
position: new google.maps.LatLng(40.821523, -73.949661),
map: map,
icon: offIcon
});
marker1_edm.mp3 = 'http://fri.ellieirons.com/wp-content/uploads/2012/03/suction.mp3';
function markerClick1() {
audio2.pause();
audio1.play();
}
var marker2_nac = new google.maps.Marker({
position: new google.maps.LatLng(30.819834, -73.950455),
map: map,
icon: offIcon
});
marker2_nac.mp3 = 'http://fri.ellieirons.com/wp-content/uploads/2012/03/machine.mp3';
function markerClick() {
audio1.pause();
audio2.play();
}
google.maps.event.addListener(marker1_edm, 'click', markerClick1);
google.maps.event.addListener(marker2_nac, 'click', markerClick);
</script>
</body>
</html>
I am trying to put a search box onto my map, but it keeps failing. I have tried to use sample code from a few sites (here: How to add Google Maps Autocomplete search box?; here: How to integrate SearchBox in Google Maps JavaScript API v3?; here: https://developers.google.com/maps/documentation/javascript/examples/places-searchbox; and a tutorial from here: https://www.youtube.com/watch?v=lSdM3yZkj1w). But I can't seem to make it work, and now my map won't even display.
To explain fully, I am trying to make a map that displays a kml (which can be toggled), a marker that can be dragged by the user (which displays co-ordinates where ever the marker is), and a search box to search for an address or co-ordinates (...this is still eluding me).
In the end, I am hoping to move the search box and the kml toggle onto the map, rather than outside.
I'm very new to this, so I apologise in advance for my lack of experience. Any help would be greatly appreciated!
Non-working code below:
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script type="text/javascript">
var map = null;
var geocoder = new google.maps.Geocoder();
var layers=[];
layers[0] = new google.maps.KmlLayer("https://dl.dropboxusercontent.com/u/29079095/Limpopo_Hunting_Zones/Zones_2015.kml",
{preserveViewport: true});
function toggleLayers(i)
{
if(layers[i].getMap()==null){
layers[i].setMap(map);
}
else {
layers[i].setMap(null);
}
}
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
var latLng = new google.maps.LatLng(-23.742023, 29.462218);
var markerPosition = new google.maps.LatLng(-23.460136, 31.3189074);
map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 7,
center: latLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var marker = new google.maps.Marker({
position: markerPosition,
title: 'Point A',
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('DRAGGING...');
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('DRAGGING...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('DRAG & DROP THE MARKER ONTO YOUR DESIRED PROPERTY');
geocodePosition(marker.getPosition());
});
}
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-25.43029134371126, 25.979551931249944),
new google.maps.LatLng(-21.919517708560267, 32.164854665624944));
var options = {
bounds: defaultBounds
};
var input = document.getElementById('pac-input');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(input, options);
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
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(25, 25)
};
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#mapCanvas {
width: 1000px;
height: 500px;
float: top;
}
#infoPanel {
float: top;
margin-left: 10px;
}
#infoPanel div {
margin-bottom: 5px;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="SEARCH">
<div id="map-canvas"></div>
CLICK TO DISPLAY ZONES <input type="checkbox" id="CLICK TO HUNTING ZONES" onclick="toggleLayers(0);"/>
<div id="mapCanvas"></div>
<div id="infoPanel">
<div id="address"></div>
<b>MARKER STATUS:</b>
<div id="markerStatus"><i>DRAG & DROP THE MARKER ONTO YOUR DESIRED PROPERTY.</i>
</div>
<b>GPS CO-ORDINATES:</b>
<div id="info"></div>
I am trying to get infoboxes and cluster markers working nicely on my Google map but I am having trouble.
I have successfully got cluster markers working but I don't know how to load the page without all the infoboxes.
Edit: I have edited the below code to Geocodezip's suggestion and it is working.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false&ext=.js">
</script>
<script type="text/javascript" src="infobox.js"></script>
<script type="text/javascript" src="markerclusterer.js"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var secheltLoc = new google.maps.LatLng(-33.8515592,151.0386416),
markers,
myMapOptions = {
zoom: 7,
center: secheltLoc,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), myMapOptions);
// Start InfoBox
function initMarkers(map, markerData) {
var newMarkers = [],
marker;
for(var i=0; i<markerData.length; i++) {
var lat = markerData[i].lat;
var lng = markerData[i].long;
marker = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(lat, lng),
visible: true
}),
boxText = document.createElement("div"),
//these are the options for all infoboxes
infoboxOptions = {
content: boxText,
disableAutoPan: false,
zIndex: null,
maxWidth: 0,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 0.85,
},
closeBoxMargin: "6px 2px 0px 0px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: true
};
newMarkers.push(marker);
//define the text and style for all infoboxes
boxText.style.cssText = "border: 1px solid #333; margin-top: 3px; background: #fff; padding: 1px; font-size: 11px; white-space:nowrap; padding-right: 20px; color: #333";
boxText.innerHTML = markerData[i].BusinessName;
//Define the infobox
newMarkers[i].infobox = new InfoBox(infoboxOptions);
//Open box when page is loaded
// newMarkers[i].infobox.open(map, marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
for ( h = 0; h < newMarkers.length; h++ ) {
newMarkers[h].infobox.close();
}
newMarkers[i].infobox.open(map, this);
map.panTo(new google.maps.LatLng(lat, lng));
}
})(marker, i));
}
var markerCluster = new MarkerClusterer(map, newMarkers);
}
//here the call to initMarkers() is made with the necessary data for each marker. All markers are then returned as an array into the markers variable
markers = initMarkers(map, [
// DON'T EDIT BELOW THIS LINE.
{ lat: -33.878301, long: 150.981126, BusinessName: 'Example<br>InfoBox1' },
{ lat: -33.7452559, long: 150.6897012, BusinessName: 'Penrith Business' },
{ lat: -33.8618472, long: 151.1834829, BusinessName: 'Sydney Business' },
{ lat: -36.5796478, long: 144.7272382, BusinessName: 'Vic Business' },
{ lat: -33.2859758, long: 149.0950847, BusinessName: 'Orange Business' },
{ lat: -33.799211, long: 150.926357, BusinessName: '<a target="_blank" href="http://example.com">Example</a>', Note: 'This is an unseen note.' }
// DON'T EDIT ABOVE THIS LINE.
]);
}
// End InfoBox
// Geocoder below
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var BlueMarker = 'images/blue-marker.png';
var marker = new google.maps.Marker({
map: map,
icon: BlueMarker,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
// End Geocoder
</script>
</head>
<body onload="initialize()">
<div class="container">
<div class="content">
<div id="panel">
<input id="address" type="textbox" value="Melbourne, VIC">
<input type="button" value="< Type location to move map (and place blue marker)" onclick="codeAddress()">
</div>
<div style="width:850px; height: 600px" id="map-canvas"></div>
</div>
</div>
</body>
</html>
Remove the infowindow.open from the code that creates the infowindow if you don't want it open by default.
Comment out or remove this line:
//Open box when page is loaded
newMarkers[i].infobox.open(map, marker);
(leave the infowindow.open in the marker click event listener)
working fiddle
*Hi there, i am new to the whole Google map api environment so please do guide me along.
What i am trying to achieve below is to extract data from either a XML file or a JSON file and plot the locations onto Google map. I am also trying to add a info window whereby it will show different information for each location. I understand that to have a info window, i would have to create a over lay. But the question is how do i actually tag multiple info-window to their markers ?
All markers are displayed well on the map, but the problem is when I click to see info window - info window is always displayed on the same marker. What's the problem?
This is what i have came up with so far and i would greatly appreciate if anyone is able to spot the issue.
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map_canvas { margin: 0; padding: 0; height: 100%; }
</style>
<script
src="https://maps.googleapis.com/maps/api/js sensor=false&libraries=visualization">
</script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(-27.48939, 153.012772),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var script = document.createElement('script');
script.src = 'http://earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week';
document.getElementsByTagName('head')[0].appendChild(script);
}
window.eqfeed_callback = function(results) {
for (var i = 0; i < results.features.length; i++) {
var earthquake = results.features[i];
var coords = earthquake.geometry.coordinates;
var latLng = new google.maps.LatLng(coords[1],coords[0]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: "<div>Hello! World</div>",
maxWidth:100
});
google.maps.event.addListener(marker, "mouseover", function() {
infowindow.open(map, marker);
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Use this instead of marker, when opening infowindow.
google.maps.event.addListener(marker, "mouseover", function() {
infowindow.open(map, this);
});
Hey guys I'm creating a map that uses multiple markers with a distinct infobox for each marker. I know I can use arrays to create the new markers but I don't know how I could make a unique infobox for each marker.
<code>
<html>
<head>
<title>Google Maps Test</title>
<style type="text/css">
#map_container{
width:100%;
height:350px;
}
#hook {
color:#0C6;
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function loadMap() {
var latlng = new google.maps.LatLng(4.3695030, 101.1224120);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_container"),myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"test"
});
var infoWindowOptions = {
content: '<p id="hook">Hello World!</p>'
};
var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
google.maps.event.addListener(marker,'click',function(e){
infoWindow.open(map, marker);
});
}
</script>
</head>
<body onLoad="loadMap()">
<div id="map_container"></div>
</body>
</html>
</code>
you can use this one with infobox example: http://jsfiddle.net/ccJ9p/7/
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
function initialize() {
var secheltLoc = new google.maps.LatLng(49.47216, -123.76307),
markers,
myMapOptions = {
zoom: 13,
center: secheltLoc,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
function initMarkers(map, markerData) {
var newMarkers = [],
marker;
for(var i=0; i<markerData.length; i++) {
marker = new google.maps.Marker({
map: map,
draggable: true,
position: markerData[i].latLng,
visible: true
}),
boxText = document.createElement("div"),
//these are the options for all infoboxes
infoboxOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "12px 4px 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
};
newMarkers.push(marker);
//define the text and style for all infoboxes
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background:#333; color:#FFF; font-family:Arial; font-size:12px; padding: 5px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;";
boxText.innerHTML = markerData[i].address + "<br>" + markerData[i].state;
//Define the infobox
newMarkers[i].infobox = new InfoBox(infoboxOptions);
//Open box when page is loaded
newMarkers[i].infobox.open(map, marker);
//Add event listen, so infobox for marker is opened when user clicks on it. Notice the return inside the anonymous function - this creates
//a closure, thereby saving the state of the loop variable i for the new marker. If we did not return the value from the inner function,
//the variable i in the anonymous function would always refer to the last i used, i.e., the last infobox. This pattern (or something that
//serves the same purpose) is often needed when setting function callbacks inside a for-loop.
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
newMarkers[i].infobox.open(map, this);
map.panTo(markerData[i].latLng);
}
})(marker, i));
}
return newMarkers;
}
//here the call to initMarkers() is made with the necessary data for each marker. All markers are then returned as an array into the markers variable
markers = initMarkers(map, [
{ latLng: new google.maps.LatLng(49.47216, -123.76307), address: "Address 1", state: "State 1" },
{ latLng: new google.maps.LatLng(49.47420, -123.75703), address: "Address 2", state: "State 2" },
{ latLng: new google.maps.LatLng(49.47530, -123.78040), address: "Address 3", state: "State 3" }
]);
}
</script>
<title>Creating and Using an InfoBox</title>
</head>
<body onload="initialize()" style="padding:1em">
<div id="map_canvas" style="width: 100%;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; height: 300px;border:1px solid #666;margin-bottom:1em;box-shadow: 0px 0px 10px #333;"></div>
<p> This example shows the use of an InfoBox as a replacement for an InfoWindow.
<script type="text/javascript">
$(function() {
if($.browser.msie) {
$("<div/>", {html:"<br>Download Firefox <a href='http://www.mozilla.org/de/firefox/new/'>here</a>.", target:"_blank"}).appendTo("body");
}
});
</script>
</body>
</html>