Databases
StackOverflow2013
Postsdbo
POhow do i implement google maps infobox
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow do i implement google maps infobox
    text
    copied!<p>I have a Google map set up that works fine with the default InfoWindow however I'm looking for something a little more stylized, I would like to be able to control how this window looks. I have looked at the InfoBox examples and docs but am unable to see how I can implement this into my code.</p> <p>Javascript:</p> <pre><code>// Enable the visual refresh google.maps.visualRefresh = true; function initialize() { var myLatLng = new google.maps.LatLng(52.58448934362705, -2.2128868103027344); var mapOptions = { zoom: 19, center: myLatLng, mapTypeId: google.maps.MapTypeId.SATELLITE }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var marker = new google.maps.Marker({ map: map, draggable: false, animation: google.maps.Animation.DROP, position: new google.maps.LatLng(52.58448934362705, -2.2128868103027344), icon: { size: new google.maps.Size(32, 32), scaledSize: new google.maps.Size(32, 32), url: "marker.png" } }); }); setMarkers(map, obstacles); } var obstacles = [ ['The Start', -2.2128868103027344 ,52.58448934362705, 1, '&lt;b&gt;The Start&lt;/b&gt;', 'bracken-maze-torture.jpg'], ['Chatway Chase', -2.2232937812805176,52.585369365082556, 1, '&lt;b&gt;Chatway Chase&lt;/b&gt;', 'bracken-maze-torture.jpg'], ['Elephant Fence', -2.2287386655807495,52.585874554601546, 1, '&lt;b&gt;Elephant Fence&lt;/b&gt;', 'bracken-maze-torture.jpg'], ['Elephant Fence', -2.2254180908203125,52.586862101811484, 1, '&lt;b&gt;Elephant Fence&lt;/b&gt;', 'bracken-maze-torture.jpg'], ['Elephant Fence', -2.2167277336120605,52.58403954805975, 1, '&lt;b&gt;Elephant Fence&lt;/b&gt;', 'bracken-maze-torture.jpg'], ['Elephant Fence', -2.216741144657135,52.58465231189634, 1, '&lt;b&gt;Elephant Fence&lt;/b&gt;', 'bracken-maze-torture.jpg'], ['Rabbit Hill', -2.220606207847595,52.58593322139412, 1, '&lt;b&gt;Rabbit Hill&lt;/b&gt;', 'bracken-maze-torture.jpg'], ['Brasher Disley Steplechase', -2.2237443923950195,52.58636018290797, 1, '&lt;b&gt;Brasher Disley Steplechase&lt;/b&gt;', 'bracken-maze-torture.jpg'], ['Bracken Maze Torture', -2.228196859359741,52.58881105708316, 1, '&lt;b&gt;Bracken Maze Torture&lt;/b&gt;', 'bracken-maze-torture.jpg'], ['The Slalom', -2.233647108078003,52.590078809218845, 1, '&lt;b&gt;The Slalom&lt;/b&gt;', 'bracken-maze-torture.jpg'], ['Jungle Trench Battlefileds', -2.2293394804000854,52.5877551121424, 1, '&lt;b&gt;Jungle Trench Battlefileds&lt;/b&gt;', 'bracken-maze-torture.jpg'], ['Gurkha Grand National', -2.23097562789917,52.58586803606421, 1, '&lt;b&gt;Gurkha Grand National&lt;/b&gt;', 'bracken-maze-torture.jpg'], ['Jungle Water Slalom', -2.2270596027374268,52.58515425035844, 1, '&lt;b&gt;Jungle Water Slalom&lt;/b&gt;', 'bracken-maze-torture.jpg'], ['Technospanner Legover', -2.2247743606567383,52.58636670137212, 1, '&lt;b&gt;Technospanner Legover&lt;/b&gt;', 'bracken-maze-torture.jpg'] ]; function setMarkers(map, locations) { var image = { size: new google.maps.Size(32, 32), scaledSize: new google.maps.Size(32, 32), url: "marker.png" }; var makeInfoWindow = function(marker, obs) { // Create info window. In content you can pass simple text or html code. var infowindow = new google.maps.InfoWindow({ content: "&lt;div style='width:220px; position:relative;'&gt;" + obs[4] + "&lt;img src='" + + "'/&gt;&lt;/div&gt;", maxWidth: 220, }); var boxText = document.createElement("div"); boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;"; boxText.innerHTML = "City Hall, Sechelt&lt;br&gt;British Columbia&lt;br&gt;Canada"; var myOptions = { content: boxText ,disableAutoPan: false ,maxWidth: 0 ,pixelOffset: new google.maps.Size(-140, 0) ,zIndex: null ,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: "floatPane" ,enableEventPropagation: false }; // Add listner for marker. You can add listner for any object. It is just an example in which I am specifying that infowindow will be open on marker mouseover google.maps.event.addListener(marker, "click", function() { infowindow.open(map, marker); }); }; for (var i = 0; i &lt; locations.length; i++) { var obstacle = locations[i]; var myLatLng = new google.maps.LatLng(obstacle[2], obstacle[1]); var marker = new MarkerWithLabel({ position: myLatLng, map: map, icon: image, title: obstacle[0], zIndex: obstacle[3], labelContent: i + 1, labelAnchor: new google.maps.Point(14, 29), labelClass: "labels" }); makeInfoWindow(marker, obstacle); } } google.maps.event.addDomListener(window, 'load', initialize); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload