...

View Full Version : Changing Google Maps script....



stephen_
03-05-2012, 04:25 PM
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;


//<![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



//<![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!!!

xelawho
03-05-2012, 10:08 PM
PLEASE HELP ME!!!

please help us to help you. what exactly is the problem? and can you give a link to an example page?

stephen_
03-06-2012, 09:56 AM
@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 (http://flintmaker.com/code/simple-jquery-css-tabs-and-v3-google-maps/) .....

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?

xelawho
03-06-2012, 12:41 PM
:confused:

the example you link to here (http://flintmaker.com/sandpit/jquery-tabs-google-map.html) 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...

stephen_
03-06-2012, 01:59 PM
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.

xelawho
03-06-2012, 11:02 PM
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


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.

stephen_
03-07-2012, 11:34 AM
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!



<!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>

xelawho
03-07-2012, 10:38 PM
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:


<!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>

stephen_
03-08-2012, 09:36 AM
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;



<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum