Turn on thread page Beta

Google Maps JavaScript Problem watch

Announcements
    • Thread Starter
    Offline

    22
    ReputationRep:
    guys,

    UWS @IWMTom @Aidan.reed @Whispers @Doonesbury @Paracosm

    i have managed to make the email function work using PHP , thank you so much for your help .

    i have one more hurdle to tackle, and i am going to need all of your support once again.

    this concerns the google maps API, basically the map loads but only a gray box is shown. The map is fully loaded only when i refresh or resize the window.

    any idea how to fix this ?
    • Thread Starter
    Offline

    22
    ReputationRep:
    any ideas anyone?


    @UWS @IWMTom @Aidan.reed @Whispers @Doonesbury @Paracosm
    • Thread Starter
    Offline

    22
    ReputationRep:
    bump
    • Thread Starter
    Offline

    22
    ReputationRep:
    bump
    • Thread Starter
    Offline

    22
    ReputationRep:
    bump

    @UWS @IWMTom @Aidan.reed @Whispers @Doonesbury @Paracosm
    • Very Important Poster
    Offline

    21
    ReputationRep:
    Very Important Poster
    (Original post by study beats)
    is it ok if i submit my work but i will have to let the marker know that they must refresh the page in order to access the google maps implementation due to glitching error from googles servers ?

    do you think i will lose marks? i mean i have no other choice ....the google maps implementation clearly works but its only after you refresh the page
    As long as it works you'll get some marks, you'll probably lose a few for not implementing it properly. May just be a caching issue? No idea.
    • Thread Starter
    Offline

    22
    ReputationRep:
    (Original post by UWS)
    As long as it works you'll get some marks, you'll probably lose a few for not implementing it properly. May just be a caching issue? No idea.
    for not implementing it properly ? hmm....

    i created a new document from scratch and copy and pasted the code from the google documentation itself and it was the same problem. I still dont believe how it can be an implementation problem
    • Very Important Poster
    Offline

    21
    ReputationRep:
    Very Important Poster
    (Original post by study beats)
    for not implementing it properly ? hmm....

    i created a new document from scratch and copy and pasted the code from the google documentation itself and it was the same problem. I still dont believe how it can be an implementation problem
    You should ask on stackoverflow as well.
    https://stackoverflow.com/

    That site was my lifesaver at uni. There's people on there who are experts and will help on stuff like this.
    • Thread Starter
    Offline

    22
    ReputationRep:
    (Original post by UWS)
    You should ask on stackoverflow as well.
    https://stackoverflow.com/

    That site was my lifesaver at uni. There's people on there who are experts and will help on stuff like this.
    already asked twice on that website bro..

    got only 1 answer and that did no resolve the issue.

    i also looked at similar threads regarding my own issue by doing a google search, but those solutions didnt fix my problem either.
    • Very Important Poster
    Offline

    21
    ReputationRep:
    Very Important Poster
    (Original post by study beats)
    already asked twice on that website bro..

    got only 1 answer and that did no resolve the issue.

    i also looked at similar threads regarding my own issue by doing a google search, but those solutions didnt fix my problem either.
    I've checked SO for similar instances of this. Maybe it can be of help to you.
    https://stackoverflow.com/questions/...e-maps-is-grey
    https://stackoverflow.com/questions/...r-page-refresh

    The second link is probably of more use to you, try FireFox browser or the other solutions on that page.
    • Thread Starter
    Offline

    22
    ReputationRep:
    (Original post by UWS)
    I've checked SO for similar instances of this. Maybe it can be of help to you.
    https://stackoverflow.com/questions/...e-maps-is-grey
    https://stackoverflow.com/questions/...r-page-refresh

    The second link is probably of more use to you, try FireFox browser or the other solutions on that page.
    in both those links they mention that the solution is to use that resize function....i have put that in my code and it did not fix the problem....and i dont think i have used that code incorrectly ....

    also i have tried in firefox too, same problem
    • Thread Starter
    Offline

    22
    ReputationRep:
    (Original post by UWS)
    I've checked SO for similar instances of this. Maybe it can be of help to you.
    https://stackoverflow.com/questions/...e-maps-is-grey
    https://stackoverflow.com/questions/...r-page-refresh

    The second link is probably of more use to you, try FireFox browser or the other solutions on that page.
    the google maps resize event does not work...

    however is there any other way i can call a resize event ?
    • Very Important Poster
    Offline

    21
    ReputationRep:
    Very Important Poster
    (Original post by study beats)
    the google maps resize event does not work...

    however is there any other way i can call a resize event ?
    I don't know, you'll need to read the documentation or look on stackoverflow I'm afraid.
    • Community Assistant
    Offline

    20
    ReputationRep:
    Community Assistant
    (Original post by study beats)
    guys,

    UWS @IWMTom @Aidan.reed @Whispers @Doonesbury @Paracosm

    i have managed to make the email function work using PHP , thank you so much for your help .

    i have one more hurdle to tackle, and i am going to need all of your support once again.

    this concerns the google maps API, basically the map loads but only a gray box is shown. The map is fully loaded only when i refresh or resize the window.

    any idea how to fix this ?
    Sigh...

    Can you provide us with a minimal, complete, and verifiable example of your issue?
    • Thread Starter
    Offline

    22
    ReputationRep:
    (Original post by IWMTom)
    Sigh...

    Can you provide us with a minimal, complete, and verifiable example of your issue?
    basically what shows up is a grey canvas , basically a gray box, but you can see the google logo on the bottom left .

    after i resize the window or when i refresh the page , then the maps itself shows up..
    • Community Assistant
    Offline

    20
    ReputationRep:
    Community Assistant
    (Original post by study beats)
    basically what shows up is a grey canvas , basically a gray box, but you can see the google logo on the bottom left .

    after i resize the window or when i refresh the page , then the maps itself shows up..
    No.. give us a reproducible example...
    • Thread Starter
    Offline

    22
    ReputationRep:
    (Original post by IWMTom)
    No.. give us a reproducible example...
    BELOW IS THE JAVASCRIPT CODE FOR THE MAPS:



    1. function initMap() {
    2. var center1 = {lat: 51.258426, lng: -1.361344};
    3. var londoneye = {lat: 51.503331, lng: -0.119543};
    4. var bigben = {lat: 51.500726, lng: -0.124629};
    5. var tower = {lat: 51.508139, lng: -0.075939};
    6. var ss = {lat: 51.449164, lng: -2.608417};
    7. var windsor = {lat: 51.483907, lng: -0.604435};
    8. var stone = {lat:51.178895, lng: -1.826215};
    9. var map = new google.maps.Map(document.getElem entById("map"), {
    10. zoom: 8,
    11. center: center1
    12. });
    13. var map1 = new google.maps.Map(document.getElem entById('map1'), {
    14. zoom: 14,
    15. center: londoneye
    16. });
    17. var map2 = new google.maps.Map(document.getElem entById('map2'), {
    18. zoom: 14,
    19. center: bigben
    20. });
    21. var map3 = new google.maps.Map(document.getElem entById('map3'), {
    22. zoom: 14,
    23. center: tower
    24. });
    25. var map4 = new google.maps.Map(document.getElem entById('map4'), {
    26. zoom: 14,
    27. center: ss
    28. });
    29. var map5 = new google.maps.Map(document.getElem entById('map5'), {
    30. zoom: 14,
    31. center: windsor
    32. });
    33. var map6 = new google.maps.Map(document.getElem entById('map6'), {
    34. zoom: 14,
    35. center: stone
    36. });
    37. var boundary = new google.maps.Map(document.getElem entById('boundary'), {
    38. zoom: 8,
    39. center: center1
    40. });
    41. var cityCircle = new google.maps.Circle({
    42. strokeColor: '#000000',
    43. strokeOpacity: 0.8,
    44. strokeWeight: 2,
    45. fillColor: '#FF0000',
    46. fillOpacity: 0.1,
    47. map: boundary,
    48. center: center1,
    49. radius: 100000
    50. });
    51. var marker1 = new google.maps.Marker({
    52. position: londoneye,
    53. map: map
    54. });
    55. var marker12 = new google.maps.Marker({
    56. position: londoneye,
    57. map: map1
    58. });
    59. var marker2 = new google.maps.Marker({
    60. position: bigben,
    61. map: map
    62. });
    63. var marker22 = new google.maps.Marker({
    64. position: bigben,
    65. map: map2
    66. });
    67. var marker3 = new google.maps.Marker({
    68. position: tower,
    69. map: map
    70. });
    71. var marker32 = new google.maps.Marker({
    72. position: tower,
    73. map: map3
    74. });
    75. var marker4 = new google.maps.Marker({
    76. position: ss,
    77. map: map
    78. });
    79. var marker42 = new google.maps.Marker({
    80. position: ss,
    81. map: map4
    82. });
    83. var marker5 = new google.maps.Marker({
    84. position: windsor,
    85. map: map
    86. });
    87. var marker52 = new google.maps.Marker({
    88. position: windsor,
    89. map: map5
    90. });
    91. var marker6 = new google.maps.Marker({
    92. position: stone,
    93. map: map
    94. });
    95. var marker62 = new google.maps.Marker({
    96. position: stone,
    97. map: map6
    98. });
    99. var marker1content = '<b><font color="black">London Eye</font></b>'
    100. var marker2content = '<b><font color="black">Big Ben</font></b>'
    101. var marker3content = '<b><font color="black">Tower of London</font></b>'
    102. var marker4content = '<b><font color="black">SS Great Brtain</font></b>'
    103. var marker5content = '<b><font color="black">Windsor Castle</font></b>'
    104. var marker6content = '<b><font color="black">Stonehenge</font></b>'
    105. var infowindow1 = new google.maps.InfoWindow({
    106. content: marker1content
    107. });
    108. var infowindow2 = new google.maps.InfoWindow({
    109. content: marker2content
    110. });
    111. var infowindow3 = new google.maps.InfoWindow({
    112. content: marker3content
    113. });
    114. var infowindow4 = new google.maps.InfoWindow({
    115. content: marker4content
    116. });
    117. var infowindow5 = new google.maps.InfoWindow({
    118. content: marker5content
    119. });
    120. var infowindow6 = new google.maps.InfoWindow({
    121. content: marker6content
    122. });
    123. marker1.addListener('click', function() {
    124. infowindow1.open(map, marker1);
    125. });
    126. marker2.addListener('click', function() {
    127. infowindow2.open(map, marker2);
    128. });
    129. marker3.addListener('click', function() {
    130. infowindow3.open(map, marker3);
    131. });
    132. marker4.addListener('click', function() {
    133. infowindow4.open(map, marker4);
    134. });
    135. marker5.addListener('click', function() {
    136. infowindow5.open(map, marker5);
    137. });
    138. marker6.addListener('click', function() {
    139. infowindow6.open(map, marker6);
    140. });
    141. google.maps.event.trigger(map, 'resize');
    142. }



    BELOW IS THE CSS USED FOR THE MAPS, OBVIOUSLY YOU CAN CALL THIS IN THE BODY, PLEASE KEEP IN MIND I AM USING JQUERY MOBILE THOUGH.



    1. #map {
    2. height: 400px;
    3. width: 100%;
    4. margin: 0 auto;
    5. margin-top: 10%;
    6. }
    7. #map1{
    8. height: 400px;
    9. width: 100%;
    10. margin: 0 auto;
    11. margin-top: 10%;
    12. }
    13. #map2{
    14. height: 400px;
    15. width: 100%;
    16. margin: 0 auto;
    17. margin-top: 10%;
    18. }
    19. #map3{
    20. height: 400px;
    21. width: 100%;
    22. margin: 0 auto;
    23. margin-top: 10%;
    24. }
    25. #map4{
    26. height: 400px;
    27. width: 100%;
    28. margin: 0 auto;
    29. margin-top: 10%;
    30. }
    31. #map5{
    32. height: 400px;
    33. width: 100%;
    34. margin: 0 auto;
    35. margin-top: 10%;
    36. }
    37. #map6{
    38. height: 400px;
    39. width: 100%;
    40. margin: 0 auto;
    41. margin-top: 10%;
    42. }
    43. #boundary{
    44. height: 400px;
    45. width: 100%;
    46. margin: 0 auto;
    47. margin-top: 10%;
    48. }
    • Community Assistant
    Offline

    20
    ReputationRep:
    Community Assistant
    (Original post by study beats)
    snip
    Please, the smallest reproducible example, on Codepen or JSFiddle.
    • Thread Starter
    Offline

    22
    ReputationRep:
    (Original post by IWMTom)
    Please, the smallest reproducible example, on Codepen or JSFiddle.
    https://jsfiddle.net/2hrLg88u/

    i have laid out everything properly , not sure why its not showing up?
    • Community Assistant
    Offline

    20
    ReputationRep:
    Community Assistant
    (Original post by study beats)
    https://jsfiddle.net/2hrLg88u/

    i have laid out everything properly , not sure why its not showing up?
    There is clearly a lot missing here - this isn't an MCV demonstration, and as such, I cannot help you. StackOverflow will tell you the same.
 
 
 
Reply
Submit reply
Turn on thread page Beta
TSR Support Team

We have a brilliant team of more than 60 Support Team members looking after discussions on The Student Room, helping to make it a fun, safe and useful place to hang out.

Updated: July 30, 2017
Poll
Cats or dogs?

The Student Room, Get Revising and Marked by Teachers are trading names of The Student Room Group Ltd.

Register Number: 04666380 (England and Wales), VAT No. 806 8067 22 Registered Office: International House, Queens Road, Brighton, BN1 3XE

Write a reply...
Reply
Hide
Reputation gems: You get these gems as you gain rep from other members for making good contributions and giving helpful advice.