Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- need to add
- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
- then js
- http://maps.googleapis.com/maps/api/js?v=3.4&sensor=false
- for map building
- <table cellspacing="0" cellpadding="0" class="contentpaneopen"><tbody>
- <tr><td>
- <script language="javascript" type="text/javascript">
- var experiences = [
- ['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>'],
- ['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>'],
- ['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>'],
- ['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>'],
- ['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>'],
- ];
- //console.log(experiences);
- //var marker = new array();
- //var markerinfoWindow = new google.maps.InfoWindow();
- //var infowindow = null;
- //function to actually initialise the map
- function initializeGmap() {
- var experience = experiences[0];
- var latLng = new google.maps.LatLng(experience[1], experience[2]);
- var myOptions = {
- zoom: 7,
- center: latLng,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
- var map = new google.maps.Map(document.getElementById("singlegcmap"), myOptions);
- /* now inside your initialise function */
- /*
- //adding overlay image into map
- var tilelayer = new GTileLayer(new GCopyrightCollection(), 0, 17);
- tilelayer.getTileUrl = function(tile, zoom) {
- // A more interesting tile server would do something with the numbers
- // tile.x, tile.y and zoom.
- return "http://kml.lover.googlepages.com/white_map_tile.gif";
- };
- tilelayer.getOpacity = function() {return 0.5;}
- map.addOverlay(new GTileLayerOverlay(tilelayer));
- */
- setMarkers(map,experiences);
- //event listeners
- /*
- google.maps.event.addListenerOnce(map, 'idle', function(){
- alert(this.getBounds());
- });
- google.maps.event.addListener(map, 'bounds_changed', function() {
- alert(map.getBounds());
- });
- */
- }//end of function initialize
- /**
- * Data for the markers consisting of a name, a LatLng and a zIndex for
- * the order in which these markers should display on top of each
- * other.
- */
- //alert(experiences);
- function setMarkers(map,experiences) {
- // Add markers to the map
- // Marker sizes are expressed as a Size of X,Y
- // where the origin of the image (0,0) is located
- // in the top left of the image.
- // Origins, anchor positions and coordinates of the marker
- // increase in the X direction to the right and in
- // the Y direction down.
- var bounds = new google.maps.LatLngBounds();
- for (var i = 0; i < experiences.length; i++) {
- var experience = experiences[i];
- var myLatLng = new google.maps.LatLng(experience[1], experience[2]);
- var gServiceIcon = new google.maps.MarkerImage(
- experience[3],
- new google.maps.Size(30, 34),
- new google.maps.Point(0, 0),
- new google.maps.Point(16, 16)
- );
- var marker = new google.maps.Marker({
- position: myLatLng,
- map: map,
- icon: gServiceIcon,
- title: experience[0],
- zIndex: experience[4],
- html:experience[5]
- });
- var infowindow = new google.maps.InfoWindow({
- content: "holding..."
- });
- google.maps.event.addListener(marker, 'click', function() {
- infowindow.setContent(this.html);
- infowindow.open(map,this);
- });
- google.maps.event.addListener(infowindow,'closeclick',function(){
- //currentMark.setMap(null); //removes the marker
- //alert('thank you');
- var exp = experiences[0];
- var lt = new google.maps.LatLng(exp[1], exp[2]);
- map.setCenter(lt);
- bounds.extend(myLatLng);
- map.fitBounds(bounds);
- //remove after the maker of the array
- });
- /*
- //info window
- // Create the infowindow with two DIV placeholders
- // One for a text string, the other for the StreetView panorama.
- var content = document.createElement("DIV");
- var title = document.createElement("DIV");
- title.innerHTML = experience[5];
- content.appendChild(title);
- var streetview = document.createElement("DIV");
- streetview.style.width = "200px";
- streetview.style.height = "200px";
- content.appendChild(streetview);
- var infowindow = new google.maps.InfoWindow({
- content: content
- });
- // Open the infowindow on marker click
- google.maps.event.addListener(marker, "click", function() {
- infowindow.open(map, marker);
- });
- // Handle the DOM ready event to create the StreetView panorama
- // as it can only be created once the DIV inside the infowindow is loaded in the DOM.
- google.maps.event.addListenerOnce(infowindow, "domready", function() {
- var panorama = new google.maps.StreetViewPanorama(streetview, {
- navigationControl: false,
- enableCloseButton: false,
- addressControl: false,
- linksControl: false,
- visible: true,
- position: marker.getPosition()
- });
- });
- */
- //end info window
- bounds.extend(myLatLng);
- map.fitBounds(bounds);
- }//end foreach
- }//end set marker function
- function detectBrowser() {
- var useragent = navigator.userAgent;
- var mapdiv = document.getElementById("singlegcmap");
- if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
- mapdiv.style.width = '100%';
- mapdiv.style.height = '100%';
- } else {
- mapdiv.style.width = '550px';
- mapdiv.style.height = '400px';
- }
- }
- /*
- function updateMarkerPosition(latLng) {
- document.getElementById('latitude').value = latLng.lat();
- document.getElementById('longitude').value = latLng.lng();
- //console.log(latLng.zoom);
- }
- */
- </script>
- <div id="singlegcmap" style="width:550px; height:400px"></div>
- <script type="text/javascript">
- initializeGmap();
- detectBrowser();
- </script>
- </td></tr>
- </tbody></table>
Add Comment
Please, Sign In to add comment