WEEK 12 - BelFi Promotional Material
BelFi has been mentioned on Ni Tech Blog and Google Maps Mania
I am extremely happy with how the business cards turned out, my next step is to create some BelFi stickers. I was recommended to create some stickers by Lee Munroe, I can hand these stickers out to businesses that are listed on the website and they can display them on their premises. I also love to receive free stickers, so I feel they will encourage people to visit the website when I hand them out. I would like the stickers to be transparent and waterproof so they can be stuck onto any surface indoor or outdoor. I am going to include the BelFi brand on these stickers and simple add .co.uk after it as there will not be enough room for the full URL. The only disadvantage of getting stickers printed is the expense and the fact that printers will not print them in batches less and 150-200, but I feel that they will be worth it. You can view the BelFi stickers below.
Im extremely happy with the outcome of the cards and stickers and I was going to leave the promotional material at that, but then I came across the website http://www.weebadgers.com/. They create custom pin badges with an extremely fast turnaround time and reasonable price. I couldn't resist so I used the same brand as the stickers and ordered some 25mm pin badges. Within 2 days I received the badges and i’m extremely happy with how they turned out. Since I only ordered 15 of the badges i’m going to hand them out to a few friends and to the staff on the DES 512 module. So count yourself lucky. You can view the badges below.
All in all i’m more than happy with how all of the promotional materials turned out and I really think they will help in promoting the website around Belfast. I plan to hand some of the stickers and cards out at the upcoming BarCamp Belfast conference and at Refresh which is on once a month. I am also going to post some of the stickers out to the businesses that are listed on the website and hope that they will display them on there premises.
WEEK 11 - BelFi Mobile Web App
I am going to begin by creating the design for the mobile web app, I came across the framework iWebKit, “iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp." It basically gives you the framework design for an webapp, this includes the Apple theme thats used in most apps today and the fonts, images and buttons. I can then edit these and add my own content, images and whatever else I want. An advantage to this approach over a normal iPhone app is that I can build it all using HTML, CSS & jQuery, this means I don't need to have any knowledge of the Apple programming language Cocoa or buy the Apple Developer license to be able to use the iPhone SDK software. Some of the disadvantages though are that I cant use all the iPhone hardware features, in my case the only feature that I will miss using is the Google Maps app within the iPhone. After a few hours playing with the iWebKit framework I managed to put together the main menu for the BelFi webapp. I decided to use the default iPhone theme as people will be familiar using it and in this case its about functionality not looks. I want the app to load fast and be easy to use on the move. The image below shows the main menu.
My next step is to create the submit section of the app. I am going to use a submission form like the main BelFi website but I am also going to add a ‘Find Me’ button that will detect the users current location using HTML5 Geolocation. This option will only work on the iPhone but this webapp is created specifically for the iPhone even though most of the features will still work on other mobile devices. Nick introduced to me a tutorial on HTML5 geolocation that I believe will help me when creating this feature. It is quite simple to get a basic version of this working, when I assign the script to a button and the button is clicked it will plot the users current location on a Google Map. Below is the code that is used to make it happen.
function findLoc(){
if (!navigator.geolocation) {
alert('Sorry, your browser does not support Geo Services');
}
else {
// Get the current location
navigator.geolocation.getCurrentPosition(showMap);
return false;
}
Since GeoLocation uses HTML5 technology it is not yet supported by all browsers, at the minute it is only supported on iPhones and in Firefox, so if a browser is not supported it will display an error message when the ‘Find Me’ button is pressed. You can see this quite clearly in the code above. If the browser is supported it will send your location via latitude and longitude and plot it on the Google Map. Now that I can get the browser to pick up the latitude and longitude of the users location and plot it on a google map my next step is to incorporate into the webapp. I am going to do this by importing the lat and long value into the address field of the submission form when the user clicks find me, i’m going to use jQuery to make this happen, this means if the address is wrong they can click find me again and it will overwrite the value in the text field. Below is the jQuery script I added to make this happen. With the 'name=Address' being the address input field.
$('input[name=Address]').val(function(index) {
return lat + ", " + lon;
});
My next step is to create the search page of the web app. Because I cant use the Google Maps software built into the iPhone i’m going to have to create a search function that doesn't use a map and just searches and displays text. I am going to make a PHP search script that searches through the BelFi database that all the hotspots are stored in. This method is not as interactive as the map on the main site but it still displays the same results and the user can still find hotspots by entering street name, post-codes etc. This script is easy enough to create and it connects to my database and loads each of the fields. I have created a short video below of the different features within the BelFi iPhone webapp.
Now that I have created the web app I need to upload it to the BelFi web server and make a script that will redirect to the mobile version if it detects your browsing the website on a mobile device. I thought this would be quite a complex script but after some Googling I found a suitable solution. The solution that I found was a small PHP script that I add to the above the
section of each of my pages on the BelFi website. It will detect if the user is browsing on a mobile device before the site loads up and if you are it will redirect you to http://m.belfi.co.uk without the user noticing. The script can be viewed below.
define('MOBILE_SITE_URL', 'http://m.belfi.co.uk/');
if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') !== FALSE ||
strpos($_SERVER['HTTP_USER_AGENT'], 'iPod') !== FALSE) {
header("Location: " . MOBILE_SITE_URL);
}
WEEK 10 - Soft Launch Feedback & Lookaly
Later that day a few friends retweeted about BelFi so the website name and URL was beginning to spread, although I was yet to receive any feedback or submissions. The next day I checked my email and had received about 5 Wi-Fi hotspot submissions from different people, this was quite encouraging as some people had actually spent time on the website and bothered to fill in a submit form. A few days later I received an email from Lee Munroe, the message can be viewed below.
Even though I spent a lot of hours getting my own rating system working within the Google Maps InfoWindow I felt that hooking up with a successful Northern Ireland business is an opportunity that cant be missed. I replied to the email and by the end of the day I had the Lookaly rating system successfully working within my Google Map. The ratings on the Lookaly website actually mean something unlike the rating system that I had originally implemented. I feel though that I learnt a lot from creating my own rating system and believe the time wasn't wasted. You can view the new rating system by clicking the image below.
Later that day I received an email with some feedback regarding the BelFi website. The email was from Paul McKeever at Front Design Studio in Belfast, he had been pointed to my site by Lee Munroe. You can view his email by clicking the image below.
Receiving compliments on my website is extremely encouraging. Regarding Paul’s feedback, I plan on creating an iPhone web app version of the BelFi website to make it easier for the user to submit to the website and integrate some geolocation technologies into it so that it can pick up the users current location. I have also added the websites description into the header and plan on adding some easy to read instruction to the website before I launch the final version. I also received another email from Lee Munroe offering some feedback to the website, it can be viewed below.
Regarding Lee’s feedback, I feel that having the map full screen as homepage is a great idea, before the homepage seemed very empty and just a waste of a page. I plan on adding a key to the website to let the user know what each marker on the maps indicates, I also have added a drop-down menu to the submission page indicating the different internet types. I feel that receiving this feedback has been extremely helpful for BelFi and I am very grateful to those who submitted Wi-Fi hotspots and gave feedback. I am now going to continue to work on the project over the Easter break and hopefully will still continue to receive hotspot submissions. I have attached an image below that shows some of the Tweets that BelFi received over the beta stage, as I said before its very encouraging to see retweets like this.
WEEK 09 - BelFi Soft Launch (Beta)
I am going to begin by creating a PHP submit form that will enable users to submit new hotspots to me via email that I can then add to the BelFi database using the admin panel I created last week. This is a very important part of the website as the content will mostly be user driven and added by local people from the Belfast area. Another advantage to this is that when I come to launch the project in May I will not be launching a website with no content, as hopefully I will receive some submissions between now and then. I am going to create a simple submission form that uses text input boxes and send the submission to an email address using a PHP script. I have created some simple submission forms in the past so I am able to reuse some the code from these. The PHP script will simply takes the data from the text inputs that I have added and create a HTML file from results and email this to whatever email address I define in the PHP code. At the minute there is no validation on this form as if the user isn't sure of the post-code or exact address they can still submit the hotspot location and if I add validation to the text input fields this means that the user will have to enter information into each field. If you click the image above you can see the front end of the submission form, as the backend code is written in PHP it cannot be viewed from the browser.
My next step is to create the contact form for the BelFi site. This form will use the same type of PHP script as the submission form but this time I am going to add some validation to the text fields so that it can not be accessed by spam bots, that trail the internet looking for contact pages. I am going to create the text input fields the same way as I did for the submission form, but this time I am going to add a PHP command to make sure each field within the contact form is populated with data or the script will not send the contact information to my defined email address and will give the user an error. I am adding the following PHP code to the script to detect if the input fields have been populated with data.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><title>Google Maps JavaScript API Example</title><script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAep-SDKWUVXHK0Cdbqpj2JBTqYDM8QYfixItjgZoyDQUB6MmtSxTvVMSUOx9Yq9PkG9V5HWDuomGn9g"type="text/javascript"></script><script type="text/javascript">//<![CDATA[function load() {if (GBrowserIsCompatible()) {var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(54.5972686, -5.9301088), 13);}}//]]></script></head><body onload="load()" onunload="GUnload()"><div id="map" style="width: 100%; height: 450px"></div></body></html>
if(trim($name) == '') {
$error = 'Attention! You must enter your name';
} else if(trim($email) == '') {
$error = 'Attention! Please enter a valid email address.';
} else if(!isEmail($email)) {
$error = 'Attention! You have enter an invalid e-mail address, try again.';
}
if(trim($subject) == '') {
$error = 'Attention! Please enter a subject.';
} else if(trim($comments) == '') {
$error = '
As you can see from the PHP code above the user will be presented with an error if they leave the input fields empty and will not be able to submit there query until they have filled in all of the forms. Although this validation stops me from receiving blank messages I still need to add some more so that I don't receive messages through from spam bots. An easy way to add more validation is to write a simple PHP query that will ask the user a basic question, e.g. Whats 1+1. There will be a text box for the user to add the answer, and if the user enters the correct value, 2, the PHP script will send the message. Spam bots are unable to answer questions like this so they will receive and error and just move on from your website. I use the same PHP command as before but this time I defined the answer to the question in the PHP code. The question that I asked the user is ‘3+1=’ and I have put the correct answer in the PHP code, if the user types an incorrect answer an error message will be displayed. Below you can view the PHP that I used.
} else if(trim($verify) == '') {
$error = 'Attention! Please enter the verification number.;
} else if(trim($verify) != '4') {
$error = '
When the user fills each of the text fields and successfully answers the question, the message they entered will be submitted to the email address I defined just like that of the submission form. To view the finished contact form click the image below.
Now that I have completed these two pages I am now going to link all of the pages together so they are ready for Soft Launch. I now have the home page of the website, the browse page that displays the Google Map, submit page and contact page. At the minute I have around 10 hotspots in the database that are visible on the map, I feel that the website is now ready for soft launch and hopefully I will receive some feedback. I am going to use Twitter to launch the beta version of the site and hopefully it will be viewed by my followers. Below is a link to the BelFi Beta version.
WEEK 08 - BelFi Admin Panel
This week I decided that I would create a simple but secure admin panel that would let me login and allow me to add new hotspots to the database without having to login to my CPanel and then the database and the add the information, which takes me to a lot of different login screens. Last year I learnt how to create a simple PHP login script that is also secure. I am going to remake this and then add a submit form that will enable me to add new data straight into the database which then can be geocoded automatically and marked onto the Google Map. The login script can be set up to create as many different login details as needed but in this case I am just going to add one. Once I enter a username and password the script will take me to a secure page that can only be viewed by going through the secure gateway. If this page is left open or unattended for any length of time the cookie that is stored when you log in will expire and it will automatically log out, I am also going to add a logout button to the page which gives the option of a manual logout. Within the secure page I am going to add some text input boxes and link them to the database using the database address and login details like I did with the geocoding script. I am going to add a text input for ‘name’, ‘address’, ‘postcode’, and make a drop down menu so I can choose the Wi-Fi ‘type’. Under this i’m going to add a submit button that when clicked will add the new record into the database. I didn’t create a rating field on the page as when I insert a blank rating into the database it starts the rating at 0 starts out of 5 which is what I need. The rating will then increase when people vote. Below is a link to the admin login page and below that again shows an image of the secure page that allows me to input the data.
As this is the admin login system I don't want to go into any more detail on the blogs or show the backend script as you will be able to see exactly how it works and even be able see the login details. But I hope you can see from the screenshots the basic function of the login and I have even added some validation that will alert the user if they have entered an incorrect user name and password. You can also see from the image below that I have added a link to update the geocoding, as when I enter new details I can click this if I want to update immediately and not wait on the cron job that will run once an hour.
WEEK 07 - Geocoding & Cron Jobs
At the minute my database will plot the marker on the Google Map using the latitude and longitude value stored. For the few hotspots that I have manually added to the database I have found the latitude and longitude my self and added them to the database. I have been using websites to find out the latitude and longitude for specific addresses which is a very tedious job. This week I am going to create a geocoding script that will automatically take the address from the database and add the lat and long value for that address into the database. This means the process will be fully automatic and probably a lot more accurate. Google provide a free geocoding service that I can link to when creating my script. The Google Maps Geocoding script can be used to geocode 15,000 addresses a day, which I feel is more than enough for the BelFi website. Once I have created the script I can then set up a ‘Cron Job’ on my server to run the script once an hour so that the addresses in the database will always be kept up to date, this also means that the process is fully automatic and I will never need manually update this part of the database again. Below shows the Cron Job that I have set up to run the script once an hour.
I found a great tutorial on the Google Maps API website that gives me step by step instructions on how to create a geocoding script that will work within a MySQL database. I am not going to go through the tutorial in this blog as it can be viewed here. The script will basically connect to the MySQL database when I define the database address and login details, it will then read the ‘address’ field within the database and update the lat and long for that address, it will go through all of the addresses within the database in a matter of seconds. If it fails to geocode an address it will skip it and move onto next, the ‘Cron Job’ will then email me of any errors that occurred during the process. Below shows a snippet of the geocoding script.
WEEK 06 - Star Rating System
This week I am going to concentrate on creating a rating system that will allow users to rate a Wi-Fi hotspot out of 5. I then intend to add this rating system to each of the Google Map InfoWindows so that each marker on the map will have its own rating. I also want to add a function to the rating system to only let the user vote once on each marker, this will mean that the votes will be fair and as accurate as possible. I was recommended a tutorial by a friend that will aid me in creating this rating system, its exactly what i’m looking for and it even uses cookies to assure that the user can only cast 1 vote on each location. I am not going to go through this tutorial in the blogs as it can be viewed here and the instructions are pretty straight forward. This tutorial requires that I have knowledge of PHP, MySQL and jQuery. It uses PHP to send and receive the rating from the MySQL database and used jQuery for the hover over effect of the stars and for the cookies part of the system. My knowledge of MySQL databases isn’t great but from creating the Google Map database and from reading through this tutorial I am able to create the database with no major problems. Next step is to build the PHP backend of the system that will connect to the database and send and receive the ratings, this step is quite straight forward. The final part involves the jQuery. When I hover over the stars I can select what rating I want to submit, this effect is achieved using jQuery. Also when I click my rating jQuery is used to record the rating which then connect to the PHP send file that will add it to the database. The send files then adds a cookie to the users cookies that will disable them from casting another vote on the same location. Clicking the image below will show you the rating system or click here to view fullscreen.
Now that I have the rating system successfully displaying and writing to the database it is now time to start adding the ratings into the Google Map InfoWindows. Each rating is associated to an ID in the database so this means each location in the database can have a different rating associated to it. In order to add the rating into the Google Map InfoWindow I will need to pull the rating via the XML that currently pulls all the markers and displays them on the map. To do this I need to add a few more lines to the JavaScript that I created in week 3 so that the markers will read the rating from the XML as well as the name, address and post-code. Below shows you the code and the extra I added.
GDownloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var postcode = markers[i].getAttribute("postcode");
var type = markers[i].getAttribute("type");
var rating = markers[i].getAttribute("rating");
var id = markers[i].getAttribute("id");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, postcode, type, rating, id);
map.addOverlay(marker);
}
});
Now that I can now pull the rating from the XML I need to add the HTML from the rating system that I got working earlier into the InfoWindow. To do this I just need to copy the code into the ‘var html =’ part of the JavaScript after the ‘name’, ‘address’ and ‘post-code’ that it is already displaying. This seems simple enough, although after pasting the code in I quickly found out that it caused an error meaning the Google Map would not load up. After some research I learnt that the reason this was happening was because I was inserting this code into JavaScript and the double quotes in the HTML was closing the JavaScript statements and causing errors. I learnt that I need to break up the HTML quotes using \ and +. This task was quite time consuming but after an hour I got the HTML and broken up and managed to get the rating system loading up within the InfoWindow. Below shows you an example of how I had to break up the HTML.
html += '
html += ' />';
html += '
html += ' />';
html += '
html += ' />';
html += '
html += ' />';
html += '
html += ' />';
Now that the rating system shows up in each of the InfoWindows I decided that I would click each to test and make sure the database was registering each of the votes. When carrying out this task I quickly realized that the hover part of the rating system wasn't working and that I couldn't cast a vote. The rating system was displaying the rating from the database correctly but I was unable to do anything else. I quickly realized that my problem was that the jQuery part of the rating system was not loading, this was causing the problems with the hover effect and sending the votes to the PHP sender script. After reading some Google Maps API forums I found that this problem is quite common with jQuery and the Google Maps API but it is also quite complex to fix. I created a post on the Google Maps API forum about my issue and I managed to receive a few different replies giving help. After a lot of hours of testing and help on forums I finally found a solution to my problem. The reason that the jQuery script was not loading within the InfoWindow was because the InfoWindow data is JavaScript and not HTML so the JavaScript was not reading any external scripts running on the page. My solution is to incorporate the jQuery script within the Google Maps JavaScript. To do this I added a new function to the current Google Map JavaScript and added the jQuery script into this function. This function then loaded up before the InfoWindow Script enabling the Script to run within the InfoWindow. Although this took me a lot of time I feel that this is an extremely important part of the map and was worth spending the time on. I also learnt a lot about the API and how it works by working on this feature. Below shows you the rating system incorporated into the Map and InfoWindows, you can also view the source to see how I added the jQuery within the JavaScript.
WEEK 05 - Website Initial Design
This week I will be concentrating on creating a design for the BelFi website. Since the project name and some of my ideas have changed slightly since I drew up the Project Proposal I have decided that it may be better to create brand new wireframes for the BelFi site. I began by drawing up some simple wireframe mockups of the site layout. As I said in my Project Proposal I want to keep the website as easy to use as possible and make it as simple as possible for the user to navigate and find what information they need without lots of clicking. I used an online wire-framing tool called ‘Mocking Bird’ to draw up these wireframes. Click the image below view the initial wireframes or click here to download.
As you can see from the images above the layout that I have chosen is extremely simple and hopefully its easy for the user to navigate. The header section of the website that includes the logo and navigation stays the same on each of the different pages, I believe this will make it simple for the user to navigate the website. Now that I have drawn up the wireframes I am now going to begin by building the layout using XHTML and CSS. I have built a lot of websites recently so this process should be straight forward and not too time consuming. I have decided to experiment with some HTML5 & CSS3 technologies when building the new layout, I feel that using these technologies will give me more flexibility when creating the visual design of the website and allow me to add some pretty cool effects with ease. One of the main CSS3 functions that I will be using will be ‘Border Radius’ this enables me to add rounded corners to divs etc with ease and without having to use transparent images. I also plan to add shadows to the main titles on the page, even though this may be subtle small effects like this really can add to the look of your design. To view my initial layout of the homepage built in XHTML and CSS click the image below or click here.
As you can see from the initial design above, the page is extremely easy to read, the navigation is clear and the colours used are very neutral. The navigation is created using CSS3 rounded corners and the background on the buttons is transparent, the hover background helps the user know what link they are clicking as when they hover the background colour will change. The DIV under the header uses rounded corners and I plan to add the Google Map into it. Under that I plan to have some basic instructions for the user telling them how to use the website and eventually add the BelFi twitter cloud to the footer of the page and also some information about the site etc.
I am now going to talk a little about some of the CSS3 I used when creating the navigation for the BelFi initial site design. The navigation is created using a list and styled using CSS. I have added the rounded corners and transparency using CSS3. I have also added a shadow effect to the text in the navigation using CSS3 text-shadow. The code used to add the rounded corners to the DIVs is extremely easy to use and style. As you can see from the image above ‘border-radius’ is used to give the rounded corner effect and curve radius can be increased and decreased using ‘pixels’ the lower the pixel the less of the curve on the corner. Text shadow is also extremely easy to add to any text within your HTML page. As you can see from the image above I have used ‘text-shadow’ to add a 1px drop shadow to the text. I have defined the colour of the shadow by using rgba values instead of the normal hexadecimal value, although you can still use the hexadecimal value if you wish. Effects like this are subtle but defiantly add character to the site and they are extremely easy to achieve using CSS3.
WEEK 04 - Name and Branding
Now that I have made good progress on the Google Maps API part of the project I have decided this week to spend some time working on the branding. I had initially came up with the idea in my project proposal of calling the project Ni-Fi and to display Wi-Fi hotspots to the user for all of Northern Ireland, but after speaking to Nick I decided it might be better to concentrate on one city and have lots of information instead of just a little information for each town in Northern Ireland. After some consideration I decided to concentrate only on the Belfast area and to initially add as many hotspots as possible before I launch the Beta version of the website at Easter. I have decided to call the project BelFi which is very similar to my original name and has a nice look and feel to it. Now that I have the name and location finalized I am ready to begin working on some prototype brands and to choose a suitable colour scheme.
As you can see in the images above I have created a Wi-Fi signal icon and duplicated it 3 times changing the colours each time. I made these to use as custom markers on the Google Map, as you seen in week 3. Blue indicating free Wi-Fi, red indicating you have to pay for Wi-Fi at this location and purple, which is a mix of the red and blue, indicating this location has BT Openzone Wi-Fi. I feel that these icons have professional look to them and I think they could maybe be incorporated into the final BelFi brand. Although after some research I noticed that alot of Wi-Fi branding today has this symbol incorporated into the brand somehow. I decided to leave these just to be used as markers on the map and to try something different for the BelFi brand.
My next step is to try out some different fonts and to work in illustrator to create a ‘different’ type of symbol or icon that represents Wi-Fi, but is not as generic as the symbol I created for the markers. I experimented with a few different fonts that I had found over the last few weeks. I found a symbol that I really thought represented wi-fi and tried to redraw this in Illustrator and somehow fit it into the name. This turned out alot better than I originally thought and tied in extremely well with all of the fonts I had chosen. Above is an image of the different prototype brands that I created.
I showed some of my initial brand prototypes to some designer friends and I filtered my possibilities down to two brands. My personal favorite happened to be included. I decided to choose the top left brand to continue to develop. I used the font ‘Vag Rounded’ within this brand and after some feedback it was decided that the name would be better without the - in between the Bel-Fi. I then experimented around with the Wi-Fi symbol that I created and although I kept it in the same position I increased the size and it fitted perfectly around the font. I am not happy with the current colour scheme of light blue so I decided to try a few different colour schemes. I tried the colour schemes that I added to the map markers and the blue and grey worked extremely well together. I then duplicated the font and used the duplicate to create a shadow effect on the text. I made the colours of the shadow slightly lighter. Above is an image of how my final design turned out.
WEEK 03 - Google Maps API and MySQL Database
Now that I know how to add markers and InfoWindows to the Google Map my next goal is to be able to store multiple markers in a MySQL database that will load on the map and be able to be interacted with by the user. I also want to have an InfoWindow associated to each of the markers that will display some information that is also stored in the database. I have found an extremely useful tutorial on Google Maps API - Google Code website. It shows in step by step instructions how to create a MySQL database, populate it with data and then finally load the data onto the Google Map.
I am not going to repeat the tutorial on this blog as it is quite straight forward to follow and it explains everything in detail. The tutorial can be found here: Using PHP/MySQL with Google Maps. You can see from the image above the different fields that I have added to the MySQL database, each of these fields will be able to be populated with unlimited amounts of data. The database has been set up from my C-Panel using PHP MyAdmin, these options came with my webspace on Siteground.com. Now that the database is set up the next step is to pull the data from the database and display it on the Google Map.
The way this works is that the data is outputted into XML using PHP and then the Google Map read the XML data and plots it on the map. As I will need to add my database login information to this PHP file I have decided it would be better to leave out of the plog. In simple terms, the PHP file logs into the database using a username and password that I set up when creating the database. You then define the fields that you want the data to be pulled from and the PHP script will pull the defined data and display it using XML. As the data is PHP I can not show a screenshot from the browser.
Now that the data is successfully being pulled from the database I now need to add some JavaScript to my Google Map that will load in the values from the XML page. The tutorial that I have been following on Google Code shows me how to do this and it quite easy to understand the principle behind it. Below is the code that I need to add to make this work:
GDownloadUrl("/script/phpsqlajax_genxml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var postcode = markers[i].getAttribute("postcode");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, postcode);
map.addOverlay(marker);
}
});
From looking at the code above, you can see that it is pulling and ‘parsing’ the Name, Address & Post-code fields from the database. It is also pulling the Latitude and Longitude which is used by Google Maps to plot the marker in the desired position. It is then creating a marker that will load point, name, address and post-code. The point is the latitude and longitude of the marker. i.e where it is going to be displayed on the map.
Click here for a working example:
As you can see from the example above the markers on the Google Map are using custom images that I have created. To do this I followed the same tutorial as above on the Google Maps API website. I used the GIcon class to define the custom icons at the beginning of the JavaScript which I can then assign to the markers. I have seen custom markers on a lot of other Google Map Mashup websites but I did not realize that they were so easy to customize. Below is the JavaScript I added to define the custom icons. One of the icons indicated the Wi-Fi is free at this particular marker and the other means you have to pay for Wi-Fi at this marker. The other JavaScript under the image location URL just defines the size of the marker on the map. Below is the code I added to create the custom markers:
var iconBlue = new GIcon();
iconBlue.image = 'http://andrewmccrum.com/maps/database/blue.png';
iconBlue.iconSize = new GSize(25, 19);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var iconRed = new GIcon();
iconRed.image = 'http://andrewmccrum.com/maps/database/red.png';
iconRed.iconSize = new GSize(25, 19);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["free"] = iconBlue;
customIcons["pay"] = iconRed;
Resources:
Using PHP/MySQL with Google Maps
WEEK 02 - Adding Markers to the Google Maps API
This week I have been continuing to work through the 'Beginning Google Maps Application with PHP & Ajax: From Novice to Professional' book. Last week I learnt some of the very basic functions of the API but this week I am going to dive in and learn about plotting markers on the Google Map and then move on to learn how to store markers within a MySQL Database that the Google Map will read and plot. But I have a lot to learn before I am able to do this. A Google Maps marker is a type of overlay that you can add to any Google Map. To add a basic marker to a Google Map all you have to do is to define it with a coordinate of Latitude and Longitude using the GMarker constructor.
Im beginning with a tutorial that will add 10 markers to the map in random positions. As with the example in week 1, I am using the same template that will load up the Google Map in Belfast. I will then add some more JavaScript under the Latitude and Longitude values that will plot 10 random markers using the Lat & Long values. Below is the extra JavaScript that I added to week ones example:
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(latlng));
}
Click here for a working example
Although the tutorial above added markers to the Google Map it is quite useless as I don’t understand the JavaScript used in it and I have no real reason to add ‘random’ markers onto a Google Map. I am now going to try a more simple approach and add a specific marker to the map using a Latitude and Longitude. This is the main way people use to plot markers and its the best way when linking the map to a database. I plan to use this approach when I will be adding multiple markers onto the Map. I have added 1 marker to the map using the same location as before. I have just added the marker using the Lat & Long that I used to display Belfast on the map, but this time a marker will load up in that location. Below is the JavaScript that I added to make this work:
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var point = new GLatLng(54.5972686, -5.9301088);
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
}
Click here for a working example
The code above is a lot simpler to understand. In simply terms, if the browser is compatible it will load the map and display the marker at the latitude and longitude (54.5972686, -5.9301088). It will set the marker in the centre of the map and the zoom level of the map is 13.
Now that I know how to add a marker to the map using Lat and Long I am now going to add an InfoWindow to the marker where I can add some information. An InfoWindow is a great way to show more information about a location. It’s done by adding a click event to the marker with the help of the GEvent class. When the click event is triggered, the InfoWindow is opened using the method Marker.openInfoWindow(). I will be using the InfoWindow to display information about the Wi-Fi at that marker location. E.g. Will give a name and address and maybe add some sort of image. An InfoWindow is able to display anything in HTML and can even be used to display PHP. Below is the JavaScript that I added to allow the user to click the marker and trigger the InfoWindow:
function initialize() {
if (GBrowserIsCompatible()) {
// Init the map
var map = new GMap2(document.getElementById('map'));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(59.5, 14.0), 6);
// Creating a marker
var marker = new GMarker(new GLatLng(59.0, 13.80), {
});
// Adding a click event to the marker
GEvent.addListener(marker, "click", function() {
marker.openInfoWindow('My InfoWindow');
});
// Add the marker to the map
map.addOverlay(marker);
}
Click here for a working example
Resources:
Basic operations with markers in Google Maps
Google Maps API - Google Code
WEEK 01 - Google Maps API Basic's
After a relaxing 2 week break, I decided that this week I would get stuck into my Major Project and begin this by diving straight into the Google Maps API. Last semester I carried out a small amount of research into the background of the API but I didn't get around to actually using it. Over the Christmas break I purchased the book 'Beginning Google Maps Application with PHP & Ajax: From Novice to Professional' which was recommended to me by a few different people. This book starts at the very basics and is the perfect way for me to get my head around this powerful application.
Before I begin working through this book and start creating working examples I need to sign up for a Google Maps API Key. Below is the defination:
The Google Maps API lets you embed Google Maps in your own web pages. A single Maps API key is valid for a single "directory" or domain. You must have a Google Account to get a Maps API key, and your API key will be connected to your Google Account.
I am going to begin by creating a simple HTML page that will load the Google Map at the location I declare, I will declare this location using Latitude and Longitude, this is how Google Maps will always read locations. As you can see from the code below I have began by creating a JavaScript link to my API Key, if this is not declared in the HTML file the page will load up blank and give an API Key error. I then created another piece of JavaScript that tells the page to load the element 'map' if the browser is compatible. As the name suggests this is the Google Map window. Below this I then declared the Latitude and Longitude and the zoom level of the map. I obtained the Latitude and Longitude coordinates from 'http://www.gorissen.info/Pierre/maps/googleMapLocationv3.php' I have chosen Belfast as the location I want to load up. I have then simply created a normal Div and used the id 'map' that I declared above. This will then load the Google Map into this Div and display it to the viewer
Click here for a working example
Resources:
Google Maps API - Google Code
CURRENTLY READING
SOCIAL NETWORKS