Posts Tagged ‘google maps’

Integrating Google Maps API v3 Into Your Webpage

Integrating Google Maps API v3 Into Your Webpage

written by: jason

As of May 2010, Google depreciated the Google Maps Javascript API v2 and encouraged us to start using the new version 3 API. Version 2 will still work in case you are using it on your website, but upgrading to v3 is pretty straight forward and pretty easy. With v3, you no longer have to register with Google to receive an API key and this newer version also is designed to load quicker on mobile devises such as Android and iPhone.

So here’s how you add the map with a location marker. There are more options that you can add and you can find that info in the documentation on Google’s API website.

The first thing you will want to do is find the latitude/longitude of the place you want to focus in on. I use this website. Just type in the address and under the map you’ll find your numbers that you will need later on.

Next, you’ll add this piece of javascript provided by Google to your webpage (in the head section of your document). The sensor has to be set to either “true” or “false”. I believe that if you select true, the map will take up your entire webpage but I’m not 100% sure on that.

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

Now you need to make a section in your html to place the map. For an example, you can just wrap it in an empty

tag and give it an id of something like “map_canvas”.

example:

  1. <div id="map_canvas"><!-- google map goes here --></div>
<div id="map_canvas"><!-- google map goes here --></div>

Finally, some more javascript to actually load the map in the “map-canvas” container, add the latitude and longitude numbers that we found earlier, and this is also where we’ll place the code for the address marker.

Here it is. We’ll go over some aspects of the code next.

  1. <script type="text/javascript">
  2.  
  3.   function initialize() {
  4.    
  5. //replace 0's on next line with latitude and longitude numbers from earlier on in tutorial.
  6. var myLatlng = new google.maps.LatLng(00.0000, -00.0000);
  7.     var myOptions = {
  8.       zoom: 16,
  9.       center: myLatlng,
  10.       mapTypeId: google.maps.MapTypeId.ROADMAP
  11.     }
  12.    
  13. //here's where we call the marker.
  14. //getElementById must be the same as the id you gave for the container of the map
  15. var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  16.         var marker = new google.maps.Marker({
  17.       position: myLatlng,
  18.       title:"ADD TITLE OF YOUR MARKER HERE"
  19.   });
  20.        
  21.         var contentString = '<div id="content">'+
  22.     '<div id="siteNotice">'+
  23.     '<\/div>'+
  24.     '<h2 id="firstHeading" class="firstHeading">ADD TITLE HERE<\/h2>'+
  25.     '<div id="bodyContent">'+
  26.     '<p style="font-size:1em">ADD DESCRIPTION HERE<\/p>'+
  27.     '<\/div>'+
  28.     '<\/div>';
  29.  
  30. var infowindow = new google.maps.InfoWindow({
  31.     content: contentString
  32. });
  33.  
  34. google.maps.event.addListener(marker, 'click', function() {
  35.   infowindow.open(map,marker);
  36. });      
  37.  
  38.   // To add the marker to the map, call setMap();
  39.   marker.setMap(map);  
  40.   }
  41.  
  42.   function loadScript() {
  43.     var script = document.createElement("script");
  44.     script.type = "text/javascript";
  45.     script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
  46.     document.body.appendChild(script);
  47.   }
  48.  
  49.   window.onload = loadScript;
  50. </script>
<script type="text/javascript">

  function initialize() {
    
//replace 0's on next line with latitude and longitude numbers from earlier on in tutorial. 
var myLatlng = new google.maps.LatLng(00.0000, -00.0000); 
    var myOptions = {
      zoom: 16,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    
//here's where we call the marker. 
//getElementById must be the same as the id you gave for the container of the map
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        var marker = new google.maps.Marker({
      position: myLatlng,
      title:"ADD TITLE OF YOUR MARKER HERE"
  });
        
        var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '<\/div>'+
    '<h2 id="firstHeading" class="firstHeading">ADD TITLE HERE<\/h2>'+
    '<div id="bodyContent">'+
    '<p style="font-size:1em">ADD DESCRIPTION HERE<\/p>'+
    '<\/div>'+
    '<\/div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});      
  
  // To add the marker to the map, call setMap();
  marker.setMap(map);  
  }
  
  function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
  }
  
  window.onload = loadScript;
</script>

If you’re not familiar with javascript (don’t worry, I’m not either) it looks quite daunting. After you go through it once or twice though, it really makes sense. To help, I either commented the important parts, or added some descriptive text in ALL CAPS.

The first little snippet is where you place your latitude and longitude numbers that we found earlier. You may or may not have a “-” in front of either of these numbers. It depends on the location.

The “zoom” var is how far in or out the map is zoomed on page load. You’ll have to experiment with these. Try using multiples of 4 (4,8,12,16 etc.).

The next bit of code is for the marker. First it calls a ‘click’ function so if you click on the red marker, a description pops up. The description codes follows and it consists of a H2 tag with an id and class of “firstHeading”. It’s then followed by a p tag that you can put any info about the location that you want. I think you can even add other things like img tags to place photos with your description.