Lots of time I have seen that programmer generally wants to show Google maps on their website. I personally think, while going through developing those requirement, maps generally requires longitude and latitude which is hard for a typical developer to provide since requirement generally provides you just address of place of which map to be shown. In that case it becomes challenge for the developer to calculate required
longitude and latitude of a specific address and then accordingly pass them to get the map. Second challenge, developer may face in placing marker on map If developer is new in this area and he has to spend tons of time in R&D for getting these markers placed along with SmartWindow for label on marker. Believe, me this is my personal experience when I as a fresher started working on this requirement have spent lots of time in so simple feature. (Don't call me dumb..please.. ;) )
So hereby, I would give you a small function which will give a facility for a developer to just include couple of functions and map will be ready for him on page with marker and SmartWindow with label details without hassle of calculating long. & lat. details of address.
Very first step obviously you have to do is to get AppId for your application. If you are doing web based development, you need to provide domain URL for authentication. This is extra care taken by Google and appId generated for one domain through Google can not be used for another domain. Well sorry but, it's like that only and I personally love this extra check by Google. Click Here for signing up for a Google Maps API Key. Once you receive your API Key you are ready to go for that !
Next step is to include/load map file from Google using appId generated for specific to your domain.
e.g.
<script type="text/javascript" src="http://www.google.com/jsapi?key=abcdefgh"></script>
where you need to replace your API Key with "abcdefgh" given in example.
and that's it.. Now rest all you have to do is copy below mentioned piece of Javascript code and paste in your file, preferably within <head> </head>tag, below <title></title> tag though it really doesn't matter but just for the sake of coding standards.
= JS Functions to display MAP Starts here =
<!-- Functions for Map -->
<script type="text/javascript">
/* Define the address you want to show map of */
var address = "1600 Amphitheatre Parkway Mountain View, CA 94043";
/* Define the label details of address you want to show as marker on map */
var infoWindowDetails= '<span ><B>Google Inc.</B> <br /> 1600 Amphitheatre Parkway <br /> Mountain View, CA 94043 USA<br />Phone: +1 650-253-0000<br />Fax: +1 650-253-0001 </span>';
/* Load Google Map. second parametere is for view type*/
google.load("maps", "2");
var map = null;
var geocoder = null;
// Call this function when the page has been loaded
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas")); // Creat instance of map.
map.addControl(new GLargeMapControl()); // Add Map Control on map
var mapControl = new GMapTypeControl();
map.addControl(mapControl); // Add Map Type Control on map
geocoder = new GClientGeocoder();
showAddress(); // Call to the fucntion which will mark the address on map.
}
}
function showAddress() {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point); // Create instance of marken on map
map.addOverlay(marker); // Add overlay of marker on map
marker.openInfoWindowHtml(infoWindowDetails); // Show label baloon on marken with address details.
}
}
);
}
}
google.setOnLoadCallback(initialize); // Call to callback function on page load.
</script>
= JS Functions to display MAP Ends here =
Congratulations !! you are done with it.. You can easily see your map with specified address... No need to calculate latitude, longitude neither is there hassle of point locations finding for Marker and SmartWindow.
BTW, Dont forget to provide some content layer on your page to hold the map... or else there is no specific place you are giving for google to show its map on your website..
e.g.
<body>
<div id="map_canvas" style="width:600px;height:300px"></div>
</body>
Here's wishing you a very happy programming !!
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment