CODEWITHSUNDEEP
htmlcss
user2367386
user2367386

Reputation:

Fluid Width Google Map

On my page here I've got a map url, but can't specify a fluid width 'size' which is required:

      <div class="small-map"><img src="http://maps.google.com/maps/api/staticmap?center=<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>&zoom=14&size=100x100&maptype=roadmap&markers=color:ORANGE|label:A|<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>&sensor=false"></div>

If someone could help me fit the parent container by giving it a fluid width and fixed height of 130px, that would be great. Also if anyone knows how to remove the black 'Map Data' part (or even a change the colour in css).

Upvotes: 3

Views: 5389

Answers (1)

Miro
Miro

Reputation: 8650

Demo: jsFiddle

Delete the <img/> tag from <div class="small-map"><img.../></div>

Add this to your css:

.small-map{
background: url(http://maps.google.com/maps/api/staticmap?center=CM13+2AA&zoom=14&size=250x250&maptype=roadmap&markers=color:ORANGE|label:A|CM13+2AA&sensor=false) center no-repeat;
height: 130px;
}

Upvotes: 3

Related Questions