In the previous post we have discussed about GeoLocation feature of HTML5. The location is found by the browser and sent to Google Maps Image APIs. So an image of the specified location with specified options is returned.
In this post we want to show more realistic map by using Google Maps JavaScript API. This adds some dynamic features to the map, like zooming. Although it is a complicated and complete procedure, but let take some baby steps!
The HTML elements are almost the same with the previous. The only thing that I have found here, is that the ‘divs’ act better than the table cells, for holding a dynamic map. So we have made three ‘divs’ inside the table cells:
<p><button name=”Show” onclick=”ShowAll()”>Show Map</button></p>
<div id=”Msg“></div>
<table style=”width: 100%”>
<tr>
<td style=”text-align: center”>Roadmap</td>
<td style=”text-align: center”>Satellite</td>
<td style=”text-align: center”>Hybrid</td>
</tr>
<tr>
<td><div id=”M1“></div></td>
<td><div id=”M2“></div></td>
<td><div id=”M3“></div></td>
</tr>
</table>
But for scripting we must first load the Google Maps JavaScript API, just like loading an external ‘js’ file:
<script src=”http://maps.google.com/maps/api/js?sensor=false”></script>
The managing function has no changes with its previous form:
<script>
var msg=document.getElementById(“Msg”)
function ShowAll()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(AllMaps,Error)
msg.innerHTML=”The GeoLocation loaded successfully!”
}
else
msg.innerHTML=”This browser doesn’t support GeoLocation. Try another one . . .”
}
The ‘Error’ function is also remained with no changes; but all the things go inside ‘AllMaps’ function. So the remainder of the script is:
function AllMaps(pos){
lat=pos.coords.latitude
lon=pos.coords.longitude
latlon=new google.maps.LatLng(lat, lon)
M1=document.getElementById(‘M1′)
M1.style.height=’300px’
M1.style.width=’400px’
M2=document.getElementById(‘M2′)
M2.style.height=’300px’
M2.style.width=’400px’
M3=document.getElementById(‘M3′)
M3.style.height=’300px’
M3.style.width=’400px’
var myOptions1={
center:latlon,
zoom:17,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:true,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} }
var myOptions2={
center:latlon,zoom:17,
mapTypeId:google.maps.MapTypeId.SATELLITE,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.DEFAULT} }
var myOptions3={
center:latlon,zoom:17,
mapTypeId:google.maps.MapTypeId.HYBRID,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.ZOOM_PAN} }
var map1=new google.maps.Map(document.getElementById(“M1″), myOptions1)
var marker1=new google.maps.Marker({position:latlon,map:map1,title:”You are here!”})
var map2=new google.maps.Map(document.getElementById(“M2″), myOptions2)
var marker2=new google.maps.Marker({position:latlon,map:map2,title:”You are here!”})
var map3=new google.maps.Map(document.getElementById(“M3″), myOptions3)
var marker3=new google.maps.Marker({position:latlon,map:map3,title:”You are here!”})
}
function Error(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
msg.innerHTML=”You don’t have permission to view the Map.”
break
case error.POSITION_UNAVAILABLE:
msg.innerHTML=”Your location was not undestood.”
break
case error.TIMEOUT:
msg.innerHTML=”The procedure took longer than usual.”
break
case error.UNKNOWN_ERROR:
msg.innerHTML=”<< Unknown Error >>”
break
}
}
</script>
Here, in the ‘AllMaps’ function, sending data to the Google Map is not by URL and we do it dynamically by JavaScript APIs loaded previously. To set the current position we use new object of ‘google.maps.LatLng‘, which gets two inputs, the latitude and the longitude, respectively. Then we set the style of the three ‘divs’ by JavaScript.
After that, options are set; the values are discussed before and the difference is just in type of their definitions. Two new options are ‘mapTypeControl‘ and ‘navigationControlOptions‘. The first providing some buttons for letting the user to choose type of the map; and the second is for setting the style and can be ‘DEFAULT’, with changes automatically by the map, ‘SMALL’, which has just some small buttons, ‘ANDROID’, which is used for mobile platforms, and ‘ZOOM_PAN’, which shows a range and a stick for choosing the zoom level.
We have defined three different options for showing the three maps; and then, the specified ‘div’ elements and options are sent to new ‘google.maps.Map‘ object, which returns a dynamic map in the element. A marker also is set by ‘google.maps.Marker‘ at the position on the specified map with desired title. The first usages of the options are set to bold, for being more readable.
The result must be something like below:
You can read more about this API with its full feature at Google Maps JavaScript API v3. A point here is that the Google has mentioned that you must register and obtain a key for having access, but really I didn’t realize its necessity.
Continue your HTML5 learning process by the next post . . .