I decided to take a break from implementing the PHP code and apply some jQuery to make the design more appealing to the user. The homepage is quite dull at the moment this is because there really isn't much need for any PHP apart from the login form therefore adding jQuery will help to fill up the page.
In order to implement a map from Google I needed to login into my account to be allowed access to do so. I used the Map Engine Lite to customize the map to my preferences and specifically to what i need to display.
In order to implement a map from Google I needed to login into my account to be allowed access to do so. I used the Map Engine Lite to customize the map to my preferences and specifically to what i need to display.
Once I customized the map to my own preferences I had to share and make it public in order to embed it within my website.
Once it did this I selected the option to embed the map onto my website and was provided with an iframe embedding code.
After I embedded the map onto the code I saved my index.php document and previewed the page on the web browser. As you can see from the image below I need to re-size the map and place it onto one side. I made several CSS requirements such as the size and positioning of the map but found that the code was not changing anything within the page.
I noticed that one of the reasons why my code was not functional was because within the HTML code of the iframe I had already embedded a width and a height. I removed the CSS within the HTML and found that the code started to respond to the CSS stylesheet although this still was not fully functional.
I viewed the source code on the web browser in order to attempt to find conflicts that result in the absence of the CSS code. I found that the CSS on the iframe was not fully loaded through therefore the style is not being added to the map. Since i am having trouble with this section I will email my lecturers and arrange a date and time where they can help me with this issue.
Sources
Developers.google.com. 2013. Google Maps Tutorials — Google Developers. [online] Available at: https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map [Accessed: 2 Mar 2014].
Stylesheet, .. 2013. .loading css doesn't work from external stylesheet - Stack Overflow. [online] Available at: http://stackoverflow.com/questions/15694190/loading-css-doesnt-work-from-external-stylesheet [Accessed: 3 Mar 2014].
Yates, I. 2013. Quick Tip: Embedding New Google Maps - Tuts+ Web Design Tutorial. [online] Available at: http://webdesign.tutsplus.com/tutorials/quick-tip-embedding-new-google-maps--webdesign-15366 [Accessed: 3 Mar 2014].
Developers.google.com. 2013. Google Maps Tutorials — Google Developers. [online] Available at: https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map [Accessed: 2 Mar 2014].
Stylesheet, .. 2013. .loading css doesn't work from external stylesheet - Stack Overflow. [online] Available at: http://stackoverflow.com/questions/15694190/loading-css-doesnt-work-from-external-stylesheet [Accessed: 3 Mar 2014].
Yates, I. 2013. Quick Tip: Embedding New Google Maps - Tuts+ Web Design Tutorial. [online] Available at: http://webdesign.tutsplus.com/tutorials/quick-tip-embedding-new-google-maps--webdesign-15366 [Accessed: 3 Mar 2014].
No comments:
Post a Comment