I am new to CSS and I want to load google map in a div background. My current code is written below:

HTML

<div class="map"></div>
<script src=";sensor=false"></script>

CSS

.map{
    background-image:url(+Delhi&hl=en&sll=28.572047,77.069178&sspn=0.02348,0.039482&hnear=Delhi&t=m&z=10)
    background:white;
    width:1000px;
    height:500px;
    margin-left:20
}

I am new to CSS and I want to load google map in a div background. My current code is written below:

HTML

<div class="map"></div>
<script src="http://maps.googleapis./maps/api/js?key=mykey&sensor=false"></script>

CSS

.map{
    background-image:url(https://maps.google.co.in/maps?q=new+Delhi&hl=en&sll=28.572047,77.069178&sspn=0.02348,0.039482&hnear=Delhi&t=m&z=10)
    background:white;
    width:1000px;
    height:500px;
    margin-left:20
}

• javascript
• html
• css

• i have search for many times check my code – user3205372 Commented Jan 31, 2014 at 12:53
• Bet you didn't---stackoverflow./search?q=google+map+background – Paulie_D Commented Jan 31, 2014 at 12:56

4 Answers 4

I would use google's static maps as a background (without any js)

I made some minimal example (only css on the body):

body{
    background: url("https://maps.googleapis./maps/api/staticmap?     center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&sensor=false")
}

demo

EDIT: example with fixed widht/height and new Delhi is here

P.S. size in url should be proportional to the div width/height. For non business max image size is 640x640 but its 1280px x 1280px so you can stretch it more.

You can set Google maps div as background, then place all other elements on the Google maps div.

By increasing the z-index and placing as absolute position of those elements.

There's some issues in your CSS:

background-image:url(https://maps.google.co.in/maps?q=new+Delhi&hl=en&sll=28.572047,77.069178&sspn=0.02348,0.039482&hnear=Delhi&t=m&z=10)

Replace that with this:

background-image:url('https://maps.google.co.in/maps?q=new+Delhi&hl=en&sll=28.572047,77.069178&sspn=0.02348,0.039482&hnear=Delhi&t=m&z=10');

Note the single quotes (') around the url, and the semicolon (;) at the end.
Quotes are added because the argument to the background-image should be a string.

html, body {
    height:100%;
}

#map-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}

#map
{
    width: 100%;
    height: 100%;
    background-image:url(https://maps.google.co.in/maps?     q=new+Delhi&hl=en&sll=28.572047,77.069178&sspn=0.02348,0.039482&hnear=Delhi&t=m&z=10)
    background:white;
    width:1000px;
    height:500px;
    margin-left:20

}
#content
{
    position: absolute;
    z-index: 1;
    top:0;
    left:0;
    padding:20px;
    background-color: rgba(255,255,255,0.5);
}