Nearby Tweet (updated)

Last December I created a simple “Nearby Tweet” using Google Maps API. It was based on version 2. Since Google Maps API v3 is official, I decided to migrate the code. In the latest version, one of the noticable change for developer is the removal of the Google Maps Key. Version 3 is designed to be faster and target both desktop and mobile devices.  btw, version 2 is deprecated and if you still using it, remember to migrate. Finally found time to look into the old codes. I did some clean up, migrate to v3 and make sure it support iPhone Safari.

Let’s start with the changes:

Change 1: JavaScript URL. Note: applications that determine the user’s location via sensor must pass sensor=trye when loading the Maps API JavaScript.

Change 2: Additional <meta> tag for iPhone device. The setting specifies that this map should be displayed full-screen and should not be resizable by the user.

<html>
<head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <script language=JavaScript src="js/jquery-1.3.2.min.js" type=text/javascript></script>
 <script type="text/javascript" src=<a href="http://maps.google.com/maps/api/js?sensor=false">http://maps.google.com/maps/api/js?sensor=false</a>></script>
</head>
<body>

Change 3: Add new function to detect browser (for Mobile)

function detectBrowser() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map_canvas");
   
  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
    mapdiv.style.width = '100%';
    mapdiv.style.height = '100%';
  } else {
    mapdiv.style.width = '600px';
    mapdiv.style.height = '800px';
  }
}

Change 4: Updated the “Nearby Tweet” code to call version 3 API.

 function initialize() {     
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(1.2915, 103.8492);
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 }   

 function showAddress(address,fText) {
  if (map == null) return false;
  if (address == null) return false;
  if (fText == null) fText = "Default Text";
    if (geocoder) {
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location
          });
      var infowindow = new google.maps.InfoWindow(
          { content: fText });
     google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
      });
        } else {
          //alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
 } // end showAddress()

If you are planning to migrate, happy migrating 🙂

Advertisements

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