Jules McDEEeeeeeeee

FNL YR PRJCT

Month: March, 2013

Daily Problem Diary – Friday March 29th

Today I’ve been working my way through some styling and functionality issues with the UI.

The JQuery Mobile site is seriously so great for referencing. The demos section has everything you need for building a nice framework.

I’ve also been touching up on some basic HTML and CSS with W3 Schools and other online resources such as Stack Overflow.

The more I get everything together and functioning correctly, the more I can begin to play around with the CSS and get this looking exactly how I want it to.

Advertisements

Daily Problem Diary – Wednesday March 27th

So, today I have decided to tackle the UI for my app.

I will be using the JQuery Mobile UI Framework to build the app. We had previously done some of this development in last semesters Emerging Technology class, so I had a basic understanding of how it works. It a fun and pretty straight forward way to build nice mobile UI structures.

I’m using my mockups to work by, and referencing the JQuery Demo libraries.

 

End of Day – Tuesday March 26th

So today didn’t go so great in terms of solving my problem. The problem today was to try and insert content into the Info Windows. Each Info Window will contain its own piece of information with links to the content pages for that particular location.

The ‘Beginners Guide to Google Maps API’ runs through a tutorial on how to inject HTML content into one Info Window, however my task is using the array and I need different content for each Info Window.

I have decided to move on from this problem for the moment and look into working on my UI. At the moment, in terms of my map, I have a working map of Dublin that included all 12 location markers.

Daily Problem Diary – Tuesday March 26th

So today I’m moving onto adding HTML content to my Info Windows. Again, I’m referencing the ‘Beginning Google Maps API’ book to try and figure this one out. The book runs through a tutorial on adding HTML content to one Info Window, however I’m now dealing with 12, and all with different content. Off the top of my head, I would imagine the content will be added by referencing each variables Index number, but sure we’ll see as I go along. I’m most likely going to be referencing various internet sources also. WISH ME LUCK!

Ill update at the end of the day.

End of Day – Monday March 27th

BOOM! PROBLEM SOLVED!

I posted earlier today regarding the problem I was having with getting multiple markers on my map. I figured it out anyway, which has left me in a very good mood!

I had been following the tutorials in the ‘Beginning Google Maps API’ book, but came up against a problem with the array and for loopI just couldnt get the the markers to display on my map, so I moved onto to looking at some other tutorials. I came across this tutorial here http://www.dreamdealer.nl/tutorials/placing_multiple_markers_on_a_google_map.html. In my original code, I used an array literal: 

var myArray = [ ];

I then entered the values using the push method:

myArray.push();

But the markers were not showing on my map

I then tried the code below which shows the Lat Lng values directly entered into the array and it worked.

I also added onload = ‘initializeMaps()’ to the <body> tag in my HTML file.

 

var locations = [

[‘The GPO’, 53.349331, -6.260724],
[‘Liberty Hall’, 53.348393, -6.25541],
[‘Bolands Mill’, 53.342159, -6.237267],
[‘South Dublin Union’, 53.340512, -6.29486],
[‘Jacobs Factory’, 53.338543, -6.268795],
[‘City Hall’, 53.343881, -6.267195],
[‘St.Stephens Green’, 53.339767, -6.260504],
[‘The Four Courts’, 53.346888,-6.273365],
[‘Mount Street Bridge’, 53.337727,-6.240657],
[‘North King Street’, 53.349908, -6.276175],
[‘Moore Street’, 53.350484, -6.262641],
[‘Kilmainham Gaol’, 53.34202, -6.309628]

];

 

function initializeMaps() {
var latlng = new google.maps.LatLng(53.346888,-6.273365);
var mapOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
disableDefaultUI: true
};

var map = new google.maps.Map(document.getElementById(“googleMap”), mapOptions);

var infowindow = new google.maps.InfoWindow(), marker, i;

for (i = 0; i < locations.length; i++) {

marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});

google.maps.event.addListener(marker, ‘click’, (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}

 

 

 

Screen Shot 2013-03-25 at 20.47.28

 

Screen Shot 2013-03-25 at 20.47.43

 

Daily Problem Diary – Monday March 27th

So Im gonna update my blog here with updates of any problems I am trying to resolve with the code.

Right now, Im having difficulty in trying to display multiple place markers on my map.

The solution to displaying  multiple markers on a map is to store all the Lat Lng values in an array and have it run through a loop where it will run code to create markers for each Lat Lng and also an Info Window.

At the minute, I’m running through the code to find any errors. My syntax is showing clear in Dreamweaver, however when run in Chrome no markers are being displayed on my map.

OMFG.

So we’re ‘off’ for the next 2 weeks on our Easter Break. The next 2 weeks are going to be solely dedicated to FYP. I seriously want to try and put every other module out of my head (as crazy as that sounds) and get in the zone with this app. I know I’m under pressure, and I know this is gonna be tough. I just wanna keep focused on this because if I try and factor in everything else (which is how its been over the last 2 months or so) I’m gonna get completely overwhelmed.

ITS CRUNCH TIME BITCHES.

A CLASSIC

……and all I can think about are cocktails. SEND HELP PLEASE.

http://www.svennerberg.com/bgma3/

83622

RAP GAME JAVASCRIPT.

Gotta get this map up and running.

I’ve been jumping between figuring out how to get the map part of the app working(Javascript), and then also directing focus on the UI side of coding also(HTML5, CSS, JQueryMobile).

w3 Schools is a great reference to have.

I went through their tutorial on the Google Maps API. I set up an API key with Google, which is essential for development. I’ve got a working map now, with a marker and info window. The next step for me is to create a map with multiple markers (the 12 locations for the app). I’ve had to do some searching for other tutorials, and Im trying to incorporate the code for multiple markers into what I already have working.

http://www.w3schools.com/googleAPI/default.asp

http://blog.mridey.com/2010/11/maps-api-javascript-v3-multiple-markers_08.html

http://www.geocodezip.com/v3_MW_example_map1.html

view-source:http://www.geocodezip.com/v3_MW_example_map1.html

HOLY MOLY. THIS IS ME.