Mama Mia’s Pizzeria Stage 5 – Coding Part 4

Over the past couple of days I worked on designing and coding the locations page. This was my first time working with the google maps API, but I have worked with other google APIs in the past, so it was pretty simple to figure out the basics.

I started out by doing some thumbnail sketches of possible layouts.


I toyed with the idea of having one map with both locations, but the two locations were far enough away that you couldn’t see much detail about the cross streets or nearby businesses on one map. Because of this I decided to go with one map for each location.

I decided to keep things pretty simple, but I could always go back and add more features. I kind of the like the idea of the last sketch where a map with both locations is displayed and then a div with more specific information would be displayed once you selected a location.

I skipped the prototyping stage for this page and went straight into coding, so it came together pretty quickly.

Here is a screenshot of the completed page.


I am happy with how the page turned out, although I have not done much testing different screen sizes, so there are some more tweaks that will need to be made.

Of course you can still see the live version of the site [HERE]

and the Git Repo [HERE]




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s