Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2618
  • Last Modified:

Overlaying a PNG Mask over a Google MAP

Hi,

As most of you know, the Google Map uses the javascript and then you put the following code in the HTML
<div id="map"></div>
and it inserts it on the fly - I would like to make the map have rounded corners by overlaying a PNG on the top, but cant seem to work out how to do it or even if its possible.

Thanks for your comments!

Ben
0
intangiblemedia
Asked:
intangiblemedia
1 Solution
 
Steve BinkCommented:
Duplicate of http://www.experts-exchange.com/Software/Server_Software/Web_Servers/Microsoft_IIS/Q_26454485.html

Have you tried using CSS rounded corners, instead of a PNG? CSS3 has that functionality, and most browsers support it now.

http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
0
 
intangiblemediaAuthor Commented:
Hi Routinet,

I did incorporating that styling to the DIV ID MAP of Google maps but it didnt work.

Regards,

Ben
0
 
Steve BinkCommented:
What browser are you using (make and version)?  Please post the CSS you used for div#map.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
intangiblemediaAuthor Commented:
#map {
      width:982px;
      height: 499px;
      background-image: url(../images/map-loading.jpg);
      position: relative;
}

Using Firefox v 3.6.8
0
 
Ray PaseurCommented:
You can get a Google static map, and it may be more suitable for your needs.  Please see the article here.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_3350-Using-the-Google-Maps-API-in-PHP.html

What I would envision goes something like this.

1. Create a "mask" PNG image with a transparent center and opaque corners in the color that matches your background.
2. Acquire the Google map.
3. Use z-index to control the overlay of the two images.
0
 
puppydogbuddyCommented:
From this link:
          http://code.google.com/u/Ben.Talberg/updates
               (see api issues # 1654)
          http://code.google.com/p/gmaps-api-issues/

 Load gmap with the following commands:
    var mask = new MTrickOverlay();
    gmap.addOverlay(mask);

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now