HTML underlay with interactive z-index functionality

Is it possible to create an interactive Google Map with a frame image displayed?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<input type="button" onclick="$('#frame_image').show();" value="Show frame layer">
<input type="button" onclick="$('#frame_image').hide();" value="Hide frame layer">
<br /><br />

<div style="position: absolute; z-index: 1;">
    <iframe frameborder="0" width="358" height="358" marginheight="0" marginwidth="0" scrolling="no" src="https://maps.google.ca/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=55+Avenue+Road,++Toronto,+Ontario+M5R+3L2+Canada&amp;aq=&amp;sll=43.656877,-79.32085&amp;sspn=0.852471,2.113495&amp;ie=UTF8&amp;hq=&amp;hnear=55+Avenue+Rd,+Toronto,+Ontario+M5R+1C6&amp;t=m&amp;z=14&amp;ll=43.67111,-79.395217&amp;output=embed&iwloc=near" ></iframe>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
    <small><a href="https://maps.google.ca/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=55+Avenue+Road,++Toronto,+Ontario+M5R+3L2+Canada&amp;aq=&amp;sll=43.656877,-79.32085&amp;sspn=0.852471,2.113495&amp;ie=UTF8&amp;hq=&amp;hnear=55+Avenue+Rd,+Toronto,+Ontario+M5R+1C6&amp;t=m&amp;z=14&amp;ll=43.67111,-79.395217" style="color:#0000FF;text-align:left" target="_blank">View Larger Map</a></small>
</div>

<div style="position: absolute; color:red; z-index: 2" id="frame_image">
    <img src="http://torontoclinic.awkwardhosting.com/images/frame.gif" />
</div>

The code is available at the following link: http://jsfiddle.net/pPrZV/

If there is another method using the Google Maps API or any other means, please advise. Thank you

htmlcssz-index

Answer №1

To achieve the desired look, simply add this CSS style to the <iframe> element representing the google map

<iframe style="border-radius:250px" 

frameborder="0" width="358" height="358" marginheight="0" marginwidth="0" scrolling="no"...

View a working example on jsFiddle here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Implement a smooth transition effect lasting 1000 milliseconds when a class is added via

I'm attempting to use the fadeIn 1000 effect when a class is added through a Click function. I have already attempted this: http://jsfiddle.net/rf7mudL5/ HTML <span class="date-outer">Text will Red on fadeIn</span> <button class="mo ...

jqueryhtmlonclickclick

Progress Circles on Canvas in FireFox

Currently, I am experimenting with this codepen demo that utilizes canvas to generate progress circles: The functionality functions perfectly in Chrome and Safari; however, it only displays black circles in FireFox. My knowledge of canvas is limited, so I ...

javascripthtmlcsscanvas

What is the best way to alter the background-color of an element that is contained within a GatsbyJS component, depending on the specific page where the component is being utilized?

As a first-time GatsbyJS website builder, I am working on creating reusable components for my site. One of these components is the footer, and I have already structured it. Now, I have a dilemma - I want to change the color of a specific <div> within ...

javascripthtmlcssreactjsgatsby

Disable or set input text to read-only in Internet Explorer 9 and earlier versions using JavaScript or jQuery

Can anyone offer any suggestions on how to accomplish this task? I attempted using JavaScript with the code below, but it did not yield the desired results. element.readOnly="true"; element.readonly="readonly"; element.disabled="disabled"; I also tried ...

javascriptjqueryhtmltextinput

Unable to retrieve DOM value due to Vue.js template being inaccessible in Chromium, including from both DevTools and extensions

Currently, I’m developing a Chrome extension that needs to retrieve specific values from a webpage such as the item title. However, instead of fetching the actual title, it is reading a Vue.js template variable. Even when I use DevTools to inspect the p ...

javascripthtmlvue.jsdomgoogle-chrome-devtools

The div seems to be resistant to centering no matter the effort. Applying padding doesn't seem to be the solution, and even setting

I often come across this question but I can never seem to find the answer when it comes to padding or margin. It's strange that I'm having trouble properly centering the ul element within the div, especially considering that the div needs to be i ...

htmlcsshtml-listscenterpadding

