/** Always set the map height explicitly to define the size of the div element* that contains the map.*/#map{height:100%;}/** Optional: Makes the sample page fill the window.*/html,body{height:100%;margin:0;padding:0;}
Git and Node.js are required to run this sample locally. Follow theseinstructionsto install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-09-04 UTC."],[[["\u003cp\u003eThis example demonstrates how to create a basic Google Map centered on Sydney, Australia.\u003c/p\u003e\n"],["\u003cp\u003eIt provides code snippets in TypeScript, JavaScript, CSS, and HTML to display the map.\u003c/p\u003e\n"],["\u003cp\u003eUsers can interact with the sample via JSFiddle or Google Cloud Shell, or clone and run it locally.\u003c/p\u003e\n"],["\u003cp\u003eCloning the sample requires Git and Node.js, along with specific commands for setup and execution.\u003c/p\u003e\n"]]],["The code initializes a Google Map centered on Sydney, Australia, using both TypeScript and JavaScript. The `initMap` function asynchronously imports the \"maps\" library and creates a new map object. The map is displayed within a designated `div` element, and the CSS ensures the map container fills the page. HTML sets up the page, links CSS, includes the JavaScript code, and loads the Maps JavaScript API. Users can clone, install dependencies, and run the example locally or via cloud.\n"],null,["This example creates a map that's centered on Sydney, New South Wales,\nAustralia. \n\nTypeScript \n\n```typescript\nlet map: google.maps.Map;\nasync function initMap(): Promise\u003cvoid\u003e {\n const { Map } = await google.maps.importLibrary(\"maps\") as google.maps.MapsLibrary;\n map = new Map(document.getElementById(\"map\") as HTMLElement, {\n center: { lat: -34.397, lng: 150.644 },\n zoom: 8,\n });\n}\n\ninitMap();https://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/samples/map-simple/index.ts#L8-L17\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\nlet map;\nasync function initMap() {\n const { Map } = await google.maps.importLibrary(\"maps\");\n map = new Map(document.getElementById(\"map\"), {\n center: { lat: -34.397, lng: 150.644 },\n zoom: 8,\n });\n}\ninitMap();https://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/dist/samples/map-simple/docs/index.js#L9-L17\n```\n| **Note:** The JavaScript is compiled from the TypeScript snippet.\n\nCSS \n\n```css\n/* \n * Always set the map height explicitly to define the size of the div element\n * that contains the map. \n */\n#map {\n height: 100%;\n}\n\n/* \n * Optional: Makes the sample page fill the window. \n */\nhtml,\nbody {\n height: 100%;\n margin: 0;\n padding: 0;\n}\nhttps://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/dist/samples/map-simple/docs/style.css#L7-L24\n```\n\nHTML \n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eSimple Map\u003c/title\u003e\n\n \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./style.css\" /\u003e\n \u003cscript type=\"module\" src=\"./index.js\"\u003e\u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n\n \u003c!-- prettier-ignore --\u003e\n \u003cscript\u003e(g=\u003e{var h,a,k,p=\"The Google Maps JavaScript API\",c=\"google\",l=\"importLibrary\",q=\"__ib__\",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=\u003eh||(h=new Promise(async(f,n)=\u003e{await (a=m.createElement(\"script\"));e.set(\"libraries\",[...r]+\"\");for(k in g)e.set(k.replace(/[A-Z]/g,t=\u003e\"_\"+t[0].toLowerCase()),g[k]);e.set(\"callback\",c+\".maps.\"+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=\u003eh=n(Error(p+\" could not load.\"));a.nonce=m.querySelector(\"script[nonce]\")?.nonce||\"\";m.head.append(a)}));d[l]?console.warn(p+\" only loads once. Ignoring:\",g):d[l]=(f,...n)=\u003er.add(f)&&u().then(()=\u003ed[l](f,...n))})\n ({key: \"AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8\", v: \"weekly\"});\u003c/script\u003e\n \u003c/body\u003e\n\u003c/html\u003ehttps://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/dist/samples/map-simple/docs/index.html#L8-L22\n```\n\nTry Sample \n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/map-simple/jsfiddle)\n\nClone Sample\n\n\nGit and Node.js are required to run this sample locally. Follow these [instructions](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to install Node.js and NPM. The following commands clone, install dependencies and start the sample application. \n\n git clone https://github.com/googlemaps-samples/js-api-samples.git\n cd samples/map-simple\n npm i\n npm start"]]
