Skip to content

Commit e7e53d2

Browse files
razwanrazwan
committed
improve map block placeholder styles and avoid crash on frontend when there's no API key
1 parent 24a0c32 commit e7e53d2

File tree

9 files changed

+115
-71
lines changed

9 files changed

+115
-71
lines changed

‎dist/css/editor-rtl.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/editor.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/editor.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -3298,7 +3298,11 @@ var getMapAccentColor = function getMapAccentColor() {
32983298

32993299
return fallbackColor;
33003300
};
3301-
var getCenterFromMarkers = function getCenterFromMarkers(markers) {
3301+
var utils_getCenterFromMarkers = function getCenterFromMarkers(markers) {
3302+
if (typeof google === "undefined" || typeof google.maps === "undefined") {
3303+
return default_map_center;
3304+
}
3305+
33023306
var bounds = new google.maps.LatLngBounds(); // when there is only one marker bounds aren't accurate at great zoom levels
33033307

33043308
if (markers.length === 1) {
@@ -3322,7 +3326,7 @@ var getCenterFromMarkers = function getCenterFromMarkers(markers) {
33223326
return bounds.getCenter();
33233327
};
33243328
var getMarkersCenter = function getMarkersCenter() {
3325-
return getCenterFromMarkers(this.props.attributes.markers);
3329+
return utils_getCenterFromMarkers(this.props.attributes.markers);
33263330
};
33273331
// CONCATENATED MODULE: ./src/store/reducer.js
33283332

‎dist/js/editor.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/frontend.js

+44-32
Original file line numberDiff line numberDiff line change
@@ -1088,7 +1088,11 @@ var getMapAccentColor = function getMapAccentColor() {
10881088

10891089
return fallbackColor;
10901090
};
1091-
var getCenterFromMarkers = function getCenterFromMarkers(markers) {
1091+
var utils_getCenterFromMarkers = function getCenterFromMarkers(markers) {
1092+
if (typeof google === "undefined" || typeof google.maps === "undefined") {
1093+
return default_map_center;
1094+
}
1095+
10921096
var bounds = new google.maps.LatLngBounds(); // when there is only one marker bounds aren't accurate at great zoom levels
10931097

10941098
if (markers.length === 1) {
@@ -1112,7 +1116,7 @@ var getCenterFromMarkers = function getCenterFromMarkers(markers) {
11121116
return bounds.getCenter();
11131117
};
11141118
var getMarkersCenter = function getMarkersCenter() {
1115-
return getCenterFromMarkers(this.props.attributes.markers);
1119+
return utils_getCenterFromMarkers(this.props.attributes.markers);
11161120
};
11171121
// EXTERNAL MODULE: external "jQuery"
11181122
var external_jQuery_ = __webpack_require__(2);
@@ -2620,38 +2624,46 @@ var util_parallaxInit = function parallaxInit($blocks, foregroundSelector) {
26202624
(function ($, window, undefined) {
26212625
var $blocks = $('.novablocks-map');
26222626
util_parallaxInit($blocks);
2623-
$('.js-novablocks-google-map').each(function (i, obj) {
2624-
var $obj = $(obj),
2625-
markers = $obj.data('markers'),
2626-
showLabels = $obj.data('show-labels'),
2627-
showIcons = $obj.data('show-icons'),
2628-
styles = $obj.data('styles'),
2629-
zoom = $obj.data('zoom'),
2630-
hideControls = !$obj.data('controls'),
2631-
pinColor = $obj.data('pin-color'),
2632-
mapOptions = {
2633-
mapTypeId: 'roadmap',
2634-
center: getCenterFromMarkers(markers),
2635-
zoom: zoom,
2636-
styles: addVisibilityToStyles(styles, showLabels, showIcons),
2637-
disableDefaultUI: hideControls,
2638-
clickableIcons: false,
2639-
keyboardShortcuts: false
2640-
},
2641-
map = new google.maps.Map(obj, mapOptions);
2642-
var pinMarkup = pin.replace(/%ACCENT_COLOR%/g, pinColor);
2643-
markers.forEach(function (markerString) {
2644-
var marker = JSON.parse(markerString);
2645-
new google.maps.Marker({
2646-
map: map,
2647-
icon: {
2648-
url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(pinMarkup)
2649-
},
2650-
title: marker.title,
2651-
position: marker.geometry.location
2627+
mapInit();
2628+
2629+
function mapInit() {
2630+
if (typeof google === "undefined" || typeof google.maps === "undefined") {
2631+
return;
2632+
}
2633+
2634+
$('.js-novablocks-google-map').each(function (i, obj) {
2635+
var $obj = $(obj),
2636+
markers = $obj.data('markers'),
2637+
showLabels = $obj.data('show-labels'),
2638+
showIcons = $obj.data('show-icons'),
2639+
styles = $obj.data('styles'),
2640+
zoom = $obj.data('zoom'),
2641+
hideControls = !$obj.data('controls'),
2642+
pinColor = $obj.data('pin-color'),
2643+
mapOptions = {
2644+
mapTypeId: 'roadmap',
2645+
center: utils_getCenterFromMarkers(markers),
2646+
zoom: zoom,
2647+
styles: addVisibilityToStyles(styles, showLabels, showIcons),
2648+
disableDefaultUI: hideControls,
2649+
clickableIcons: false,
2650+
keyboardShortcuts: false
2651+
},
2652+
map = new google.maps.Map(obj, mapOptions);
2653+
var pinMarkup = pin.replace(/%ACCENT_COLOR%/g, pinColor);
2654+
markers.forEach(function (markerString) {
2655+
var marker = JSON.parse(markerString);
2656+
new google.maps.Marker({
2657+
map: map,
2658+
icon: {
2659+
url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(pinMarkup)
2660+
},
2661+
title: marker.title,
2662+
position: marker.geometry.location
2663+
});
26522664
});
26532665
});
2654-
});
2666+
}
26552667
})(jQuery, window);
26562668
// CONCATENATED MODULE: ./src/blocks/hero/frontend.js
26572669

‎dist/js/frontend.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/blocks/google-map/frontend.js

+42-33
Original file line numberDiff line numberDiff line change
@@ -7,41 +7,50 @@ import { parallaxInit } from "../../components/with-parallax/util";
77
const $blocks = $( '.novablocks-map' );
88

99
parallaxInit( $blocks );
10-
11-
$( '.js-novablocks-google-map' ).each( function( i, obj ) {
12-
13-
var $obj = $( obj ),
14-
markers = $obj.data( 'markers' ),
15-
showLabels = $obj.data( 'show-labels' ),
16-
showIcons = $obj.data( 'show-icons' ),
17-
styles = $obj.data( 'styles' ),
18-
zoom = $obj.data( 'zoom' ),
19-
hideControls = ! $obj.data( 'controls' ),
20-
pinColor = $obj.data( 'pin-color' ),
21-
mapOptions = {
22-
mapTypeId: 'roadmap',
23-
center: getCenterFromMarkers( markers ),
24-
zoom: zoom,
25-
styles: addVisibilityToStyles( styles, showLabels, showIcons ),
26-
disableDefaultUI: hideControls,
27-
clickableIcons: false,
28-
keyboardShortcuts: false,
29-
},
30-
map = new google.maps.Map( obj, mapOptions );
31-
32-
var pinMarkup = pin.replace( /%ACCENT_COLOR%/g, pinColor );
33-
34-
markers.forEach( markerString => {
35-
const marker = JSON.parse( markerString );
36-
37-
new google.maps.Marker( {
38-
map: map,
39-
icon: { url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent( pinMarkup ) },
40-
title: marker.title,
41-
position: marker.geometry.location,
10+
mapInit();
11+
12+
function mapInit() {
13+
14+
if ( typeof google === "undefined" || typeof google.maps === "undefined" ) {
15+
return;
16+
}
17+
18+
$( '.js-novablocks-google-map' ).each( function( i, obj ) {
19+
20+
var $obj = $( obj ),
21+
markers = $obj.data( 'markers' ),
22+
showLabels = $obj.data( 'show-labels' ),
23+
showIcons = $obj.data( 'show-icons' ),
24+
styles = $obj.data( 'styles' ),
25+
zoom = $obj.data( 'zoom' ),
26+
hideControls = ! $obj.data( 'controls' ),
27+
pinColor = $obj.data( 'pin-color' ),
28+
mapOptions = {
29+
mapTypeId: 'roadmap',
30+
center: getCenterFromMarkers( markers ),
31+
zoom: zoom,
32+
styles: addVisibilityToStyles( styles, showLabels, showIcons ),
33+
disableDefaultUI: hideControls,
34+
clickableIcons: false,
35+
keyboardShortcuts: false,
36+
},
37+
map = new google.maps.Map( obj, mapOptions );
38+
39+
var pinMarkup = pin.replace( /%ACCENT_COLOR%/g, pinColor );
40+
41+
markers.forEach( markerString => {
42+
const marker = JSON.parse( markerString );
43+
44+
new google.maps.Marker( {
45+
map: map,
46+
icon: { url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent( pinMarkup ) },
47+
title: marker.title,
48+
position: marker.geometry.location,
49+
} );
4250
} );
51+
4352
} );
4453

45-
} );
54+
}
4655

4756
})( jQuery, window );

‎src/blocks/google-map/scss/_editor.scss

+14
Original file line numberDiff line numberDiff line change
@@ -53,3 +53,17 @@
5353
}
5454
}
5555
}
56+
57+
58+
[data-type="novablocks/google-map"] .components-placeholder {
59+
align-items: center;
60+
61+
.components-placeholder__instructions {
62+
flex-basis: 100%;
63+
text-align: center;
64+
}
65+
66+
.components-placeholder__fieldset {
67+
max-width: 40em;
68+
}
69+
}

‎src/blocks/google-map/utils.js

+5
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,11 @@ export const getMapAccentColor = function() {
7474
}
7575

7676
export const getCenterFromMarkers = function( markers ) {
77+
78+
if ( typeof google === "undefined" || typeof google.maps === "undefined" ) {
79+
return defaultMapCenter;
80+
}
81+
7782
const bounds = new google.maps.LatLngBounds();
7883

7984
// when there is only one marker bounds aren't accurate at great zoom levels

0 commit comments

Comments
 (0)