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
7 changes: 3 additions & 4 deletions dist/samples/advanced-markers-basic-style/app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,12 @@

<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>

<!-- 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="37.419,-122.02" zoom="14" map-id="4504f8b37365c3d0"></gmp-map>
</body>
</html>
<!-- [END maps_advanced_markers_basic_style] -->
51 changes: 23 additions & 28 deletions dist/samples/advanced-markers-basic-style/app/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,75 +6,70 @@

// [START maps_advanced_markers_basic_style]
const parser = new DOMParser();
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

async function initMap() {
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

const map = new Map(document.getElementById('map') as HTMLElement, {
center: { lat: 37.419, lng: -122.02 },
zoom: 14,
mapId: '4504f8b37365c3d0',
});

// Each PinElement is paired with a MarkerView to demonstrate setting each parameter.
// Each PinElement is paired with a marker to demonstrate setting each parameter.

// [START maps_advanced_markers_basic_style_title]
// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
map,
const markerWithText = new AdvancedMarkerElement({
position: { lat: 37.419, lng: -122.03 },
title: 'Title text for the marker at lat: 37.419, lng: -122.03',
});
mapElement.append(markerWithText);
// [END maps_advanced_markers_basic_style_title]

// [START maps_advanced_markers_basic_style_scale]
// Adjust the scale.
const pinScaled = new PinElement({
scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
map,
const markerScaled = new AdvancedMarkerElement({
position: { lat: 37.419, lng: -122.02 },
content: pinScaled.element,
});
markerScaled.append(pinScaled);
mapElement.append(markerScaled);
// [END maps_advanced_markers_basic_style_scale]

// [START maps_advanced_markers_basic_style_background]
// Change the background color.
const pinBackground = new PinElement({
background: '#FBBC04',
});
const markerViewBackground = new AdvancedMarkerElement({
map,
const markerBackground = new AdvancedMarkerElement({
position: { lat: 37.419, lng: -122.01 },
content: pinBackground.element,
});
markerBackground.append(pinBackground);
mapElement.append(markerBackground);
// [END maps_advanced_markers_basic_style_background]

// [START maps_advanced_markers_basic_style_border]
// Change the border color.
const pinBorder = new PinElement({
borderColor: '#137333',
});
const markerViewBorder = new AdvancedMarkerElement({
map,
const markerBorder = new AdvancedMarkerElement({
position: { lat: 37.415, lng: -122.035 },
content: pinBorder.element,
});
markerBorder.append(pinBorder);
mapElement.append(markerBorder);
// [END maps_advanced_markers_basic_style_border]

// [START maps_advanced_markers_basic_style_glyph]
// Change the glyph color.
const pinGlyph = new PinElement({
glyphColor: 'white',
});
const markerViewGlyph = new AdvancedMarkerElement({
map,
const markerGlyph = new AdvancedMarkerElement({
position: { lat: 37.415, lng: -122.025 },
content: pinGlyph.element,
});
markerGlyph.append(pinGlyph);
mapElement.append(markerGlyph);
// [END maps_advanced_markers_basic_style_glyph]

// [START maps_advanced_markers_basic_style_text_glyph]
Expand All @@ -83,11 +78,11 @@ async function initMap() {
glyphText: 'T',
glyphColor: 'white',
});
const markerViewGlyphText = new AdvancedMarkerElement({
map,
const markerGlyphText = new AdvancedMarkerElement({
position: { lat: 37.415, lng: -122.015 },
content: pinTextGlyph.element,
});
markerGlyphText.append(pinTextGlyph);
mapElement.append(markerGlyphText);
// [END maps_advanced_markers_basic_style_text_glyph]

// [START maps_advanced_markers_basic_style_hide_glyph]
Expand All @@ -96,14 +91,14 @@ async function initMap() {
//@ts-ignore
glyphText: '',
});
const markerViewNoGlyph = new AdvancedMarkerElement({
map,
const markerNoGlyph = new AdvancedMarkerElement({
position: { lat: 37.415, lng: -122.005 },
content: pinNoGlyph.element,
});
markerNoGlyph.append(pinNoGlyph);
mapElement.append(markerNoGlyph);
// [END maps_advanced_markers_basic_style_hide_glyph]

}

initMap();
// [END maps_advanced_markers_basic_style]
// [END maps_advanced_markers_basic_style]
2 changes: 1 addition & 1 deletion dist/samples/advanced-markers-basic-style/app/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
gmp-map {
height: 100%;
}

Expand Down

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

Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/#map{height:100%}html,body{height:100%;margin:0;padding:0}
*/gmp-map{height:100%}html,body{height:100%;margin:0;padding:0}

This file was deleted.

11 changes: 5 additions & 6 deletions dist/samples/advanced-markers-basic-style/dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,14 @@
<head>
<title>Advanced Marker Basic Customization</title>

<script type="module" crossorigin src="./assets/index-DFenx6lm.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-DW_Ml_OD.css">
</head>
<body>
<div id="map"></div>

<!-- 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-B9CtUwB1.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-BOPY9jPg.css">
</head>
<body>
<gmp-map center="37.419,-122.02" zoom="14" map-id="4504f8b37365c3d0"></gmp-map>
</body>
</html>
<!-- [END maps_advanced_markers_basic_style] -->
7 changes: 3 additions & 4 deletions dist/samples/advanced-markers-basic-style/docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,12 @@

<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>

<!-- 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="37.419,-122.02" zoom="14" map-id="4504f8b37365c3d0"></gmp-map>
</body>
</html>
<!-- [END maps_advanced_markers_basic_style] -->
48 changes: 22 additions & 26 deletions dist/samples/advanced-markers-basic-style/docs/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,91 +6,87 @@
*/
// [START maps_advanced_markers_basic_style]
const parser = new DOMParser();
const mapElement = document.querySelector('gmp-map');
async function initMap() {
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
const map = new Map(document.getElementById('map'), {
center: { lat: 37.419, lng: -122.02 },
zoom: 14,
mapId: '4504f8b37365c3d0',
});
// Each PinElement is paired with a MarkerView to demonstrate setting each parameter.
// Each PinElement is paired with a marker to demonstrate setting each parameter.
// [START maps_advanced_markers_basic_style_title]
// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
map,
const markerWithText = new AdvancedMarkerElement({
position: { lat: 37.419, lng: -122.03 },
title: 'Title text for the marker at lat: 37.419, lng: -122.03',
});
mapElement.append(markerWithText);
// [END maps_advanced_markers_basic_style_title]
// [START maps_advanced_markers_basic_style_scale]
// Adjust the scale.
const pinScaled = new PinElement({
scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
map,
const markerScaled = new AdvancedMarkerElement({
position: { lat: 37.419, lng: -122.02 },
content: pinScaled.element,
});
markerScaled.append(pinScaled);
mapElement.append(markerScaled);
// [END maps_advanced_markers_basic_style_scale]
// [START maps_advanced_markers_basic_style_background]
// Change the background color.
const pinBackground = new PinElement({
background: '#FBBC04',
});
const markerViewBackground = new AdvancedMarkerElement({
map,
const markerBackground = new AdvancedMarkerElement({
position: { lat: 37.419, lng: -122.01 },
content: pinBackground.element,
});
markerBackground.append(pinBackground);
mapElement.append(markerBackground);
// [END maps_advanced_markers_basic_style_background]
// [START maps_advanced_markers_basic_style_border]
// Change the border color.
const pinBorder = new PinElement({
borderColor: '#137333',
});
const markerViewBorder = new AdvancedMarkerElement({
map,
const markerBorder = new AdvancedMarkerElement({
position: { lat: 37.415, lng: -122.035 },
content: pinBorder.element,
});
markerBorder.append(pinBorder);
mapElement.append(markerBorder);
// [END maps_advanced_markers_basic_style_border]
// [START maps_advanced_markers_basic_style_glyph]
// Change the glyph color.
const pinGlyph = new PinElement({
glyphColor: 'white',
});
const markerViewGlyph = new AdvancedMarkerElement({
map,
const markerGlyph = new AdvancedMarkerElement({
position: { lat: 37.415, lng: -122.025 },
content: pinGlyph.element,
});
markerGlyph.append(pinGlyph);
mapElement.append(markerGlyph);
// [END maps_advanced_markers_basic_style_glyph]
// [START maps_advanced_markers_basic_style_text_glyph]
const pinTextGlyph = new PinElement({
//@ts-ignore
glyphText: 'T',
glyphColor: 'white',
});
const markerViewGlyphText = new AdvancedMarkerElement({
map,
const markerGlyphText = new AdvancedMarkerElement({
position: { lat: 37.415, lng: -122.015 },
content: pinTextGlyph.element,
});
markerGlyphText.append(pinTextGlyph);
mapElement.append(markerGlyphText);
// [END maps_advanced_markers_basic_style_text_glyph]
// [START maps_advanced_markers_basic_style_hide_glyph]
// Hide the glyph.
const pinNoGlyph = new PinElement({
//@ts-ignore
glyphText: '',
});
const markerViewNoGlyph = new AdvancedMarkerElement({
map,
const markerNoGlyph = new AdvancedMarkerElement({
position: { lat: 37.415, lng: -122.005 },
content: pinNoGlyph.element,
});
markerNoGlyph.append(pinNoGlyph);
mapElement.append(markerNoGlyph);
// [END maps_advanced_markers_basic_style_hide_glyph]
}
initMap();
Expand Down
Loading