Skip to content

Instantly share code, notes, and snippets.

@glueckpress
Last active September 17, 2019 15:29
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save glueckpress/830b0072986fda3743115e0649beb284 to your computer and use it in GitHub Desktop.
Save glueckpress/830b0072986fda3743115e0649beb284 to your computer and use it in GitHub Desktop.
[WordPress][Block Lab] Static Google Map block
<?php
/**
* Block: Map
* Description: Generates a static map image via Google Static Maps API.
*
* @see https://staticmapmaker.com/google/
* @see https://github.com/getblocklab/block-lab
* ----------------------------------------
* Block config:
* ----------------------------------------
* Field Label | Field Name | Field Type
* -------------|--------------|-----------
* Caption | caption | Text
* Address | address | Text
* API key | api-key | Text
* Format | format | Radio
* Width | size-w | Number
* Height | size-h | Number
* Scale | scale | Radio
* Marker color | marker-color | Color
* Marker size | marker-size | Select
* Marker label | marker-label | Select
* Zoom | zoom | Range
* Alt text | alt | Text
* Lazy load | lazy-load | Toggle
* ----------------------------------------
*
* ----------------------------------------
* Static Maps URL anatomy:
* ----------------------------------------
* https://maps.googleapis.com/maps/api/staticmap
* ?center={Hobbinton+NZ}
* &format={jpg|png}
* &key={your-api-key}
* &scale={1|2}
* &size={600}x{300}
* &zoom={1-100}
* &markers=size:{tiny|small|mid}|color:{#ff0000}|label:{0-9|A-Z}|{Hobbinton+NZ}
*/
/**
* This could probably be generated via block_config() and block_field_config(),
* however, since there’s so much early encoding going on and we need `markers`
* separately from other values, it seems easier to set up a dedicated array.
*
* @var array Map figure values
*/
$m = [
'base_url' => 'https://maps.googleapis.com/maps/api/staticmap',
'lazy-load' => block_value( 'lazy-load' ) ? 'loading="lazy"' : 'data-no-lazy="1"',
'link' => sprintf( 'https://www.google.com/maps/place/%s/', urlencode( block_value( 'address' ) ) ),
'map' => [
'center' => urlencode( block_value( 'address' ) ),
'format' => block_value( 'format' ),
'key' => urlencode( block_value( 'api-key' ) ),
'scale' => block_value( 'scale' ),
'size' => sprintf( '%1$sx%2$s', block_value( 'size-w' ), block_value( 'size-h' ) ),
'zoom' => block_value( 'zoom' ),
],
'markers' => [
'size' => urlencode( block_value( 'marker-size' ) ),
'color' => urlencode( block_value( 'marker-color' ) ),
'label' => urlencode( block_value( 'marker-label' ) ),
'address' => urlencode( block_value( 'address' ) ),
],
];
/**
* We can use add_query_arg() only for part of the URL because the `markers`
* query parameter has multiple values separated by pipes, not ampersands.
*
* @var string Static map image URL
*/
$src = sprintf( '%1$s&markers=size:%2$s%%7Ccolor:%3$s%%7Clabel:%4$s%%7C%5$s',
// 1. Base URL + regular query params
add_query_arg( $m[ 'map' ], $m[ 'base_url' ] ),
// 2. `markers` query param with pipe-separated values
$m[ 'markers' ][ 'size' ],
$m[ 'markers' ][ 'color' ],
$m[ 'markers' ][ 'label' ],
$m[ 'markers' ][ 'address' ]
);
// Whew. Let’s do this.
?>
<figure class="Map x<?php print esc_attr( block_value( 'scale' ) ); ?>" style="width:<?php print esc_attr( block_value( 'size-w' ) ); ?>px">
<?php if ( ! empty( block_value( 'caption' ) ) ) : ?>
<figcaption class="Map__caption">
<?php block_field( 'caption' ); ?>
</figcaption>
<?php endif; ?>
<a href="<?php print $m[ 'link' ]; ?>" class="Map__link">
<img src="<?php print $src; ?>" alt="<?php print esc_attr( block_value( 'alt' ) ); ?>" class="Map__image" <?php print $m[ 'lazy-load' ]; ?>/>
</a>
</figure>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment