How can I use custom code to display a pin on a map using specific latitude and longitude coordinates in Webflow?

To display a pin on a map with specific latitude and longitude coordinates in Webflow using custom code, you can follow these steps:

1. Obtain the latitude and longitude coordinates: First, you'll need to determine the exact latitude and longitude coordinates where you want to display the pin on the map. You can use various tools like Google Maps or online coordinate lookup tools to find the desired location.

2. Create a new HTML embed element: In Webflow, navigate to the page where you want to display the map pin. Add a new HTML embed element to the desired section or container on the page.

3. Add the necessary code: In the HTML embed element, you'll need to include the appropriate code to display the pin on the map. You can use JavaScript libraries like Google Maps or Mapbox to achieve this. Here's an example using the Google Maps JavaScript API:

<script>function initMap() {  var location = {lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE};  var map = new google.maps.Map(document.getElementById('map'), {    zoom: 14,    center: location  });  var marker = new google.maps.Marker({    position: location,    map: map  });}</script><script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

Make sure to replace YOUR_LATITUDE, YOUR_LONGITUDE, and YOUR_API_KEY with the actual latitude, longitude, and your Google Maps API key, respectively.

1. Style the map pin (optional): You can customize the appearance of the map pin using CSS. You can target the marker icon and adjust its properties like size, color, or shape to match your design requirements.

2. Preview and publish: After adding the code and styling, you can preview the page to see the pin displayed on the map. Once you're satisfied with the result, remember to publish your site to make it live.

By following these steps, you should be able to display a pin on a map with specific latitude and longitude coordinates using custom code in Webflow.