Inserting a Google Map into Your Site

Posted on 2 November 2010 | by Ryan Battles

There is an easy way and a hard way to do this. This post will show you how to quickly embed code from Google maps, as well as how to roll out the code yourself, giving you more control.

The Easy Way

If you go to Google Maps and enter in an address, you will be presented with a tiny little option in the upper right corner called “Link”. You can click on this, and then choose “Customize and preview embedded map”. This will allow you to select a size for the map, and provide you with some embed code. This is an easy way to embed a simple Google Map into your site.

The Hard(er) Way

Below is a basic set of code that allows you to do several things:

Load a map (specify type, size, zoom, and location)
Add a pin
Add an info bubble to that pin
Cause the info bubble to display when page loads

Other than the first item above, all of the other items are optional and fully customizable. I have tried to comment the code everywhere that is necessary, as to allow for easy updating. It is my hope that I can just cut and paste this code into future projects and just modify a few pieces of information in order to make things work.

Example

View Demo

Code

<script type="text/javascript">
                            
  // This loads the map, it is mandatory.
  function initialize() {
    var myLatlng = new google.maps.LatLng(41.0634299,-81.527313); //Change the LatLng to your location.
    var myOptions = {
      zoom: 17, // Any number 1-20 will work here.
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    
    // This adds a marker, it is optional.
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var marker = new google.maps.Marker({
      position: myLatlng, 
      map: map
      });
      
      // This adds an information bubble to your marker. It too is optional.
      // You can change the text and style below, just be careful to follow the 
      // formatting, using double quotes only in your HTML, enclosing each line 
      // in single quotes, and ending the entire string with a semi-colon.
      var contentString = '<p style="height: 80px; width: 200px; margin: 0; padding: 0">' +
          '<strong>Todd Biss Photography</strong><br />' +
          '850 S. Main St. <br /> Akron, OH 44311<br />' +
          '<a href="http://maps.google.com/maps?f=d&hl=en&daddr=850+S.+Main+St.,+Akron,+OH+44311" rel="external">Get Directions</a></p>';
      
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });
     // This opens the information bubble automatically when the page loads.
     // This is optional.
     infowindow.open(map,marker);        
  }
  
        

</script>

<!-- The code below is the size of your map -->
<div id="map_canvas" style="height: 500px; width: 100%;"></div> 

If all goes well, you will be presented with a Google Map based off of the API docs for Google Maps v.3. If you want to be adventurous, you can read through some of the examples in the API, and build upon this code.

Tags: web development, web design & development, api, google, javascript, google maps

Comments (2)

multivariate testing Nov. 17, 2010		Google maps rocks! They make it so easy to insert their code into blogs and websites. And their local business center listings can make or break company bottom lines. And they are FREE!
Adam Dec. 02, 2010		Thanks for the Google Map code! This'll be really easy to incorporate into EE! :)