search
top

How I built ‘BoatRampDirectory.com’ using PHP, mySQL, and Google maps

Are you looking to integrate Google Maps into your site?  I found an article on the Google Developer site titled ‘Creating a Store Locator with PHP, MySQL & Google Maps’.   Well, I don’t have any stores, but I loved the idea.  So I took the concepts in the article and built BoatRampDirectory.com

The idea is that you input a zip code or the name of a city and state, and the app searches a mySQL database for boat ramps near you.  If you are boater and have a boat on a trailer, you can see how cool this would be.  If you follow along on the above article, there were only a few things I had to do to make it work for boat ramps rather than stores.   First off, my mySQL database had a few more columns.  I wanted that data to also appear in the ballon popup when you click on a marker.   Thus, I had a couple of tweaks to the query, adding the additional fields of address, Notes, Access, WaterType, URL, and WaterBody as so

</pre>
// Search the rows in the markers table
 $query = sprintf("SELECT address, Notes, Access, WaterType, URL, WaterBody, name, lat, lng, ( 3959 * acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) ) AS distance FROM markers HAVING distance < '%s' ORDER BY distance LIMIT 0 , 100",
 mysql_real_escape_string($center_lat),
 mysql_real_escape_string($center_lng),
 mysql_real_escape_string($center_lat),
 mysql_real_escape_string($radius));
 $result = mysql_query($query);

$result = mysql_query($query);
 if (!$result) {
 die("Invalid query: " . mysql_error());
 }
<pre>

Then once I had these records I had to add the fields into the XML that gets produced so that I could use the data in the balloons

 header("Content-type: text/xml");

// Iterate through the rows, adding XML nodes for each
 while ($row = @mysql_fetch_assoc($result)){
 $node = $dom->createElement("marker");
 $newnode = $parnode->appendChild($node);
 $newnode->setAttribute("name", $row['name']);
 $newnode->setAttribute("address", $row['address']);
 $newnode->setAttribute("lat", $row['lat']);
 $newnode->setAttribute("lng", $row['lng']);
 $newnode->setAttribute("distance", $row['distance']);
 $newnode->setAttribute("access", $row['Access']);
 $newnode->setAttribute("notes", $row['Notes']);
 $newnode->setAttribute("WaterBody", $row['WaterBody']);
 $newnode->setAttribute("WaterType", $row['WaterType']);
 $newnode->setAttribute("URL", $row['URL']);
 }

echo $dom->saveXML();
<pre>

Finally, in the locator.php file I needed to modify the createMarker function to that it would add the additional attributes to the ballon. I did this as so:

function createMarker(latlng, name, address,notes, access, watertype, waterbody, URL) {
var html = "<b>" + name + "</b>" ;

if (notes != "")
{
html = html + " <br>"  + notes ;
}

if (address != "")
{
html = html + " <br/>" + address ;
}

if (watertype != "")
{
html = html + "<br/>Water type: " + watertype;
}

if (waterbody != "")
{
html = html + "<br/>Water body: " + waterbody;
}

if (URL != "")
{
html = html + "<br/>For more info visit: <br> " + URL   ;
}

var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent( html);
infoWindow.open(map, marker);
});
markers.push(marker);
}

You might be wondering where I got the ramp data. Well, I just contacted the appropriate state agency and asked them for it. Some of them were so delighted that anybody would show interest in their work that they sent me the requested data with no hassle at all. So you never know until you ask!

Comments are closed.

top