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.

[sourcecode language=”javascript”]
<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>
[/sourcecode]

Get Wongso Wijaya’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

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

[sourcecode language=”javascript”]
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’;
}
}
[/sourcecode]

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

[sourcecode language=”javascript”]
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()
[/sourcecode]

If you are planning to migrate, happy migrating :)