What is the best way to align inline-block elements in a straight row?

I am encountering an issue with the code block below: <div class="1"> Foo<br>1 </div> <div class="2"> Bar<br>2 </div> Even though both .1 and .2 have styles of position:relative;display:inline-block, they are displ ...

htmlcss

Display PDF on a separate tab when button is clicked in HTML

Is there a way to open a PDF in a new tab or window when a button is clicked? I've tried using onclick="window.location.href" but it always opens the PDF in the same page. Here's my code: <input type="button" value="Report" onclick="location ...

htmljsp

Understanding how to sum the values of two separate dropdown selections using jQuery

Is it possible to combine and total up two different selections to display on the "Total" button below? I have added calculations to each selection. When a user selects a quantity, it should automatically sum up and display on the "Total" button, but I am ...

javascriptphpjqueryhtmlstyles

Combining two arrays in JavaScript and saving the result as an XLS file

I have a question that I couldn't find an answer to. I need to merge two arrays and export them to an Excel file using only JavaScript/jQuery. Let's say we have two arrays: Array 1 : ["Item 1", "Item 2"] Array 2 : ["Item 3", "Item 4"] When the ...

javascriptjqueryarrayshtml

What is the computed value of HTML and body?

Is there a specific reason why the body tag has a default margin while HTML does not? Could there be any practical explanation for this design choice? ...

htmlcss

Obtaining User's Geolocation without the need for an index.html file

Greetings! I am in the process of developing a web application that needs to track user location upon button click. My choice for this project is the M.E.R.N stack, and based on the tutorials I have watched so far, there seems to be no need for an index.ht ...

node.jsreactjshtmlgoogle-mapsgoogle-geolocation

What is the best way to ensure a floated image matches the height of its parent container?

I am facing an issue with setting the height of a logo within a footer div to match the height of the div itself. Using height: 100% doesn't seem to work as expected. Below is the relevant HTML: <footer> <img src="images/circle_logo.png" ...

cssimagehtmlcss-float

Looking to screen usernames that allow for the use of the DOT (.), underscore (_), and Dash (-)?

I am using jQuery to filter usernames that are exactly 3 characters long. The validation criteria includes only allowing the following special characters: ., _, and - var filter = /^[a-zA-Z0-9]+$/; Therefore: if (filter.test(currentval)) { //valid ...

javascriptjqueryhtml

Creating a border with tabs and a triangle using CSS

I'm having trouble getting my HTML/CSS tabs to look like the ones in the image. I've experimented with border-radius but haven't been able to achieve the desired result. Can anyone provide guidance on how to replicate these tabs using only ...

cssbordercss-shapes

When adjusting the viewport size, CSS animated elements may shift unexpectedly in Firefox and Safari, while Chrome displays them correctly

This example demonstrates a simple code snippet: body { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; } .container { animation: moves 5s ease 0s normal forwards; /* transform: trans ...

htmlcssfirefoxsafari

Using HTML and JavaScript to implement a dragging functionality on a canvas element

After creating a square grid using HTML canvas, I've added a drag feature that allows users to draw rectangles by dragging over the grid. However, it seems that non-rectangle shapes can also be drawn in certain cases. Let's delve into an additio ...

javascripthtmlwebdragbootstrap-5

Unable to access a hyperlink, the URL simply disregards any parameters

When I click an a tag in React, it doesn't take me to the specified href. Instead, it removes all parameters in the URL after the "?". For example, if I'm on http://localhost:6006/iframe.html?selectedKind=Survey&selectedStory=...etc, clicking ...

javascripthtmlreactjsanchorhref

Including Previous & Next Buttons in Product Categories

I have set up the display of category products on the home page using the block below: {{block type="catalog/product_list" template="catalog/product/home_short.phtml" category_id="5" column_count="6"}}. I now want to include previous and next buttons to ...

phpjqueryhtmlcssmagento

Is there excessive spacing following an A tag or an img tag?

Hi there, I'm currently facing an issue while building a table cell using the div tag. Specifically, I have encountered some unwanted spacing after my img within the cell. <div style="display:table"> <div style="display:row"> <div s ...

htmlcsstagsimagespace