<?php
/*$dbname            =’googlemap’; //Name of the database
$dbuser            =’root’; //Username for the db
$dbpass            =”; //Password for the db
$dbserver          =’localhost’; //Name of the mysql server
$dbcnx = mysql_connect (“$dbserver”, “$dbuser”, “$dbpass”);*/
$db = pg_connect(‘host=localhost dbname=postgres user=postgres password=admin port=5432’);
ini_set(‘display_errors’, 1);
?>
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
#map
{
width:1200px;
height:500px;
border:1px solid #ccc;

}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″>
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<link rel=”stylesheet” href=”../theme/default/style.css” type=”text/css”>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
<script src=’http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ’></script&gt;
<script src=”../lib/OpenLayers.js”></script>
<script type=”text/javascript”>
var map, layer, popup;
var markers, feature, marker;

function init(){
map = new OpenLayers.Map(‘map’);
layer = new OpenLayers.Layer.WMS( “OpenLayers WMS”,
http://vmap0.tiles.osgeo.org/wms/vmap0&#8221;, {layers: ‘basic’} );
map.addLayer(layer);
layer = new OpenLayers.Layer.Google( “Google” );
map.addLayer(layer);

map.addControl(new OpenLayers.Control.LayerSwitcher());
<?php
//  ORDER BY  id DESC  LIMIT 60

$query = pg_query(“SELECT name,address,description,locationtype,latitude,langitude,docktype,listingtype,rentalpricing,maxlength,maxbeam,maxdraw,maxclearance,contactname,email,telephone,website,zipcode,location  FROM maps   “);
while ($row = pg_fetch_array($query)){
$Name=$row[‘name’];
$Address=$row[‘address’];
$Description=$row[‘description’];
$LocationType=$row[‘locationtype’];
$DockType=$row[‘docktype’];
$RentalPricing=$row[‘rentalpricing’];
$MaxLength=$row[‘maxlength’];
$MaxBeam=$row[‘maxbeam’];
$contactName=$row[‘contactName’];
$Email=$row[’email’];
$Telephone=$row[‘telephone’];
$WebSite=$row[‘website’];
$zipcode=$row[‘zipcode’];
$Location=$row[‘location’];
$lat=$row[‘latitude’];
$lon=$row[‘langitude’];
echo (“addMarker($lat, $lon,'<h3>Name:</h3><b>$Name</b><br/><h3>Address:</h3>$Address<br/><h3>Description:</h3>$Description<h3>LocationType: $LocationType</h3><h3>RentalPricing: $RentalPricing</h3><h3> MaxLength: $MaxLength</h3><h3> MaxBeam: $MaxBeam</h3><h3>ContactName: $contactName</h3><h3>Email: $Email</h3><h3> Telephone: $Telephone</h3><h3>WebSite: $WebSite</h3><h3>zipcode: $zipcode</h3><h3> Location: $Location</h3>’);\n”);
}
?>
map.zoomToMaxExtent();
addMarker();

}

function changer() {
popup.setBackgroundColor(“red”);
popup.setSize(new OpenLayers.Size(100,600));
//            popup.moveTo(new OpenLayers.Pixel(120,120));
//            popup.setOpacity(.5);
popup.setBorder(“2px solid”);
popup.setContentHTML(“High Chickens”);
}

function add(lat,lon) {
popup = new OpenLayers.Popup(“chicken”,
new OpenLayers.LonLat(lon ,lat),
new OpenLayers.Size(200,200),
“example popup”,
true);
popup.closeOnMove = true;

map.addPopup(popup);
}

function addAnchor(lat ,lon ) {
popup = new OpenLayers.Popup.Anchored(“chicken”,
new OpenLayers.LonLat(lat ,lon),
new OpenLayers.Size(200,200),
“example popup”, true);

map.addPopup(popup);
}

function addMarker(lat,lon) {

markers = new OpenLayers.Layer.Markers(“Markers”);
map.addLayer(markers);
var pt = new OpenLayers.LonLat(lon ,lat);
feature = new OpenLayers.Feature(layer,pt);

//document.write(pt);

marker = feature.createMarker();

markers.addMarker(marker);
marker.events.register(“mousedown”, marker, mousedown);

}

function mousedown(evt) {
if (popup == null) {
popup = feature.createPopup(true);
popup.setContentHTML(“<div style=’background-color:red; width:150;height:100′><a href=’http://www.somethingconstructive.net&#8217; target=’_blank’>click me</a></div>”);
popup.setBackgroundColor(“yellow”);
popup.setOpacity(0.7);
markers.map.addPopup(popup);
} else {
popup.toggle();
}
OpenLayers.Event.stop(evt);
}

/**
* @param {Event} evt
*/
function onPopupMouseDown(evt) {
markers.map.removePopup(popup);
popup.destroy();
popup = null;
OpenLayers.Event.stop(evt);
}

function destroy() {
popup.destroy();
}

function remove() {
markers.removeMarker(marker);
}

function removelayer() {
layer.destroy();
//            map.removeLayer(markers);
}
</script>
</head>
<body onLoad=”init()”>
<h1 id=”title”>Popup Mayhem</h1>

<div id=”tags”>
popup, popups
</div>
<p id=”shortdesc”>
All kinds of ways to create and interact with Popups.
</p>

<div id=”map”></div>
<p>If you open an anchoredbubble and switch to google, it shouldn’t crash. If it does, don’t release OpenLayers.</p>
<div style=”background-color:purple” onClick=”add()”> click to add Popup to map</div>
<div style=”background-color:green” onClick=”addMarker()”> click to add a Marker with an AnchoredBubble popup</div>
<div style=”background-color:blue” onClick=”changer()”> click to modify popup’s attributes</div>
<div style=”background-color:red” onClick=”remove()”> click to remove the popup from map</div>
<div style=”background-color:gray” onClick=”removelayer()”> click to remove the markers layer</div>
<div style=”background-color:orange” onClick=”alert(marker.onScreen())”> marker.onscreen()?</div>
<div style=”background-color:yellow” onClick=”destroy()”> click to destroy the popup from map</div>
<div id=”docs”>
Detailed description of this example needs to be written.
</div>
</body>
</html>