API tools faq
paste
manchumahara

Google map with v3.4 example js codes

manchumahara
Aug 5th, 2012
136
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 9.65 KB | None | 0 0
raw download clone embed print report
  1. need to add
  2.  
  3. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  4.  
  5. then js
  6. http://maps.googleapis.com/maps/api/js?v=3.4&sensor=false
  7.  
  8.  
  9. for map building
  10.  
  11. <table cellspacing="0" cellpadding="0" class="contentpaneopen"><tbody>
  12. <tr><td>
  13. <script language="javascript" type="text/javascript">
  14.   var experiences = [
  15.      
  16.       ['This is a sample experience map1', 23.685, 90.3563,'/gdp/images/experiencemap/markers/ico_consultancy_assignments_m.png?v=4' ,5, '<div id="content"><div id="siteNotice"></div><h1 id="firstHeading" class="firstHeading">This is a sample experience map1</h1><div id="bodyContent">This is a sample experience map1This is a sample experience map1This is a sample experience map1This is a sample experience map1This is a sample experience map1This is a sample experience map1This is a sample experience map1This is a sample experience map1</div></div>'],
  17.      
  18.       ['This is a sample experience map2', 55.3781, -3.43597,'/gdp/images/experiencemap/markers/ico_performance_benchmarking_m.png?v=4' ,4, '<div id="content"><div id="siteNotice"></div><h1 id="firstHeading" class="firstHeading">This is a sample experience map2</h1><div id="bodyContent">This is a sample experience map2This is a sample experience map2This is a sample experience map2This is a sample experience map2This is a sample experience map2This is a sample experience map2This is a sample experience map2This is a sample experience map2</div></div>'],
  19.      
  20.       ['This is a sample experience map3', 23.5257, 80.0176,'/gdp/images/experiencemap/markers/ico_e-communications_benchmarking_m.png?v=4' ,3, '<div id="content"><div id="siteNotice"></div><h1 id="firstHeading" class="firstHeading">This is a sample experience map3</h1><div id="bodyContent">This is a sample experience map3This is a sample experience map3This is a sample experience map3This is a sample experience map3This is a sample experience map3This is a sample experience map3This is a sample experience map3This is a sample experience map3This is a sample experience map3This is a sample experience map3This is a sample experience map3</div></div>'],
  21.      
  22.       ['This is a sample experience map4', 23.8861, 90.9935,'/gdp/images/experiencemap/markers/ico_representation_m.png?v=4' ,2, '<div id="content"><div id="siteNotice"></div><h1 id="firstHeading" class="firstHeading">This is a sample experience map4</h1><div id="bodyContent">This is a sample experience map4This is a sample experience map4This is a sample experience map4This is a sample experience map4This is a sample experience map4This is a sample experience map4This is a sample experience map4This is a sample experience map4This is a sample experience map4This is a sample experience map4This is a sample experience map4This is a sample experience map4This is a sample experience map4This is a sample experience map4</div></div>'],
  23.      
  24.       ['This is a sample experience map5', 23.6465, 79.3144,'/gdp/images/experiencemap/markers/ico_ipa_benchmarking_m.png?v=4' ,1, '<div id="content"><div id="siteNotice"></div><h1 id="firstHeading" class="firstHeading">This is a sample experience map5</h1><div id="bodyContent">This is a sample experience map5This is a sample experience map5This is a sample experience map5This is a sample experience map5This is a sample experience map5This is a sample experience map5This is a sample experience map5This is a sample experience map5This is a sample experience map5This is a sample experience map5This is a sample experience map5This is a sample experience map5This is a sample experience map5This is a sample experience map5</div></div>'],
  25.           ];
  26.    //console.log(experiences);
  27.    //var marker = new array();
  28.    //var markerinfoWindow = new google.maps.InfoWindow();
  29.    //var infowindow   = null;
  30.    
  31.   //function to actually initialise the map
  32.   function initializeGmap() {
  33.     var experience = experiences[0];
  34.     var latLng = new google.maps.LatLng(experience[1], experience[2]);
  35.     var myOptions = {
  36.       zoom: 7,
  37.       center: latLng,
  38.       mapTypeId: google.maps.MapTypeId.ROADMAP
  39.     };
  40.     var map = new google.maps.Map(document.getElementById("singlegcmap"),  myOptions);    
  41.     /* now inside your initialise function */
  42.    
  43.     /*
  44.     //adding overlay image into map
  45.     var tilelayer = new GTileLayer(new GCopyrightCollection(), 0, 17);
  46.     tilelayer.getTileUrl = function(tile, zoom) {
  47.        // A more interesting tile server would do something with the numbers
  48.        // tile.x, tile.y and zoom.
  49.        return "http://kml.lover.googlepages.com/white_map_tile.gif";
  50.     };
  51.     tilelayer.getOpacity = function() {return 0.5;}
  52.     map.addOverlay(new GTileLayerOverlay(tilelayer));
  53.     */
  54.    
  55.    
  56.     setMarkers(map,experiences);
  57.    
  58.  
  59.    
  60.    
  61.    
  62.     //event listeners    
  63.     /*        
  64.     google.maps.event.addListenerOnce(map, 'idle', function(){
  65.         alert(this.getBounds());
  66.     });
  67.     google.maps.event.addListener(map, 'bounds_changed', function() {
  68.          alert(map.getBounds());
  69.     });
  70.     */
  71.   }//end of function initialize
  72.   /**
  73.   * Data for the markers consisting of a name, a LatLng and a zIndex for
  74.   * the order in which these markers should display on top of each
  75.   * other.
  76.   */    
  77.    
  78.     //alert(experiences);
  79.     function setMarkers(map,experiences) {
  80.         // Add markers to the map
  81.  
  82.         // Marker sizes are expressed as a Size of X,Y
  83.         // where the origin of the image (0,0) is located
  84.         // in the top left of the image.
  85.  
  86.         // Origins, anchor positions and coordinates of the marker
  87.         // increase in the X direction to the right and in
  88.         // the Y direction down.
  89.        
  90.         var bounds = new google.maps.LatLngBounds();
  91.         for (var i = 0; i < experiences.length; i++) {
  92.             var experience = experiences[i];
  93.             var myLatLng = new google.maps.LatLng(experience[1], experience[2]);
  94.             var gServiceIcon = new google.maps.MarkerImage(
  95.                 experience[3],
  96.                 new google.maps.Size(30, 34),
  97.                 new google.maps.Point(0, 0),
  98.                 new google.maps.Point(16, 16)
  99.            );
  100.            var marker = new google.maps.Marker({
  101.                 position: myLatLng,
  102.                 map: map,
  103.                 icon: gServiceIcon,
  104.                 title: experience[0],
  105.                 zIndex: experience[4],
  106.                 html:experience[5]
  107.             });
  108.             var infowindow = new google.maps.InfoWindow({
  109.                 content: "holding..."
  110.             });
  111.  
  112.             google.maps.event.addListener(marker, 'click', function() {
  113.                 infowindow.setContent(this.html);
  114.                 infowindow.open(map,this);
  115.             });
  116.  
  117.             google.maps.event.addListener(infowindow,'closeclick',function(){
  118.                //currentMark.setMap(null); //removes the marker
  119.                //alert('thank you');
  120.                var exp = experiences[0];
  121.                var lt = new google.maps.LatLng(exp[1], exp[2]);
  122.                map.setCenter(lt);
  123.                bounds.extend(myLatLng);
  124.                map.fitBounds(bounds);
  125.                //remove after the maker of the array
  126.             });
  127.  
  128.  
  129.             /*
  130.             //info window
  131.             // Create the infowindow with two DIV placeholders
  132.               // One for a text string, the other for the StreetView panorama.
  133.               var content = document.createElement("DIV");
  134.               var title = document.createElement("DIV");
  135.               title.innerHTML = experience[5];
  136.               content.appendChild(title);
  137.               var streetview = document.createElement("DIV");
  138.               streetview.style.width = "200px";
  139.               streetview.style.height = "200px";
  140.               content.appendChild(streetview);
  141.               var infowindow = new google.maps.InfoWindow({
  142.                 content: content
  143.               });
  144.  
  145.               // Open the infowindow on marker click
  146.               google.maps.event.addListener(marker, "click", function() {
  147.                 infowindow.open(map, marker);
  148.               });
  149.  
  150.               // Handle the DOM ready event to create the StreetView panorama
  151.               // as it can only be created once the DIV inside the infowindow is loaded in the DOM.
  152.               google.maps.event.addListenerOnce(infowindow, "domready", function() {
  153.                 var panorama = new google.maps.StreetViewPanorama(streetview, {
  154.                     navigationControl: false,
  155.                     enableCloseButton: false,
  156.                     addressControl: false,
  157.                     linksControl: false,
  158.                     visible: true,
  159.                     position: marker.getPosition()
  160.                 });
  161.               });
  162.             */
  163.             //end info window
  164.             bounds.extend(myLatLng);
  165.             map.fitBounds(bounds);
  166.         }//end foreach
  167.     }//end set marker function
  168.    
  169.     function detectBrowser() {
  170.       var useragent = navigator.userAgent;
  171.       var mapdiv = document.getElementById("singlegcmap");
  172.  
  173.       if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
  174.         mapdiv.style.width = '100%';
  175.         mapdiv.style.height = '100%';
  176.       } else {
  177.         mapdiv.style.width = '550px';
  178.         mapdiv.style.height = '400px';
  179.       }
  180.     }
  181.  
  182.   /*
  183.   function updateMarkerPosition(latLng) {
  184.       document.getElementById('latitude').value = latLng.lat();
  185.       document.getElementById('longitude').value = latLng.lng();
  186.       //console.log(latLng.zoom);
  187.   }
  188.   */
  189. </script>
  190. <div id="singlegcmap" style="width:550px; height:400px"></div>
  191. <script type="text/javascript">
  192.     initializeGmap();
  193.     detectBrowser();
  194. </script>
  195. </td></tr>
  196. </tbody></table>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!