Embarking on our capstone project, my task was to embed a Google Maps interface that displays all our bike locations, the user’s location, and offers interactive features. My team, predominantly skilled in C#, Blazor, and ASP.NET Core, opted for a Blazor application. For those unfamiliar, Blazor applications operate similarly to React.js, rendering components as HTML integrated with JavaScript actions, but are primarily C#-based. This approach is a boon for developers less comfortable with JavaScript.
However, integrating Google Maps, which is JavaScript-based, into Blazor posed a unique challenge. It required custom JavaScript handlers for certain functionalities, such as copy-paste operations. Fortunately, Blazor’s architecture allows for JavaScript file scoping within applications, enabling calls to functions within those JavaScript files.
The Challenge and Breakthrough
The crux of my challenge was my initial lack of knowledge about JavaScript scoping in Blazor and the feasibility of embedding an interactive map. The breakthrough came after exhaustive research and poring over Google’s developer documentation. It felt like a cloud lifting, revealing a clear path forward.
My initial attempt was less than successful, yet instructive. Feedback from Google Maps’ API made it evident that perfecting this integration would be a journey of trial and error. I couldn’t help but laugh at the prospect, recognizing the iterative process ahead.
What I learned
This experience was illuminating, not just technologically but also personally. I discovered my proficiency in research and problem-solving—my ability to “Google well,” so to speak. With determination and effort, I realized I could overcome any obstacle, a sentiment that resonates deeply with my journey towards earning my degree.
Leave a Reply