• Cog Wheels

Embed Google Maps into your website

You are here > Home > Blog > Embed Google Maps into your website


Here is a simple bit of code that embed a live google map into your website. It also has a marker to show where you are. I actually use this on this site on my Contact Me page.

First create create a div called map_canvas on your page.

      <div id="map_canvas">

      </div>

Create a CSS rule to style the div

#map_canvas {height:280px;line-height:1.2em;width:100%;border: 5px solid #ccc;padding-bottom:0px;}

.innerGmap {width:350px;}

Refer to the google maps api in your <head> section

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Create a new .js with this content:

function initMaps(){

 if ($('#map_canvas').length) {

            var latlng = new google.maps.LatLng(51.727267,-1.547828);

            var myOptions = {

                zoom: 9,

                center: latlng,

                mapTypeId: google.maps.MapTypeId.TERRAIN

            };

            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var contentString = '<div class="innerGmap"><img style="float:left;padding-right:10px;" src="/images/logo.jpg"><b>Nine9Design - Umbraco Website Design</b> <br/>' +

             '1 Belgrave Cottages, Church Street <br />' +

             'BAMPTON Oxon OX18 2NA <br />' + 

             'Telephone: 01993 852235</div>';

            var infowindow = new google.maps.InfoWindow({

                content: contentString

            });

            var marker = new google.maps.Marker({

                position: latlng,

                title: "Nine9Design - Umbraco Website Design"

            });

  

 

            // To add the marker to the map, call setMap();

            marker.setMap(map);

            google.maps.event.addListener(marker, 'click', function() {

                infowindow.open(map, marker);

            });

        }

}

Make sure that you change the long lat ref to your location. To find this goto google maps zoom to your location, right click and select "What's Here". The long lat ref will be shown in the Search Maps box.

Make sure you also change the locator popup located in the variable "contentString".

That's it.
 


Last Updated: Friday, April 01, 2011