/** 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 add an advanced marker to a map using the \u003ccode\u003eAdvancedMarkerElement\u003c/code\u003e class from the Google Maps JavaScript API.\u003c/p\u003e\n"],["\u003cp\u003eThe code imports the necessary libraries, initializes a map centered on specific coordinates, and then creates and places an advanced marker at the same location.\u003c/p\u003e\n"],["\u003cp\u003eIncluded are code snippets in TypeScript, JavaScript, CSS, and HTML for a complete implementation of this feature.\u003c/p\u003e\n"],["\u003cp\u003eYou can explore the sample further through provided links for documentation, a live demo (JSFiddle), and instructions for running it locally using Git and Node.js.\u003c/p\u003e\n"]]],["The example initializes a map and adds an advanced marker. It imports the \"maps\" and \"marker\" libraries from Google Maps. In both TypeScript and JavaScript, it defines `initMap`, which creates a `Map` object with specified center, zoom, and map ID. An `AdvancedMarkerElement` is then created, linked to the map and positioned at the same coordinates. CSS sets the map height and page layout. HTML includes the map div, links CSS, and imports JavaScript. The sample can be cloned and run locally using Git, Node.js, and npm.\n"],null,["This example shows creating a new `AdvancedMarkerElement` to add an advanced\nmarker to a map.\n\nRead the\n[documentation](/maps/documentation/javascript/advanced-markers/add-marker). \n\nTypeScript \n\n```typescript\nasync function initMap() {\n // Request needed libraries.\n const { Map } = await google.maps.importLibrary(\"maps\") as google.maps.MapsLibrary;\n const { AdvancedMarkerElement } = await google.maps.importLibrary(\"marker\") as google.maps.MarkerLibrary;\n\n const map = new Map(document.getElementById('map') as HTMLElement, {\n center: { lat: 37.4239163, lng: -122.0947209 },\n zoom: 14,\n mapId: '4504f8b37365c3d0',\n });\n\n const marker = new AdvancedMarkerElement({\n map,\n position: { lat: 37.4239163, lng: -122.0947209 },\n });\n}\ninitMap();https://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/samples/advanced-markers-simple/index.ts#L8-L26\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\nasync function initMap() {\n // Request needed libraries.\n const { Map } = await google.maps.importLibrary(\"maps\");\n const { AdvancedMarkerElement } = await google.maps.importLibrary(\"marker\");\n const map = new Map(document.getElementById('map'), {\n center: { lat: 37.4239163, lng: -122.0947209 },\n zoom: 14,\n mapId: '4504f8b37365c3d0',\n });\n const marker = new AdvancedMarkerElement({\n map,\n position: { lat: 37.4239163, lng: -122.0947209 },\n });\n}\ninitMap();https://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/dist/samples/advanced-markers-simple/docs/index.js#L8-L24\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/advanced-markers-simple/docs/style.css#L7-L24\n```\n\nHTML \n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eDefault Advanced Marker\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/advanced-markers-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/advanced-markers-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/advanced-markers-simple\n npm i\n npm start"]]
