Jules McDEEeeeeeeee


Category: Coding Problems

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.



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


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:


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.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.