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

Leave a Reply

Your email address will not be published. Required fields are marked *