message: initMap is not a function - CodeRanch

In your url you told Maps that you had a callback named initMap that you wanted it to call. But you have no such function. PostReply BookmarkTopic WatchTopic NewTopic programmingforums Java Mobile Certification Databases Caching Books Engineering MicroControllers OS Languages Paradigms IDEs BuildTools Frameworks ApplicationServers OpenSource ThisSite Careers Other PieElite allforums thisforummadepossiblebyourvolunteerstaff,including... Marshals: CampbellRitchie PaulClapham TimCooke JeanneBoyarsky LiutaurasVilda Sheriffs: FrankCarver HenryWong RonMcLeod SaloonKeepers: TimMoores FritsWalraven TimHolloway StephanvanHulst CareyBrown Bartenders: AlHobbs PietSouris HimaiMinh Forum: HTMLPageswithCSSandJavaScript message:initMapisnotafunction   MonicaShiralkar RanchHand Posts:2604 13 posted2yearsago Numberofslicestosend: Optional'thank-you'note: Send IamtryingtoshowmapusingGoogleMaps Icreatedanapikeyon GoogleCloudConsoleandactivatedit.Next,Igavereferencesasbelowusingthekey :        Also,Icreateddivasbelow: BelowaretheMap.jscontents:   letmap;   map=newgoogle.maps.Map(document.getElementById("map"),{     center:{       lat:-34.397,       lng:150.644     },     zoom:8   }); Howeverthemapisnotdisplayedandonclickingthechromedebuggeritshowsthebelowerror message:"initMapisnotafunction" Fullerrormessage: message:"initMapisnotafunction" name:"InvalidValueError" stack:"Error↵  atnewue(https://maps.googleapis.com/maps/api/js?key=MyApiKey&callback=initMap&libraries=&v=weekly:72:72) Thanks.   BearBibeault Sheriff Posts:67663 173 Ilike... posted2yearsago Numberofslicestosend: Optional'thank-you'note: Send InyoururlyoutoldMapsthatyouhadacallbacknamedinitMapthatyouwantedittocall.Butyouhavenosuchfunction.Soyoushouldnotbesurprisedthatthere'sacomplaint. Ifyoudon'tneedtocallthecallback,removethatportionoftheurl. [Askingsmartquestions][AboutBear][BooksbyBear]   MonicaShiralkar RanchHand Posts:2604 13 posted2yearsago Numberofslicestosend: Optional'thank-you'note: Send Thanks.Iremovedthecallbackandmadeitlikebelow   Now,Igetthebelowmessage: message:"Map:ExpectedmapDivoftypeElementbutwaspassednull." name:"InvalidValueError" stack:"Error↵  atnewue(https://maps.googleapis.com/maps/api/js?key=MyKey:72:72)↵    BearBibeault Sheriff Posts:67663 173 Ilike... posted2yearsago 1 Numberofslicestosend: Optional'thank-you'note: Send YouarelikelyexecutingyourscriptbeforetheDOMloads,sothedivdoesn'texistyet. [Askingsmartquestions][AboutBear][BooksbyBear]   MonicaShiralkar RanchHand Posts:2604 13 posted2yearsago Numberofslicestosend: Optional'thank-you'note: Send Thanks.BychangingtheorderIcouldgetridoftheerrormessage.Iamgettingnoerrorsnow. HowevernoMapgetsdisplayed. InthebodyIhave: Followedby:    AndIhavethebelowintheheadsection       Sonow,thereisnoerrorbutnoMapdisplayed. IamusingDotNetCoresoitisacshtmlpage ,ifitcanberelatedtotheissue.   MonicaShiralkar RanchHand Posts:2604 13 posted2yearsago Numberofslicestosend: Optional'thank-you'note: Send Totryandisolatetheissue,Ididlikebelow Test WhenIdebuginitiallyitshows'Test'. However'Test'disappearswhenbelowlinegetsexecuted: map=newgoogle.maps.Map(document.getElementById("map"),{     center:{       lat:-34.397,       lng:150.644     },     zoom:8   }); Iwasexpectingthatwhenthislineexecutesitwillreplacethe'Test'withtheMap.However,TestdisappearsbutnoMapgetsdisplayed.   BearBibeault Sheriff Posts:67663 173 Ilike... posted2yearsago Numberofslicestosend: Optional'thank-you'note: Send DoyouhaveCSSthatgivesthedivanon-zeroarea? [Askingsmartquestions][AboutBear][BooksbyBear]   MonicaShiralkar RanchHand Posts:2604 13 posted2yearsago Numberofslicestosend: Optional'thank-you'note: Send Yes.Belowisthecssentry: #map{   height:100%; } IthinktoisolatethisissueIcantrytheHTMLcode(mapdiv)inanewcshtmlpage(insteadofexisting)andseeifitworks.   NormRadder Rancher Posts:4871 38 posted2yearsago 1 Numberofslicestosend: Optional'thank-you'note: Send Shouldthemap=statementandfollowingbeinaninitMapfunctionthatissettobethecallback? Thissitehasanexample:https://codepen.io/robey/pen/QyewZw   MonicaShiralkar RanchHand Posts:2604 13 posted2yearsago Numberofslicestosend: Optional'thank-you'note: Send NormRadderwrote:Shouldthemap=statementandfollowingbeinaninitMapfunctionthatissettobethecallback? Thissitehasanexample:https://codepen.io/robey/pen/QyewZw Thanks.Iwillcheckthistoo.   MonicaShiralkar RanchHand Posts:2604 13 posted2yearsago Numberofslicestosend: Optional'thank-you'note: Send Ihaveidentifiedwhereproblemisbutdon'tknowwhattheexactreasonis. First,IcreatedanewCSHTMLpageandtried. Thesameresult.TestdisappearedandMapdidnotgetdisplayed. Next,insteadofusingtheexistingcss(namelysite.css)withentry#map{   height:100%; }  IremoveditsreferenceandcreatedabrandnewCSS(namelyMap.css)andgaveit'sreference. Itworksfinethistimeandloadedthemap. BelowistheMap.css html,body{   height:100%;   margin:0;   padding:0; } #map{   height:100%; } Belowisthesite.css(thelastlinehasentryfor#Map) body{   padding-top:70px;/*Requiredpaddingfor.navbar-fixed-top.Removeifusing.navbar-static-top.Changeifheightofnavigationchanges.*/   background-image:url('/images/pattern.png');   background-repeat:repeat;   font-family:'SourceSansPro',sans-serif; } .slide-image{   width:100%; } .carousel-holder{   margin-bottom:30px; } .carousel-control, .item{   border-radius:4px; } .caption{   height:130px;   overflow:hidden; }   .captionh4{     white-space:nowrap;   } .thumbnailimg{   width:100%; } .addToCart{   padding-right:10px;   padding-left:10px; } .thumbnail{   padding:0; }   .thumbnail.caption-full{     padding:9px;     color:#333;   } footer{   margin:50px0; } .navbar{   background-image:none; } .navbar-inverse{   background-color:#a593c2;   border-color:#a593c2; } .nav.navbar-nav.navbar-rightlia{   color:white;   font-size:1.2em; } .navbar.nav>li>a{   font-size:1.2em;   text-shadow:0-1px0rgba(0,0,0,0.25);   color:white; } .carousel.item{   height:400px; } .itemimg{   position:absolute;   top:0;   left:0;   min-height:400px; } .btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.open.dropdown-toggle.btn-primary{   background-color:#fcaeae!important;   border-color:#fba1a1!important; } .btn{   background-color:#fcaeae!important;   border-color:#fba1a1!important; } body{   font-family:Arial,Helvetica,sans-serif;   margin:0;   padding:0;   border:0;   outline:0; } .navbar{   margin-left:-15px;   margin-right:-15px;   overflow:hidden;   background-color:#333; }   .navbara{     float:left;     font-size:16px;     color:white;     text-align:center;     padding:14px16px;     text-decoration:none;   } .subnav{   float:left;   overflow:hidden; }   .subnav.subnavbtn{     font-size:16px;     border:none;     outline:none;     color:white;     padding:14px16px;     background-color:#99A3A4;     font-family:inherit;     margin:0;   }   .navbara:hover,.subnav:hover.subnavbtn{     background-color:#CB4335;   } .subnav-content{   display:none;   left:0;   background-color:#CB4335;   width:auto;   z-index:0;   position:fixed }   .subnav-contenta{     float:left;     color:white;     text-decoration:none;   }     .subnav-contenta:hover{       background-color:#eee;       color:black;     } .subnav:hover.subnav-content{   display:block; } #ajaxSpinnerImage{   display:none; } #map{   height:100%; }   NormRadder Rancher Posts:4871 38 posted2yearsago Numberofslicestosend: Optional'thank-you'note: Send Canyoupostthefullhtmlpagethatshows theinitMapfunctionandtheotherscriptcode? HaveyoutriedusingtheDeveloper/debugfeaturesofabrowser?   MonicaShiralkar RanchHand Posts:2604 13 posted2yearsago Numberofslicestosend: Optional'thank-you'note: Send Belowistheoriginalcshtmlpage. AsIsaid,themapdisplayedonlyoncreatinganewcshtmlpagewithnewcssreference.