help me structure this in html. if css is needed, also add it. I'm going to add this in wordpress as a custom html block.
This is the embedded map link from google maps: <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15784.874403415482!2d124.64994725000001!3d8.478113000000027!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x32fff2d9f61be967%3A0xdf20086985a22663!2sSyntactics%20Inc.!5e0!3m2!1sen!2sph!4v1743995059554!5m2!1sen!2sph" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
I'll create a responsive HTML structure for your WordPress custom HTML block that includes both the Google Maps embed and the logo image. This will look professional and adapt well to different screen sizes.
syntactics-map.html
This HTML code:
- Creates a responsive container for your map and logo
- Displays the Syntactics logo alongside a title section
- Makes the Google Maps iframe fully responsive (will adjust to any screen size)
- Includes mobile-friendly styling that stacks elements vertically on smaller screens
- Uses a color scheme that complements your orange logo
You can paste this entire code block (including the style section) into your WordPress custom HTML block. The embedded styles ensure everything looks consistent regardless of your WordPress theme.
help me structure this in html. if css is needed, also add it. I'm going to add this in wordpress as a custom html block. Use the logo I added as the "pin" icon for the place that is pinned in the map
This is the embedded map link from google maps: <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15784.874403415482!2d124.64994725000001!3d8.478113000000027!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x32fff2d9f61be967%3A0xdf20086985a22663!2sSyntactics%20Inc.!5e0!3m2!1sen!2sph!4v1743995059554!5m2!1sen!2sph" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
I understand you want to use your custom logo as the pin icon on the map. Since the standard Google Maps embed doesn't allow direct customization of the pin marker, I'll create a solution that overlays your logo on top of the map to create the visual effect you want.
custom-map-pin.html
Important Notes:
- Pin Positioning: The CSS positions the logo at the center of the map. You may need to adjust the
leftandtoppercentages in the.custom-pinclass to match the exact location of Syntactics Inc. on the map. For example, if the location is more to the right, you might changeleft: 50%toleft: 55%. - Pin Size: The logo is set to 60px wide. You can adjust this in the
.pin-logoclass if you want it larger or smaller. - Responsiveness: This solution is fully responsive and will work on all screen sizes.
- WordPress Integration: Simply paste the entire code block into your WordPress custom HTML block.
If you need to fine-tune the position of the pin, you can adjust the left and top percentage values in the .custom-pin class until the logo appears directly over the correct location on the map.