Multiple Pin Map
Getting the map working
We have gone through all the setup aspects of getting the multiple marker map to work with directorypress. This is the last step in editing the submit listing form. In the wordpress control panel when clicking the theme editor, you need to find the submit listing PHP file. When you access this you now need to add the functions into this page, so that after submissions new entries can be added to your directory, as well as new markers placed on your map. Below we will include the code we have used, and what aspects you need to edit to suit your map.
FIND THIS CODE
First you need to fin this piece of code in the submit PHP file.
// MAP LOCATION
if( isset($_POST['Dir']['map_location']) && strlen($_POST['Dir']['map_location']) > 2){
add_post_meta($POSTID, "map_location", strip_tags($_POST['Dir']['map_location']));
}
PASTE THIS CODE
Now you can paste this code just below the above mentioned code.
$posttitle = $_POST['Dir']['title'];
$aurl = $_POST['Dir']['url'];
$d=0;
// SAVE CUSTOM FIELD DATA
if(is_array($_POST['custom']) ){
foreach($_POST['custom'] as $in_array){
add_post_meta($POSTID, $in_array['name'], $in_array['value']);
$databasefield[$d] = $in_array['name'];
$databasevalue[$d] = $in_array['value'];
//started editing for geocoding on submission
define("MAPS_HOST", "maps.google.com");
define("KEY", "
enter your API key from google here");
// Initialize delay in geocode speed
$delay = 0;
$base_url = "http://" . MAPS_HOST . "/maps/geo?output=xml" . "&key=
enter you API key from google here" . KEY;
$address = $databasevalue[2];
$id = $row["id"];
$request_url = $base_url . "&q=" . urlencode($address);
$xml = simplexml_load_file($request_url) or die("url not loading");
$status = $xml->Response->Status->code;
if (strcmp($status, "200") == 0) {
// Successful geocode
$geocode_pending = false;
$coordinates = $xml->Response->Placemark->Point->coordinates;
$coordinatesSplit = split(",", $coordinates);
// Format: Longitude, Latitude, Altitude
$lat = $coordinatesSplit[1];
$lng = $coordinatesSplit[0];
}
usleep($delay);
//ended editing for geocoding on submission
mysql_query("INSERT INTO map (posttitle,url,$databasefield[0],$databasefield[1],$databasefield[2],
$databasefield[3],$databasefield[4],lat,lng) VALUES ('$posttitle','$aurl','$databasevalue[0]','$databasevalue[1]','$databasevalue[2]',
'$databasevalue[3]','$databasevalue[4]','$coordinatesSplit[1]',
'$coordinatesSplit[0]')");
$d++;
EDIT THE BOLD
If you have followed this tutorial through all the steps, you will recognize some of the database fields we have created in this code. These are the fields you have to edit to correspond with your database fields. In addition, this is where we enter our API key for the Google Maps API v3. Once you have completed this, and you use the submit form, the map will function. As we appreciate we are not proffesional tutorial writers, please leave a comment with any issues, and we see if we can help.
Setting the database
This is the next step, setting up your database to work with the multiple map markers in wordpress, using the directorypress theme.
For the purpose of our tutorial we are using the directorypress theme with wordpress, so when we deal with the final step, we will integrate all the functions into the submit form of the specific theme.
Access your database, and using whatever process you like create a new table. We called our table ”map”. Within this table we have set up some fields we used in getting the map working. We could write here a massive amount of data, but figured a screenshot of the database after setup, displaying the fields with the settings should suffice. If you need some help with this, please leave a comment and we will answer.
The PHP files
The following two files need to be uploaded to your root folder. We will give you the code (courtesy of Google) and explain what you need to change.
phpsqlajax_dbinfo.php
This file allows your map code to access your database.
$username="your db username";
$password="your db password";
$database="your db name";
?>
Should be easy to figure out what you have to do here.
phpsqlajax_genxml.php
This is the secondary file, and we have already in the first stage identified where you ”call” to this file.
require("phpsqlajax_dbinfo.php");
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr); $xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
// Opens a connection to a MySQL server
$connection=mysql_connect (localhost, $username, $password);
if (!$connection) {
die('Not connected : ' . mysql_error());
}
// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
// Select all the rows in the markers table
$query = "SELECT * FROM map WHERE 1";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo '
echo 'posttitle="' . parseToXML($row['posttitle']) . '" ';
echo 'url="' . $row['url'] . '" ';
echo 'gpaddress1="' . $row['gpaddress1'] . '" ';
echo 'gpaddress2="' . $row['gpaddress2'] . '" ';
echo 'address="' . parseToXML($row['address']) . '" ';
echo 'gptel="' . parseToXML($row['gptel']) . '" ';
echo 'gpahtel="' . parseToXML($row['gpahtel']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo '/>';
}
// End XML file
echo '';
?>
We have used bold to higlight the fields in this file you have to change to suit your map. Firstly, if you have changed the first php file name, change it. Secondly, change the databse fields to correlate with your own database field names. It is worth mentioning here that address in our databse reflects the UK post code, used in this map for the geocoding aspect.
DirectoryPress Google Map
The first map we have mashed together using the DirectoryPress theme is on GP Surgery directory website. We wanted to create a map with multiple pins that reflect all the entries in the database. And of course we wanted to integrate this with both wordpress and directorypress.
We are not trying to over complicate the process so rather than try and explain all the code and how to create it, this is our simple copy and paste approach to achieving this map. It needs to be said that this map is set for geocoding in the UK. We are planning some expansion for other countries and will publish here on this site when we are done.
The map code
We have used an iframe to display the map. There are other ways to do this of course, but for our purpose the iframe was the easiest way. To view the source code of the map, and you can copy it directly to your site – please visit our GP Surgery website map here.
We will now break the code down into segments which you have to edit to work with your specific website.
Marker Image
Find this code. It is the image used as pins. Change it to your desired pin image.
icon: 'http://www.gpsurgery.info/gp_marker.png'};
Center Map and Zoom
Find this piece of code.
geocoder = new google.maps.Geocoder();
latlng = new google.maps.LatLng(53.311604, -3.517972);
map = new google.maps.Map(document.getElementById("map"), {
center: latlng,
zoom: 6,
This reflects where the map is centered at what zoom level. If you change the LatLng to your desired centre point it will centre the map there. In addition you can edit the zoom level to create the view you want.
Calling PHP file
Now look for this code.
//Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
xml = data.responseXML;
We will also give you this file later in the tutorial. This needs to be ftp to your root folder. If you change the file name, you have to edit it here as well. Our filename is phpsqlajax_genxml.php, but you can call it whatever.php
Database Fields
Find this code.
posttitle = markers[i].getAttribute("posttitle");
url = markers[i].getAttribute("url");
var gpaddress1 = markers[i].getAttribute(“gpaddress1″);
var gpaddress2 = markers[i].getAttribute(“gpaddress2″);
var address = markers[i].getAttribute(“address”);
var gptel = markers[i].getAttribute(“gptel”);
var gpahtel = markers[i].getAttribute(“gpahtel”);
This is the fields we have created in a new table on the database. We will get to the database as we proceed, but these fields are what you have to change to correlate with the fields you have created in your database. Simple. If you created a field called “abcde” you have to change both instances of the variable. Please note that posttitle is NOT the same as post_title in the wordpress database.
Database Fields
Find this code.
http://www.gpsurgery.info/' + posttitle + '"target="_blank">' + posttitle + '
+ gpaddress1 + '
' +
gpaddress2 + '
' +
address + '
' +
'tel:' + gptel + '
' +
This is the code for the info window as it pops up when you hover over the pin. We had to ”cut” a bit of code away here to display this, but it should make sense. Here you add the fields you want to display on the info window. Look just ABOVE the code on the source code and you will see the info window styling. You can edit this as well to suit your needs.
The rest of the code can be left alone, apart from the styling and size which you should be able to see at the bottom of the source code. If it doesn’t make sense, just leave a message and we see if we can answer your question.
STEP 2: This LINK will take you to the second installment of the tutorial, where we give you the PHP files to be uploaded to your root folder.
