MapMarker

Examples

• Basic MapMarker

  React

  import {
    reactExtension,
    Map,
    MapMarker,
  } from '@shopify/ui-extensions-react/checkout';
  
  export default reactExtension(
    'purchase.checkout.block.render',
    () => <Extension />,
  );
  
  function Extension() {
    return (
      <Map
        apiKey="YOUR_GOOGLE_MAPS_API_KEY"
        latitude={-28.024}
        longitude={140.887}
        zoom={4}
        accessibilityLabel="Map"
      >
        <MapMarker
          latitude={-28.024}
          longitude={140.887}
          accessibilityLabel="Map marker for Innamincka, Australia"
        />
      </Map>
    );
  }
  

  JS

  import {extension, Map, MapMarker} from '@shopify/ui-extensions/checkout';
  
  export default extension('purchase.checkout.block.render', (root) => {
    const map = root.createComponent(
      Map,
      {
        apiKey: 'YOUR_API_KEY',
        accessibilityLabel: 'Map',
        latitude: -28.024,
        longitude: 140.887,
        zoom: 4,
      },
      [
        root.createComponent(MapMarker, {
          latitude: -28.024,
          longitude: 140.887,
          accessibilityLabel: 'Map marker for Innamincka, Australia',
        }),
      ],
    );
  
    root.appendChild(map);
  });