Google Maps in HTML

One awesome thing that you can add to your business web site is to show your location on Google Maps. The code that I’m going to show you is very easy to use, and you can find the coordinates for your location on Google.

/*HTML CODE STARTS HERE*/

<div id=”map” style=”width:300px; height:300px; float:left; margin:20; “></div>

<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(48.4799183, -122.6052809),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById(“map”), mapOptions);
}
</script>
<script src=”https://maps.googleapis.com/maps/api/js?callback=myMap”></script>
*/END HTML CODE*/

My first thought was that this looked like a java script code. And it is, you can see the js in the script src above. But it is already out there, and it searches the internet to load it. So don’t be scared off, it is totally handled on your end by HMTL.

To change the size of the box, just alter the height and width you see in the first line of the code.

The lat and long coordinates look like this: (48.4799183, -122.6052809), all you have to do is type your own coordinates in there.

Well there you go, that is how you add a Google map to your site!

Smiles!

The Code Damsel

HTML and CSS Gradient

Hey Guys!

Today I am going to talk about backgrounds. These are a struggle for me, trying to figure out what looks good, what looks professional, and what I am actually capable of.

Here is one cool thing that I did figure out: how to do a gradient background.

Notice how along the sides it goes from white to light blue? One way of doing this is creating an image file that is really thin, and then having it repeat over and over and over again. But, I found a better way.


HTML CODE: put <div id= “grad”> in between the header and the body divs

CSS CODE: well, see the following. Each browser has a different way of reading the code written here, and if they don’t like any of them, the browser will resort to the individual color in the top line.

This was honestly a life saver. Not only does it look cool, but the code takes care of everything for you. If you want to change the colors, just switch them out. No need for the extra steps that an image would take.

OH! and do not forget that this will be the background for the whole website unless you say otherwise ( like how I told the body area to be white)

Have a lovely Monday,

The Code Damsel