Subesh Pokhrel's Blog - Magento Development Tips » Map View Options http://subesh.com.np PHP & Magento Tips and Tutorials Wed, 01 Feb 2012 04:09:38 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Google Map With Zoom and Map Type http://subesh.com.np/2008/05/google-map-with-zoom-and-map-type/ http://subesh.com.np/2008/05/google-map-with-zoom-and-map-type/#comments Sat, 17 May 2008 10:54:03 +0000 Subesh Pokhrel http://subesh.com.np/?p=18 To get a simple Google Map for you website its, pretty easy actually. Just go to http://maps.google.com/maps/api_signup and input the necessary details then you will get a sample code for a simple google map. The Sample code is just like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAPHLcOOGHX2-uLk3K8q1nMRTkUAbhgKwL1jWWfpv-KGJeCrct7hTsLLnZdnZjzehmRIkaePagQvKNbw"
      type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

This creates a simple Google Map instance and plots it over the element div with id=’map’ (#24). The instance of Google Map for your page is created on #15, with the map center defined of #16 by constructor function GLatLng, whose parameter are the Geological Latitude and Longitude of the Place. The ’13′ you see is the zoom level of the map when it loads.

Now for the option of Zoom and various map view option that the Google provides us, just copy the code below and paste them after #16. Remember these are the properties of the Google Map’s instance you created.

map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

By adding these you can change the map views i.e Map,Satellite and Hybrid with small map navigation options on the left.

]]> http://subesh.com.np/2008/05/google-map-with-zoom-and-map-type/feed/ 0