Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ <h1>Maps JSAPI Samples</h1>
<li><a href='/samples/control-custom-state/dist'>control-custom-state</a></li>
<li><a href='/samples/control-disableUI/dist'>control-disableUI</a></li>
<li><a href='/samples/control-options/dist'>control-options</a></li>
<li><a href='/samples/control-positioning/dist'>control-positioning</a></li>
<li><a href='/samples/control-positioning-labels/dist'>control-positioning-labels</a></li>
<li><a href='/samples/control-simple/dist'>control-simple</a></li>
<li><a href='/samples/dds-datasets-point/dist'>dds-datasets-point</a></li>
Expand Down
13 changes: 13 additions & 0 deletions dist/samples/control-positioning/app/.eslintsrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"extends": [
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"rules": {
"@typescript-eslint/ban-ts-comment": 0,
"@typescript-eslint/no-this-alias": 1,
"@typescript-eslint/no-empty-function": 1,
"@typescript-eslint/explicit-module-boundary-types": 1,
"@typescript-eslint/no-unused-vars": 1
}
}
41 changes: 41 additions & 0 deletions dist/samples/control-positioning/app/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# Google Maps JavaScript Sample

## control-positioning

This example demontrates custom positioning of the map controls.

## Setup

### Before starting run:

`npm i`

### Run an example on a local web server

`cd samples/control-positioning`
`npm start`

### Build an individual example

`cd samples/control-positioning`
`npm run build`

From 'samples':

`npm run build --workspace=control-positioning/`

### Build all of the examples.

From 'samples':

`npm run build-all`

### Run lint to check for problems

`cd samples/control-positioning`
`npx eslint index.ts`

## Feedback

For feedback related to this sample, please open a new issue on
[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).
22 changes: 22 additions & 0 deletions dist/samples/control-positioning/app/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!doctype html>
<!--
@license
Copyright 2026 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<!-- [START maps_control_positioning] -->
<html>
<head>
<title>Control Positioning</title>

<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
<!-- prettier-ignore -->
<script>(g=>{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=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+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=()=>h=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)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
</head>
<body>
<gmp-map center="-28.643387, 153.612224" zoom="12"></gmp-map>
</body>
</html>
<!-- [END maps_control_positioning] -->
39 changes: 39 additions & 0 deletions dist/samples/control-positioning/app/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/**
* @license
* Copyright 2026 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/

// [START maps_control_positioning]
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;

async function initMap() {
// Request needed libraries.
(await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;

// Get the inner map.
const innerMap = mapElement.innerMap;

// Set the map's controls options.
innerMap.setOptions({
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BLOCK_START_INLINE_CENTER,
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.INLINE_START_BLOCK_CENTER,
},
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.INLINE_START_BLOCK_START,
},
fullscreenControl: true,
});
}

initMap();
// [END maps_control_positioning]
14 changes: 14 additions & 0 deletions dist/samples/control-positioning/app/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"name": "@js-api-samples/control-positioning",
"version": "1.0.0",
"scripts": {
"build": "tsc && bash ../jsfiddle.sh control-positioning && bash ../app.sh control-positioning && bash ../docs.sh control-positioning && npm run build:vite --workspace=. && bash ../dist.sh control-positioning",
"test": "tsc && npm run build:vite --workspace=.",
"start": "tsc && vite build --base './' && vite",
"build:vite": "vite build --base './'",
"preview": "vite preview"
},
"dependencies": {

}
}
17 changes: 17 additions & 0 deletions dist/samples/control-positioning/app/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/**
* @license
* Copyright 2026 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
/* [START maps_control_positioning] */
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}

/* [END maps_control_positioning] */
17 changes: 17 additions & 0 deletions dist/samples/control-positioning/app/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"compilerOptions": {
"module": "esnext",
"target": "esnext",
"strict": true,
"noImplicitAny": false,
"lib": [
"es2015",
"esnext",
"es6",
"dom",
"dom.iterable"
],
"moduleResolution": "Node",
"jsx": "preserve"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
html,body{height:100%;margin:0;padding:0}

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

22 changes: 22 additions & 0 deletions dist/samples/control-positioning/dist/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!doctype html>
<!--
@license
Copyright 2026 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<!-- [START maps_control_positioning] -->
<html>
<head>
<title>Control Positioning</title>

<!-- prettier-ignore -->
<script>(g=>{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=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+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=()=>h=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)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
<script type="module" crossorigin src="./assets/index-DOnEa74s.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-549u98Rk.css">
</head>
<body>
<gmp-map center="-28.643387, 153.612224" zoom="12"></gmp-map>
</body>
</html>
<!-- [END maps_control_positioning] -->
22 changes: 22 additions & 0 deletions dist/samples/control-positioning/docs/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!doctype html>
<!--
@license
Copyright 2026 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<!-- [START maps_control_positioning] -->
<html>
<head>
<title>Control Positioning</title>

<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
<!-- prettier-ignore -->
<script>(g=>{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=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+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=()=>h=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)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
</head>
<body>
<gmp-map center="-28.643387, 153.612224" zoom="12"></gmp-map>
</body>
</html>
<!-- [END maps_control_positioning] -->
35 changes: 35 additions & 0 deletions dist/samples/control-positioning/docs/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
"use strict";
/**
* @license
* Copyright 2026 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
// [START maps_control_positioning]
const mapElement = document.querySelector('gmp-map');
let innerMap;
async function initMap() {
// Request needed libraries.
(await google.maps.importLibrary('maps'));
// Get the inner map.
const innerMap = mapElement.innerMap;
// Set the map's controls options.
innerMap.setOptions({
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BLOCK_START_INLINE_CENTER,
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.INLINE_START_BLOCK_CENTER,
},
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.INLINE_START_BLOCK_START,
},
fullscreenControl: true,
});
}
initMap();
// [END maps_control_positioning]
39 changes: 39 additions & 0 deletions dist/samples/control-positioning/docs/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/**
* @license
* Copyright 2026 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/

// [START maps_control_positioning]
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;

async function initMap() {
// Request needed libraries.
(await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;

// Get the inner map.
const innerMap = mapElement.innerMap;

// Set the map's controls options.
innerMap.setOptions({
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BLOCK_START_INLINE_CENTER,
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.INLINE_START_BLOCK_CENTER,
},
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.INLINE_START_BLOCK_START,
},
fullscreenControl: true,
});
}

initMap();
// [END maps_control_positioning]
17 changes: 17 additions & 0 deletions dist/samples/control-positioning/docs/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/**
* @license
* Copyright 2026 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
/* [START maps_control_positioning] */
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}

/* [END maps_control_positioning] */
17 changes: 17 additions & 0 deletions dist/samples/control-positioning/jsfiddle/demo.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/**
* @license
* Copyright 2026 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/

/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}


7 changes: 7 additions & 0 deletions dist/samples/control-positioning/jsfiddle/demo.details
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
name: control-positioning
authors:
- Geo Developer IX Documentation Team
tags:
- google maps
load_type: h
description: Sample code supporting Google Maps Platform JavaScript API documentation.
22 changes: 22 additions & 0 deletions dist/samples/control-positioning/jsfiddle/demo.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!doctype html>
<!--
@license
Copyright 2026 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->

<html>
<head>
<title>Control Positioning</title>

<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
<!-- prettier-ignore -->
<script>(g=>{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=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+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=()=>h=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)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
</head>
<body>
<gmp-map center="-28.643387, 153.612224" zoom="12"></gmp-map>
</body>
</html>

Loading