Enhance Google Map demo, script loading, and marker customization#1292
Merged
gvreddy04 merged 3 commits intoJul 10, 2026
Merged
Conversation
Updated `GoogleMap_Demo_01_Examples.razor` to display two maps side-by-side using a responsive Bootstrap grid. Modified `GoogleMap.razor` to use a fixed `ScriptId` for consistent script handling. Improved `blazor.bootstrap.js` to handle existing scripts with the same `ScriptId`, invoking appropriate callbacks (`OnLoadJS` or `OnErrorJS`) based on the script's loading status. Added dataset attributes to track script loading state and ensure proper event handling.
Updated marker customization options to include `GlyphText` for text glyphs and `GlyphSrc` for image glyphs. Deprecated the legacy `Glyph` property while maintaining backward compatibility. Enhanced `GoogleMap.razor` and `blazor.bootstrap.js` to support asynchronous Google Maps API loading and streamlined marker rendering. Added new demos for text and image glyphs, updated documentation, and introduced new properties in `PinElement.cs` for better marker customization.
Added a check to ensure the DOM element exists before map initialization to prevent runtime errors. Introduced a reusable `element` variable to avoid redundant DOM queries. Updated marker elements initialization with a nullish coalescing operator for better fallback handling.
gvreddy04
deleted the
bugfix/1287-issue-adding-multiple-google-map-components-to-same-page
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces significant enhancements and refactoring to the Google Maps marker customization features in the BlazorBootstrap library and its demo components. The main focus is on expanding marker glyph options (supporting text, image, and legacy icon fonts), improving the marker rendering pipeline, and updating demos and documentation to reflect the new capabilities. Additionally, the Google Maps script loading and initialization logic has been improved for reliability and clarity.
Key changes include:
Marker Customization Enhancements
PinElementmodel:GlyphText(for text glyphs),GlyphSrc(for image glyphs), and additional styling options (Background,BorderColor,GlyphColor,Scale). The legacyGlyphproperty is now marked as obsolete, andUseIconFontsis retained for backward compatibility.blazor.bootstrap.jsto support the new glyph options, including rendering text and image glyphs, and improved the handling of icon fonts.Demo and Documentation Updates
PinElement.GlyphTextandPinElement.GlyphSrcproperties, and added new demo sections for text and image glyphs.#pragma warning disable/restore CS0618in demos that intentionally use the legacy icon-font path for clarity and to suppress warnings.Google Maps Initialization Improvements
asyncand a named callback, and initialization is deferred until the API is ready. Pending initializations are handled robustly via a newonApiLoadedcallback andpendingInitializationsqueue.Demo Layout Improvements
These changes modernize the marker customization API, provide a smoother developer experience, and ensure backward compatibility for existing applications.