Solved

Overlaying a PNG Mask over a Google MAP

Posted on 2010-09-06
8
2,453 Views
Last Modified: 2013-11-19
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
Comment
Question by:intangiblemedia
8 Comments
 
LVL 50

Expert Comment

by:Steve Bink
ID: 33615109
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
 

Author Comment

by:intangiblemedia
ID: 33615555
Hi Routinet,

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

Regards,

Ben
0
 
LVL 50

Expert Comment

by:Steve Bink
ID: 33620816
What browser are you using (make and version)?  Please post the CSS you used for div#map.
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

Author Comment

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

Using Firefox v 3.6.8
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 33817588
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
 
LVL 38

Accepted Solution

by:
puppydogbuddy earned 500 total points
ID: 33817862
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now