Google Maps Tutorial: You Are Here in 3 Easy Steps

Comments 2 Standard

I’ve been playing with Google maps lately and I thought I would share this little tidbit. It still needs some refinement (ie fetching your location from IP for non-html5 compliant browsers and letting you set your location) but it may give you the start you were looking for.

1. Create a Google maps API key

You can find the instructions on the Google maps Getting Started documentation. Basically you need to generate the key for the website that will be hosting this code so that Google will honor the API request.

2. Create a PHP File

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>You Are Here</title>
    <style>
      html, body {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
            
      #map-canvas {
        float: right;
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script src="javascript.js"></script>
  </head>
  <body>
    <div id="map-canvas" />
  </body>
</html>

3. Create a Javascript File

I called mine javascript.js. If you change the name you’ll need to update it in your .php file above.

/**
* Purpose: ask the browser for the user's location (html5)
* Preconditions: html5 is enabled on the browser
* Postconditions: map initialized with user's position if browser is html5 enabled and position given
**/
function getLocation()
{
    if (navigator.geolocation)
        navigator.geolocation.getCurrentPosition(initMap);
    else
        alert("Geolocation is not supported by this browser.");
}

/**
* Purpose: start the google map
* Preconditions: position object
* Postconditions: map centered around the user's position with a zoom of 15
**/
function initMap(position) {

    console.log('Your position is:', position.coords.latitude, position.coords.longitude);
    
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var position = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
 
    setMarker(map, position, "You!", "You Are Here");
}

/**
* Purpose: set a marker on a map
* Preconditions: map reference, position, title of the marker window, message in the marker window
* Postconditions: marker event listener added to the map
**/
function setMarker(map, position, title, message) {

     var marker = new google.maps.Marker({
      position: position,
      map: map
    });
        
  marker.setTitle(title);
        
  var infowindow = new google.maps.InfoWindow({
    content: message
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(marker.get('map'), marker);
  });
}

google.maps.event.addDomListener(window, 'load', getLocation);

Demo Working Code

Want to see what it does? Fork this plunker to try it out and see the code. Remember you have to be using a HTML5 compliant browser and give it permission to view your location.

Advertisements

2 thoughts on “Google Maps Tutorial: You Are Here in 3 Easy Steps

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s