Vijay Krishna's Notes http://vijaykrishna.posterous.com Most of my notes as a student of computer software and everything around it. posterous.com Fri, 18 Feb 2011 17:08:26 -0800 Google Maps JS API http://vijaykrishna.posterous.com/google-maps-js-api http://vijaykrishna.posterous.com/google-maps-js-api With my involvement in  the ongoing work on my undergrad college website, i was asked to churn out a simple piece of code for a dynamic Google map for the location of AIT. I already did this using Static Maps some time ago and it was recieved well. But, there was a huge demand for a dynamic map and after a quick 30 min revision of the JS API i managed this fragment of rather simple code: [sourcecode language="javascript"] <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(18.60700,73.87507); var myOptions = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; //marker var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var marker = new google.maps.Marker({ position: latlng, title:"Army Institute of Technology, Pune, IN"}); marker.setMap(map); //info window var contentString = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h1 id="firstHeading" class="firstHeading">Army Institute of Technology</h1>'+ '<div id="bodyContent">'+ '<p style="width:100%"><img src="http://aitpune.com/picture/aitlogo2.gif" style="float:right" hieght="100" width="100" alt="Onward to Glory"/> Dighi Hills,Alandi Road<br /> ' + 'Pune, INDIA-411015<br /><br />Phone: (020)27157534,27157612<br />Fax: 91-20-27157534<br />E-Mail: ait@aitpune.com</p>'+ '</div>'+'</div>'; var infowindow = new google.maps.InfoWindow({content: contentString}); google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);}); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html> [/sourcecode] Simple enough really. Nothing to it. Go have a look at the Google Maps JS API 3 tutorial (Google it...) and you should be able to figure it out without any issues. As usual Google's documentation is brilliant.

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1369599/pic.jpeg http://posterous.com/users/hcGXxsTkwP6SS Vijay Krishna Palepu vpalepu Vijay Krishna Palepu
Fri, 04 Feb 2011 18:22:01 -0800 Google Static Maps http://vijaykrishna.posterous.com/google-static-maps http://vijaykrishna.posterous.com/google-static-maps I will cut to the chase. The following are two static images showing the location of my college on Google maps. [caption id="" align="aligncenter" width="600" caption="AIT on Google Maps"]
Media_httpmapsgooglec_xggst
[/caption] [caption id="" align="aligncenter" width="600" caption="AIT on Google Maps with custom marker"]
Media_httpmapsgooglec_tpeie
[/caption] The following are the two URLs which i constructed in about 5 mins to come up with these images: http://maps.google.com/maps/api/staticmap?center=18.60598,73.87507&zoom=14&size=600x600&sensor=false&format=gif&markers=color:blue|label:A|18.60598,73.87507 http://maps.google.com/maps/api/staticmap?center=18.60598,73.87507&zoom=14&size=600x600&sensor=false&format=gif&markers=icon:http://tinyurl.com/62863uh|18.60670,73.87900 Its simpler then saying Google. Or so i think. :D

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1369599/pic.jpeg http://posterous.com/users/hcGXxsTkwP6SS Vijay Krishna Palepu vpalepu Vijay Krishna Palepu