Step-by-step Guide On Calling Google Map Javascript API For ...

Create initMap() function in another script tag where you will use the google.maps.Map and google.maps.Marker objects to call map and ... Google Step-by-stepGuideOnCallingGoogleMapJavascriptAPIForBeginners2020byDavidHwangonAugust6th,2020|~4minuteread Thisisastep-by-steptutorialtocallGoogleMapthroughAPIforpeoplewithlittleexperienceinJavascript.Ifyouarefamiliarwiththelanguage,youshouldbeabletofollowalongwiththeinstructionsintheGoogleMapsPlatformwithoutahitch.Thispostisperfectforthosewhojustwanttofollowalonginorder. HereisthelinktoGoogleMapsPlatformforreference: https://developers.google.com/maps/documentation/javascript/overview Overviewofthe5StepProcess Createoropenthe.htmlyouaregoingtoworkwith. CopyandpastethescripttagprovidedintheGoogleMapsPlatformatthebottomofthebodytag. "> GetanAPIkey(theuniqueidentifierforyourmap)toinsertinthescriptwhereYOUR_API_KEYplaceholderis. Createadivwithid=”map”(wherethemapwillbedisplayed)andastyleforthatdiv. CreateinitMap()functioninanotherscripttagwhereyouwillusethegoogle.maps.Mapandgoogle.maps.Markerobjectstocallmapandmarkersonthedivwithid=”map”. Details That’sallyouneedtodotocallthemapusingGoogleAPI!Thefollowingarethedetails: 1)and2)arestraight-forward.Justgoaheadandpastethatscripttagbeforetheendof. Togetstarted,google“GoogleAPIconsole”orgoto: https://console.developers.google.com/projectselector2/apis/dashboard?pli=1&supportedpurview=project Beforeyoustart,makesureyouenablebillingonGoogleCloudProjectand“Activate”yourfreetrial(pop-upontopofyourscreenorclickthenavigationbaronthetopleft,thenclickbilling).Thereisa$200monthlycredit,andthisismorethanenoughtocoverforthemajorityofthewebsiteswithmoderatetraffic.Inotherwords,thisisfree.Hereisapricingtableforyourreference: https://cloud.google.com/maps-platform/pricing/sheet/ Withoutthebillingaccount,youwillgetaBillingNotEnabledMapErrorintheconsole.Hereisalinkthatshowsthelistoferrorsyoumightencounterandhowyoumightgoaboutthem: https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error ShapingtheFutureofHealthcarewithGoogleCloudLearnhowhealthcareorganizationsareleveragingGoogleCloudPlatformtohelpreduceoperationalspendwhileincreasingrevenue,improvingthequalityofcare,andmeetingindustrystandards.GettheGuide   Hit“CreateProject”andcreateaprojectwithanameyoufavor. ClicktheNavigationBaronthetopleftcornerandgotoAPIs&Services>Dashboard. Click“+EnableAPIsandServices”atthetopofthepage. Select“MapsJavascriptAPI”forourcase.Hit“Enable.” GotoAPIs&Services>CredentialsundertheNavigationBar. Hit“+CreateCredentials”andselectthe“APIkey.” AmodalcontainingyourAPIkeywouldpopup,andyoucancopythatkeyintoyourclipboard. PastetheAPIkeyinthisscripttagafter“key=”whereYOUR_API_KEYwasplaced.ThistaghasacallbackforaninitMapwhichwewilldefinelater. ... ... ... Createanemptydivwithid=”map”.Thisisthecontainerforthemap.Addastyletothisidinside. NowcreateafunctioncalledinitMapinanotherscripttag(abovethepreviousscripttag). Passing“document.getElementById(‘map’)inthegoogle.maps.Mapobjectwillcreateareferencetotheandthereare2requiredoptions—zoomandcenter. Zoomlevelrangesfrom0to20. YoucaneasilyfindthelatitudeandlongitudeoftheaddressonGoogle. https://www.latlong.net/convert-address-to-lat-long.htmlisoneofthewebsitesthatdoestheconversionforyou. Markerobjecttakesin2options—mapandposition. Finaloverview ... That’sallyouneedtoknowtocallGoogleMapthroughJavascriptAPI.Ihopeyoufoundthisbloghelpful! LeaveaReply Cancelreply ThissiteusesAkismettoreducespam.Learnhowyourcommentdataisprocessed. ←PREVIOUSPOST NEXTPOST→ DavidHwang DavidHwangisanAssociateTechnicalConsultantintheSitecore/MicrosoftBusinessUnit.Hewillbebloggingaboutvariousconceptsintechnologiesforbeginners. MorefromthisAuthor SubscribetotheWeekly Blog Digest: SignUpCategories Google FollowUs