Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    49
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Changing Google Maps script....

    Hi, I'm having a head against wall session and would appricate some help with modifying a google maps script....

    I need the orginal script below;
    Code:
    //<![CDATA[
    $(document).ready(function() {
    
          function initialize() {
            var myLatlng = new google.maps.LatLng(54.2385,-6.9846);
            var myOptions = {
              zoom: 8,
              center: myLatlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
    
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
            var contentString = '<div id="content">'+
                '<h3><? echo $org_name;?></h3>'+
                '<div>'+
                '<p><a href="#" class="bluelink">Link to profile'+
                '#</a></p>'+
                '</div>'+
                '</div>';
    
            var infowindow = new google.maps.InfoWindow({
                content: contentString,
                maxWidth: 300
            });
            
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: '<? echo $org_name;?>',
                clickable: false,
                icon: 'http://google-maps-icons.googlecode.com/files/school.png'
            });
    
            google.maps.event.addListener(marker, 'click', function() {
              infowindow.open(map,marker);
            });
    
          }
    
        	// Function added to help reset map and container boundaries
            $("#showMap").click(function() {
            $("#tab2").css({'display':'block'});
            $("#map_canvas").css({'width':'630px', 'height':'400px'});
            initialize();
            //alert('showMap Clicked!');
            });
    
         initialize(); 
    
        });
    changed to

    Code:
        //<![CDATA[
    
        var customIcons = {
          restaurant: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
          },
          bar: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
          }
        };
    
        function load() {
          var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(53.943155, -7.437744),
            zoom: 13,
            mapTypeId: 'roadmap'
          });
          var infoWindow = new google.maps.InfoWindow;
    
          // Change this depending on the name of your PHP file
          downloadUrl("phpsqlajax_genxml3.php", function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
              var name = markers[i].getAttribute("name");
              var address = markers[i].getAttribute("address");
              var type = markers[i].getAttribute("type");
              var point = new google.maps.LatLng(
                  parseFloat(markers[i].getAttribute("lat")),
                  parseFloat(markers[i].getAttribute("lng")));
              var html = "<b>" + name + "</b> <br/>" + address;
              var icon = customIcons[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon,
                shadow: icon.shadow
              });
              bindInfoWindow(marker, map, infoWindow, html);
            }
          });
        }
    
        function bindInfoWindow(marker, map, infoWindow, html) {
          google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
          });
        }
    
        function downloadUrl(url, callback) {
          var request = window.ActiveXObject ?
              new ActiveXObject('Microsoft.XMLHTTP') :
              new XMLHttpRequest;
    
          request.onreadystatechange = function() {
            if (request.readyState == 4) {
              request.onreadystatechange = doNothing;
              callback(request, request.status);
            }
          };
    
          request.open('GET', url, true);
          request.send(null);
        }
    
        function doNothing() {}
    
        //]]>
    In order for the amended code to work I need to include the;


    // Function added to help reset map and container boundaries
    $("#showMap").click(function() {
    $("#tab2").css({'display':'block'});
    $("#map_canvas").css({'width':'630px', 'height':'400px'});
    initialize();
    //alert('showMap Clicked!');
    });

    initialize();



    so that the map will load in a jquery tab... PLEASE HELP ME!!!

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    Quote Originally Posted by stephen_ View Post
    PLEASE HELP ME!!!
    please help us to help you. what exactly is the problem? and can you give a link to an example page?

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    49
    Thanks
    13
    Thanked 0 Times in 0 Posts
    @xelawho - sorry i'm at breaking point. Google maps have problems being put into tabs as I'm sure your well aware of, i found a lovely workaround here .....

    The only trouble is the map script they use is no good for me, its a static map. I want a dynamic one and I've managed to get the example from google to work (as advised by your goodself I think). The trouble is when I change the script from the tut above the map goes blank.

    I need to add the map script I want into the example tut?

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts


    the example you link to here isn't a static map, in that you can pan it and zoom it. is there something else you want to do to it?

    it's almost impossible to say what might be going wrong if you don't give us a link to your map... so...

  • #5
    New Coder
    Join Date
    Jan 2012
    Posts
    49
    Thanks
    13
    Thanked 0 Times in 0 Posts
    The map itself isnt static but the code to output the marker is, i'm using php to output the markers from mysql database.

    I'm trying to change the google script into the 2nd script I posted in the 1st thread.....

    I cant link to my page at present but I dont think it will make my question any easier to understand. The 2 scripts in the 1st thread gives all the detail anyone needs.
    Last edited by stephen_; 03-06-2012 at 02:01 PM.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    Quote Originally Posted by stephen_ View Post
    The map itself isnt static but the code to output the marker is, i'm using php to output the markers from mysql database.
    hard to see why that's relevant
    Quote Originally Posted by stephen_ View Post
    I cant link to my page at present but I dont think it will make my question any easier to understand. The 2 scripts in the 1st thread gives all the detail anyone needs.
    It's not about understanding the question - that's easily understood. The point is diagnosing the problem. You don't call your mechanic up on the phone and tell him your car's making a funny noise, send him the owner's manual (so he knows how it should run) and ask him what the problem is, do you?

    really, the possibilities for what could be going wrong are nearly endless. is there some reason why you think we would sit around guessing at them?

    Most helpful for you at this point would be to make a simple map, with just the tabs and the map and the markers. Probably in making that you will find that you pinpoint the problem. But if you find that it is something basic in those early stages, you can either share the link or the code that you are using and you will be more likely to get a helpful response.

  • #7
    New Coder
    Join Date
    Jan 2012
    Posts
    49
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Okay slapped myself 3 times and attached is the code of the page with the 2 map scripts.

    I want to replace the script highlighted with the 1st map script (line 214) please say this makes sense!

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	//Default Action
    	$(".tab_content").hide();
    	$("ul.tabs li:first").addClass("active").show();
    	$(".tab_content:first").show(); 
    
    	//On Click Event
    	$("ul.tabs li").click(function() {
    		$("ul.tabs li").removeClass("active");
    		$(this).addClass("active");
    		$(".tab_content").hide();
    		var activeTab = $(this).find("a").attr("href");
    		$(activeTab).fadeIn();
    		if(activeTab == '#tab2') {
    			$(window).resize(function(){
    			//$("#tab2").css({'display':'block'});
    			//$("#map_canvas").css({'width':'630px', 'height':'400px'});
    			//initialize();
    			//alert('Changed!');
    			});
        		}
    		return false;
    	});
    });
    </script>
    
    <style type="text/css" media="screen">
    /* Standard definitions  */
    /* Extras  */
    .backtohome{border:1px solid #dbdbdb;background-color:#f5f5f5;color:#8f8f8f;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;border-radius:5px 5px 5px 5px;padding:5px;}
    .hdot{height:1px;border-top:1px dotted #dbdbdb;}
    /* Tabbed interface */
    .container {width: 780px; margin: 10px auto;}
    ul.tabs {margin: 0;padding: 0;float: left;list-style: none;height: 32px;border-bottom: 1px solid #c0c0c0;border-left: 1px solid #c0c0c0;width: 100%;}
    ul.tabs li {float: left;margin: 0;padding: 0;height: 31px;line-height: 31px;border: 1px solid #c0c0c0;border-left: none;margin-bottom: -1px;background: #e0e0e0;overflow: hidden;position: relative;}
    ul.tabs li a {text-decoration: none;color: #000;display: block;padding: 0 20px;border: 1px solid #fff;outline: none;}
    ul.tabs li a:hover {background: #ccc;}
    html ul.tabs li.active, html ul.tabs li.active a:hover  {background: #fff;border-bottom: 1px solid #fff;}
    .tab_container {	border: 1px solid #c0c0c0;border-top: none;clear: both;float: left; width: 100%;background: #fff;
    -webkit-border-radius: 0px 0px 5px 5px;-moz-border-radius: 0px 0px 5px 5px;border-radius: 0px 0px 5px 5px;}
    .tab_content {padding: 20px;}
    .tab_content h2 {padding-bottom: 10px;border-bottom: 1px dotted #ddd;}
    .tab_content h3 a{color: #254588;}
    /* Google map */
    #map_canvas {width: 630px; height: 400px;border:1px solid #dbdbdb;}
    /*contact form */
    
    input, textarea { 
    	padding: 8px;
    	border: solid 1px #E5E5E5;
    	font: normal 12px Verdana, Tahoma, sans-serif;
    	width: 200px;
    	background: #FFFFFF url('form_background.png') left top repeat-x;/*Mimic Background Property in Internet Explorer since IE 6,7,8 does not support CSS3*/
    	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
    	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
    	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;/*0.1 actually means 10 %*/
    	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    	}
    
    textarea { 
    	width: 400px;
    	max-width: 400px;
    	height: 150px;
    	line-height: 150%;
    	}
    
    input:hover, textarea:hover,
    input:focus, textarea:focus { 
    -moz-box-shadow:0 0 8px lightblue;
    	-webkit-box-shadow:0 0 8px lightblue;
    	box-shadow:0 0 8px lightblue;
    }
    
    .form label { 
    	margin-left: 12px; 
    	color: #999999; 
    	}
    
    .submit input {
    	width: auto;
    	padding: 10px 14px;
    	background: #617798;
    	font-size: 14px;
    	color: #FFFFFF;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	cursor:pointer;
    	}
    #form-div { 
    -moz-border-radius:12px 12px 12px 12px;
    -webkit-border-radius: 12px 12px 12px 12px;
    background-color:#F5F5F5;
    padding:15px;
    }
    
    #wrapper { 
    margin:30px auto;
    width:500px;
    }
    
    
    
    form.formular {
    	font-family: tahoma, verdana, "sans-serif";
    	font-size: 12px;
    	padding: 20px;
    	border: 1px solid #A5A8B8;
    
    	width:300px;
    	margin-left:300px;
    }
    
    .formular fieldset {
    	margin-top: 20px;
    	padding : 15px;
    	border: 1px solid #B5B8C8;
    	
    }
    
    .formular legend {
    	font-size: 12px;
    	color: #15428B;
    	font-weight: 900;
    }
    
    .formular fieldset label {
    	float: none;
    	text-align: inherit;
    	width: auto;
    }
    
    .formular label span {
    	color: #000;
    }
    
    .formular input, .formular select, .formular textarea {
    	display : block;
    	margin-bottom: 5px;
    }
    
    .formular .text-input {
    	width: 250px;
    	color: #555;
    	padding: 4px;
    	border: 1px solid #B5B8C8;
    	font-size: 14px;
    	margin-top: 4px;
    	background: #FFF url('/img/form/text-bg.gif') repeat-x;
    	
    }
    .formular textarea {
    	width: 250px;
    	height:70px;
    	color: #555;
    	padding: 4px;
    	border: 1px solid #B5B8C8;
    	font-size: 14px;
    	margin-top: 4px;
    	background: #FFF url('/img/form/text-bg.gif') repeat-x;
    	
    }
    .formular .infos {
    	background: #FFF;
    	color: #333;
    	font-size: 12px;
    	padding: 10px;
    	margin-bottom: 10px;
    }
    
    .formular span.checkbox, .formular .checkbox {
    	display: inline;
    }
    
    .formular .submit {
    	background: url('/img/form/button-bg.png') repeat-x;
    	border: 1px solid #AAA;
    	padding: 4px;
    	margin-top: 20px;
    	float: right;
    	text-decoration: none;
    	cursor:pointer;
    }
    
    .formular hr {
    	clear: both;
    	visibility: hidden;
    }
    
    .formular .fc-error {
    	width: 350px;
    	color: #555;
    	padding: 4px;
    	border: 1px solid #B5B8C8;
    	font-size: 12px;
    	margin-bottom: 15px;
    	background: #FFEAEA;
    }
            
        
    </style>
    
        <script src="http://maps.google.com/maps/api/js?sensor=false"type="text/javascript"></script>
        <script type="text/javascript">
        //<![CDATA[
    
        var customIcons = {
          restaurant: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
          },
          bar: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
          }
        };
    
        function load() {
          var map = new google.maps.Map(document.getElementById("map_canvas2"), {
            center: new google.maps.LatLng(53.943155, -7.437744),
            zoom: 8,
            mapTypeId: 'roadmap'
          });
          var infoWindow = new google.maps.InfoWindow;
    
          // Change this depending on the name of your PHP file
          downloadUrl("phpsqlajax_genxml3.php", function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
              var name = markers[i].getAttribute("name");
              var address = markers[i].getAttribute("address");
              var type = markers[i].getAttribute("type");
              var point = new google.maps.LatLng(
                  parseFloat(markers[i].getAttribute("lat")),
                  parseFloat(markers[i].getAttribute("lng")));
              var html = "<b>" + name + "</b> <br/>" + address;
              var icon = customIcons[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon,
                shadow: icon.shadow
              });
              bindInfoWindow(marker, map, infoWindow, html);
            }
          });
        }
    
        function bindInfoWindow(marker, map, infoWindow, html) {
          google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
          });
        }
    
        function downloadUrl(url, callback) {
          var request = window.ActiveXObject ?
              new ActiveXObject('Microsoft.XMLHTTP') :
              new XMLHttpRequest;
    
          request.onreadystatechange = function() {
            if (request.readyState == 4) {
              request.onreadystatechange = doNothing;
              callback(request, request.status);
            }
          };
    
          request.open('GET', url, true);
          request.send(null);
        }
    
        function doNothing() {}
    
        //]]>
      </script>
      </head>
    
      <body onload="load()">
        <div id="map_canvas2" style="width: 450px; height: 450px"></div>
    
    
    <div class="container">
    	<h1>Simple Jquery CSS Tabs and V3 Google Maps</h1>
    
        <ul class="tabs">
        <li><a href="#tab1">About</a></li>
        <li><a href="#tab2" id="showMap">Map</a></li>
        <li><a href="#tab3">Contact</a></li>
        </ul>
    <!-- Start tab container -->
    <div class="tab_container">
    
        <div id="tab1" class="tab_content">
                <h2>About</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        
    <!-- Map Tab-->
        <div id="tab2" class="tab_content">
        <h2>Location Map</h2>
    <div id="map" style="width:100%; height:65%"></div>
            
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function() {
    
          function initialize() {
            var myLatlng = new google.maps.LatLng(-31.952222,115.858889);
            var myOptions = {
              zoom: 14,
              center: myLatlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
    
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
            var contentString = '<div id="content">'+
                '<h1>Perth, Western Australia</h1>'+
                '<div>'+
                '<p><b>Perth</b> is the capital and largest city of the Australian state of Western Australia and the fourth most populous city in Australia</p>'+
                '<p>Attribution: Perth, Western Australia, <a href="http://en.wikipedia.org/wiki/Perth,_Western_Australia">'+
                'http://en.wikipedia.org/wiki/Perth,_Western_Australia</a></p>'+
                '</div>'+
                '</div>';
    
            var infowindow = new google.maps.InfoWindow({
                content: contentString,
                maxWidth: 300
            });
            
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: 'Perth, Western Australia'
            });
            google.maps.event.addListener(marker, 'click', function() {
              infowindow.open(map,marker);
            });
    
          }
    
        	// Function added to help reset map and container boundaries - THIS HAS TO STAY FOR THE TABS TO DISPLAY THE MAP!
            $("#showMap").click(function() {
            $("#tab2").css({'display':'block'});
            $("#map_canvas").css({'width':'630px', 'height':'400px'});
            initialize();
            //alert('showMap Clicked!');
            });
    
         initialize(); 
    
        });
        //]]>
    
        </script>
        <div id="map_canvas" style="width:630px;height:400px;"></div>
        </div>
    
    <!-- Feedback Tab-->
    
        <div id="tab3" class="tab_content">
            <h2>Feedback</h2>    
    <div id="wrapper">
      <div id="form-div">
        <form class="form" id="form1">
          <p class="name">
            <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] text-input" id="name" value="My Name" />
            <label for="name">Name</label>
          </p>
          <p class="email">
            <input name="email" type="text" class="validate[required,custom[email]] text-input" id="email" value="email@email.com" />
            <label for="email">E-mail</label>
          </p>
          <p class="web">
            <input type="text" name="web" id="web" />
            <label for="web">Website</label>
          </p>
          <p class="text">
            <textarea name="text" class="validate[required,length[6,300]] text-input" id="comment">Hello world</textarea>
          </p>
          <p class="submit">
            <input type="submit" value="Send" />
          </p>
        </form>
      </div>
    </div>
    <!-- End tab container -->
    
    <!-- Back Home Footer -->
    <div style="clear: both; display: block; padding: 10px 0; text-align:center;">
    <div class="backtohome">
    
    </div>
    </div>
    <!-- end back home Footer -->
    </div>
    </body>
    </html>
    Last edited by stephen_; 03-07-2012 at 12:22 PM.

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    yes... like I said, simplifying is often your best course of action. Having two map divs and loading the API twice wasn't really helping, and it looked to me like jQuery wasn't getting loaded correctly (I don't know much about it, but it seems to me that you have to load jQuery before you load the jQuery UI).

    all of which is easy enough to see if you check out the error console.

    anyway. see if this helps:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript">
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type="text/css" media="all"/>
    
    <style type="text/css" media="screen">
    /* Standard definitions  */
    /* Extras  */
    .backtohome{border:1px solid #dbdbdb;background-color:#f5f5f5;color:#8f8f8f;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;border-radius:5px 5px 5px 5px;padding:5px;}
    .hdot{height:1px;border-top:1px dotted #dbdbdb;}
    /* Tabbed interface */
    .container {width: 780px; margin: 10px auto;}
    ul.tabs {margin: 0;padding: 0;float: left;list-style: none;height: 32px;border-bottom: 1px solid #c0c0c0;border-left: 1px solid #c0c0c0;width: 100%;}
    ul.tabs li {float: left;margin: 0;padding: 0;height: 31px;line-height: 31px;border: 1px solid #c0c0c0;border-left: none;margin-bottom: -1px;background: #e0e0e0;overflow: hidden;position: relative;}
    ul.tabs li a {text-decoration: none;color: #000;display: block;padding: 0 20px;border: 1px solid #fff;outline: none;}
    ul.tabs li a:hover {background: #ccc;}
    html ul.tabs li.active, html ul.tabs li.active a:hover  {background: #fff;border-bottom: 1px solid #fff;}
    .tab_container {	border: 1px solid #c0c0c0;border-top: none;clear: both;float: left; width: 100%;background: #fff;
    -webkit-border-radius: 0px 0px 5px 5px;-moz-border-radius: 0px 0px 5px 5px;border-radius: 0px 0px 5px 5px;}
    .tab_content {padding: 20px;}
    .tab_content h2 {padding-bottom: 10px;border-bottom: 1px dotted #ddd;}
    .tab_content h3 a{color: #254588;}
    /* Google map */
    #map_canvas {width: 630px; height: 400px;border:1px solid #dbdbdb;}
    /*contact form */
    
    input, textarea { 
    	padding: 8px;
    	border: solid 1px #E5E5E5;
    	font: normal 12px Verdana, Tahoma, sans-serif;
    	width: 200px;
    	background: #FFFFFF url('form_background.png') left top repeat-x;/*Mimic Background Property in Internet Explorer since IE 6,7,8 does not support CSS3*/
    	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
    	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
    	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;/*0.1 actually means 10 %*/
    	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    	}
    
    textarea { 
    	width: 400px;
    	max-width: 400px;
    	height: 150px;
    	line-height: 150%;
    	}
    
    input:hover, textarea:hover,
    input:focus, textarea:focus { 
    -moz-box-shadow:0 0 8px lightblue;
    	-webkit-box-shadow:0 0 8px lightblue;
    	box-shadow:0 0 8px lightblue;
    }
    
    .form label { 
    	margin-left: 12px; 
    	color: #999999; 
    	}
    
    .submit input {
    	width: auto;
    	padding: 10px 14px;
    	background: #617798;
    	font-size: 14px;
    	color: #FFFFFF;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	cursor:pointer;
    	}
    #form-div { 
    -moz-border-radius:12px 12px 12px 12px;
    -webkit-border-radius: 12px 12px 12px 12px;
    background-color:#F5F5F5;
    padding:15px;
    }
    
    #wrapper { 
    margin:30px auto;
    width:500px;
    }
    
    
    
    form.formular {
    	font-family: tahoma, verdana, "sans-serif";
    	font-size: 12px;
    	padding: 20px;
    	border: 1px solid #A5A8B8;
    
    	width:300px;
    	margin-left:300px;
    }
    
    .formular fieldset {
    	margin-top: 20px;
    	padding : 15px;
    	border: 1px solid #B5B8C8;
    	
    }
    
    .formular legend {
    	font-size: 12px;
    	color: #15428B;
    	font-weight: 900;
    }
    
    .formular fieldset label {
    	float: none;
    	text-align: inherit;
    	width: auto;
    }
    
    .formular label span {
    	color: #000;
    }
    
    .formular input, .formular select, .formular textarea {
    	display : block;
    	margin-bottom: 5px;
    }
    
    .formular .text-input {
    	width: 250px;
    	color: #555;
    	padding: 4px;
    	border: 1px solid #B5B8C8;
    	font-size: 14px;
    	margin-top: 4px;
    	background: #FFF url('/img/form/text-bg.gif') repeat-x;
    	
    }
    .formular textarea {
    	width: 250px;
    	height:70px;
    	color: #555;
    	padding: 4px;
    	border: 1px solid #B5B8C8;
    	font-size: 14px;
    	margin-top: 4px;
    	background: #FFF url('/img/form/text-bg.gif') repeat-x;
    	
    }
    .formular .infos {
    	background: #FFF;
    	color: #333;
    	font-size: 12px;
    	padding: 10px;
    	margin-bottom: 10px;
    }
    
    .formular span.checkbox, .formular .checkbox {
    	display: inline;
    }
    
    .formular .submit {
    	background: url('/img/form/button-bg.png') repeat-x;
    	border: 1px solid #AAA;
    	padding: 4px;
    	margin-top: 20px;
    	float: right;
    	text-decoration: none;
    	cursor:pointer;
    }
    
    .formular hr {
    	clear: both;
    	visibility: hidden;
    }
    
    .formular .fc-error {
    	width: 350px;
    	color: #555;
    	padding: 4px;
    	border: 1px solid #B5B8C8;
    	font-size: 12px;
    	margin-bottom: 15px;
    	background: #FFEAEA;
    }
            
        
    </style>
    
        <script src="http://maps.google.com/maps/api/js?sensor=false"type="text/javascript"></script>
      </head>
    
    <div class="container">
    	<h1>Simple Jquery CSS Tabs and V3 Google Maps</h1>
    
        <ul class="tabs">
        <li><a href="#tab1">About</a></li>
        <li><a href="#tab2" id="showMap">Map</a></li>
        <li><a href="#tab3">Contact</a></li>
        </ul>
    <!-- Start tab container -->
    <div class="tab_container">
    
        <div id="tab1" class="tab_content">
                <h2>About</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        
    <!-- Map Tab-->
        <div id="tab2" class="tab_content">
        <h2>Location Map</h2>
    <div id="map" style="width:100%; height:65%"></div>
            
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
        //<![CDATA[
        var customIcons = {
          restaurant: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
          },
          bar: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
          }
        };
    	
    	$(document).ready(function() {
    	
    	//Default Action
    	$(".tab_content").hide();
    	$("ul.tabs li:first").addClass("active").show();
    	$(".tab_content:first").show(); 
    
    	//On Click Event
    	$("ul.tabs li").click(function() {
    		$("ul.tabs li").removeClass("active");
    		$(this).addClass("active");
    		$(".tab_content").hide();
    		var activeTab = $(this).find("a").attr("href");
    		$(activeTab).fadeIn();
    		if(activeTab == '#tab2') {
    			$(window).resize(function(){
    			//$("#tab2").css({'display':'block'});
    			//$("#map_canvas").css({'width':'630px', 'height':'400px'});
    			//initialize();
    			//alert('Changed!');
    			});
        		}
    		return false;
    	});
    	
            var map = new google.maps.Map(document.getElementById("map_canvas"), {
            center: new google.maps.LatLng(53.943155, -7.437744),
            zoom: 8,
            mapTypeId: 'roadmap'
          });
          var infoWindow = new google.maps.InfoWindow;
    
          // Change this depending on the name of your PHP file
          downloadUrl("phpsqlajax_genxml3.php", function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
              var name = markers[i].getAttribute("name");
              var address = markers[i].getAttribute("address");
              var type = markers[i].getAttribute("type");
              var point = new google.maps.LatLng(
                  parseFloat(markers[i].getAttribute("lat")),
                  parseFloat(markers[i].getAttribute("lng")));
              var html = "<b>" + name + "</b> <br/>" + address;
              var icon = customIcons[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon,
                shadow: icon.shadow
              });
              bindInfoWindow(marker, map, infoWindow, html);
            }
          });
    
        function bindInfoWindow(marker, map, infoWindow, html) {
          google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
          });
        }
    
        function downloadUrl(url, callback) {
          var request = window.ActiveXObject ?
              new ActiveXObject('Microsoft.XMLHTTP') :
              new XMLHttpRequest;
    
          request.onreadystatechange = function() {
            if (request.readyState == 4) {
              request.onreadystatechange = doNothing;
              callback(request, request.status);
            }
          };
    
          request.open('GET', url, true);
          request.send(null);
          }
    function doNothing() {}
        	// Function added to help reset map and container boundaries - THIS HAS TO STAY FOR THE TABS TO DISPLAY THE MAP!
            $("#showMap").click(function() {
            $("#tab2").css({'display':'block'});
            $("#map_canvas").css({'width':'630px', 'height':'400px'});
            //alert('showMap Clicked!');
    		google.maps.event.trigger(map,'resize');
            });
    
    
        });
        //]]>
    
        </script>
        <div id="map_canvas" style="width:630px;height:400px;"></div>
        </div>
    
    <!-- Feedback Tab-->
    
        <div id="tab3" class="tab_content">
            <h2>Feedback</h2>    
    <div id="wrapper">
      <div id="form-div">
        <form class="form" id="form1">
          <p class="name">
            <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] text-input" id="name" value="My Name" />
            <label for="name">Name</label>
          </p>
          <p class="email">
            <input name="email" type="text" class="validate[required,custom[email]] text-input" id="email" value="email@email.com" />
            <label for="email">E-mail</label>
          </p>
          <p class="web">
            <input type="text" name="web" id="web" />
            <label for="web">Website</label>
          </p>
          <p class="text">
            <textarea name="text" class="validate[required,length[6,300]] text-input" id="comment">Hello world</textarea>
          </p>
          <p class="submit">
            <input type="submit" value="Send" />
          </p>
        </form>
      </div>
    </div>
    <!-- End tab container -->
    
    <!-- Back Home Footer -->
    <div style="clear: both; display: block; padding: 10px 0; text-align:center;">
    <div class="backtohome">
    
    </div>
    </div>
    <!-- end back home Footer -->
    </div>
    </body>
    </html>

  • Users who have thanked xelawho for this post:

    stephen_ (03-08-2012)

  • #9
    New Coder
    Join Date
    Jan 2012
    Posts
    49
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Thank you so much for this really helps! I now have a dynamic map in tabs for a search page. As soon as I get this finshed off I'll link to the site to allow others to get pointers.

    Added var bounds to auto centre map updated code for reference;

    Code:
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=GB"></script>
        <script type="text/javascript">
        
        //<![CDATA[
        var customIcons = {
          restaurant: {
            icon: 'images/daycare-marker.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
          },
          bar: {
            icon: 'images/daycare-marker.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
          }
        };
    
    
    	    $(document).ready(function() {
    
    	//Default Action
    	    $(".tab_content").hide();
    	    $("ul.tabs li:first").addClass("active").show();
    	    $(".tab_content:first").show(); 
    
    	//On Click Event
    	    $("ul.tabs li").click(function() {
    		$("ul.tabs li").removeClass("active");
    		$(this).addClass("active");
    		$(".tab_content").hide();
    		var activeTab = $(this).find("a").attr("href");
    		$(activeTab).fadeIn();
    		if(activeTab == '#tab2') {
    		$(window).resize(function(){
    			//$("#tab2").css({'display':'block'});
    			//$("#map_canvas").css({'width':'630px', 'height':'400px'});
    			//initialize();
    			//alert('Changed!');
    		});
        	}
    		return false;
    });
    
            var map = new google.maps.Map(document.getElementById("map_canvas"), {
            center: new google.maps.LatLng(54.01, -7.38), // CHANGE THIS AUTO CENTRE
            zoom: 9, // CHANGE TO AUTO ZOOM
            mapTypeId: 'roadmap',
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
    });
    
    
          var infoWindow = new google.maps.InfoWindow;
    
          // Change this depending on the name of your PHP file
          downloadUrl("phpsqlajax_genxml3.php", function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
              var bounds = new google.maps.LatLngBounds(); //auto zoom?
              var name = markers[i].getAttribute("name");
              var address = markers[i].getAttribute("address");
              var type = markers[i].getAttribute("type");
              var point = new google.maps.LatLng(
                  parseFloat(markers[i].getAttribute("lat")),
                  parseFloat(markers[i].getAttribute("lng")));
              var html = "<b>" + name + "</b> <br/>" + address;
              var icon = customIcons[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon,
                shadow: icon.shadow
              });
              bounds.extend(point);
              map.fitBounds(bounds);
              map.setZoom(9);
              bindInfoWindow(marker, map, infoWindow, html);
            }
          });
    
        function bindInfoWindow(marker, map, infoWindow, html) {
          google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
          });
        }
    
        function downloadUrl(url, callback) {
          var request = window.ActiveXObject ?
              new ActiveXObject('Microsoft.XMLHTTP') :
              new XMLHttpRequest;
    
          request.onreadystatechange = function() {
            if (request.readyState == 4) {
              request.onreadystatechange = doNothing;
              callback(request, request.status);
            }
          };
    
          request.open('GET', url, true);
          request.send(null);
          }
            function doNothing() {}
        	// Function added to help reset map and container boundaries - THIS HAS TO STAY FOR THE TABS TO DISPLAY THE MAP!
            $("#showMap").click(function() {
            $("#tab2").css({'display':'block'});
            $("#map_canvas").css({'width':'630px', 'height':'400px'});
            //alert('showMap Clicked!');
    		google.maps.event.trigger(map,'resize');
            });
        });
        //]]>
    
        </script>
    Last edited by stephen_; 03-09-2012 at 03:14 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •