Recently I was working on Google Maps for some hotels site. The requirement was to provide Google Maps for every hotel while the latitude and logitudes were given. I found the example given by Google to be somewhat difficult to follow. Once I figured it out on how to display Google Maps when latitude and longitude are given, I decided to write the article as a help to those having problem in dealing with Google Maps initially.
The code is almost same, I’ve just removed the code from the Google’s Big Example code, which might tease the absolute beginner.
The example map was dealing with xml and database. Here to simplify the things, I’ve taken 4 parameters:
- Latitude.
- Longitude.
- Map Width.
- Map Height.
I just defined 4 variables in php. and provided the values in javascript as follows:
<pre>map.setCenter(new google.maps.LatLng("<?php echo $latitude; ?>", "<?php echo $longitude; ?>"), 13);</pre>
The way above also describes on how to pass a variable in php to javascript. The example is given as is below. For the example I’ve taken the example of Chandigarh. The reader can try of their own for different values.
For local PCs, you should not have any problems in running this map using wamp or lamp. But for live sites, you need to apply for free unique key from Google. You simply need to have gmail email id. Replace the key mentioned below with yours. You can specify by changing the code as follows:
<pre>
src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAwz_yeIjxSaUntQB2_-NdpxQG46yGL4gHC-ZyH2i6LG72t4-yLhTY1Jyvg2fag54QRwsO42lUdD6OjA">
</pre>
<html>
<?php
$latitude = "30.737222";
$longitude = "76.787222";
$map_width=600;
$map_height=350;
?>
<head>
<script type="text/javascript"
src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAwz_yeIjxSaUntQB2_-NdpxQG46yGL4gHC-ZyH2i6LG72t4-yLhTY1Jyvg2fag54QRwsO42lUdD6OjA">
</script>
<script type="text/javascript">
//<![CDATA[
var iconBlue = new GIcon();
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var iconRed = new GIcon();
iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconRed.iconSize = new GSize(14, 30);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["Sample"] = iconRed;
customIcons["bar"] = iconBlue;
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new google.maps.LatLng("<?php echo $latitude; ?>", "<?php echo $longitude; ?>"), 13);
var name = "<?php echo "My First Map"; ?>";
var address = "<?php echo "Address Line 1.<br>Address Line 2.<br>Address Line 3.<br>City.<br>State.<br>Country."; ?>";
var type = "Sample";
var point = new GLatLng(parseFloat("<?php echo $latitude; ?>"),
parseFloat("<?php echo $longitude; ?>"));
var marker = createMarker(point, name, address, type);
map.addOverlay(marker);
}
map.zoomOut();
map.checkResize();
}
function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
var html = "<b>" + name + "</b>" + address + "<br/>";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: <?php echo $map_width; ?>px; height: <?php echo $map_height; ?>px"></div>
</body>
</html>
As a side note at the end, I would like to mention the use of: map.zoomOut. This is used in case we want to cover more area under the map. If you want to concentrate on small area on the same map then you may like to use map.zoomIN. And mind it, these are all case sensitive. You don;t follow the rules, you may get different or no results at all.
Please feel free to ask any questions you may have about this. Thanks for taking time to read this article.