Morning !
I have my google maps setup to open an info window on the map however i want the info window to open in the article 'infowin' , does anyone know how i can get the information with is popping up fine on the map to populate in the side bar , can find a working version here
http://www.connectteesvalley.com/busdeparturessidetesting.asp
thank you
<!DOCTYPE html>
<html>
<head>
<!--Force IE standards mode-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1" />
<!--HTML5 IE enabling script-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" type="text/css" href="styles/desktopcore.css" />
<link rel="stylesheet" type="text/css" href="styles/desktopbus.css" />
<![endif]-->
<!--<link rel="stylesheet" type="text/css" media="(min-width: 551px) and (max-width: 870px)" href="styles/tabletbus.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<!--http://www.google.com/webfonts#ChoosePlace:select Example of Web Font Link-->
<!--<link rel="stylesheet" type="text/css" href="styles/mobilecore.css" media="(min-device-width: 0px) and (max-device-width: 764px)"/>
<link rel="stylesheet" type="text/css" href="styles/mobilebus.css" media="(min-device-width: 0px) and (max-device-width: 764px)"/> -->
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px)" href="styles/desktopcore.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px)" href="styles/desktopbus.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="styles/mobilecore.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="styles/mobilebus.css" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
<!--Jquery core-->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="gmap_funcs.js"></script>
<script type="text/javascript" src="gmap_funcsv3.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false®ion=GB"></script>
<script type="text/javascript" src="gmap_jscoord-1.1.1.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
<!--//
var userQry = '<%=Request("stopname")%>';
var rtSearchType = ""
function initPg(){
<%if LCase(Request("auto")) = "1" then%>
if (userQry.length <= 3){
getStopsGoByRoute(userQry);
} else {
getStopsGoByTxt(userQry);
document.getElementById('stoptxtquery').value = '<%=Request("stopname")%>';
}
<%end if%>
showMap();
}
var mapOpened = false;
var map;
var currMarker;
var geoCoder;
var startPt;
function showMap() {
var mapObj = document.getElementById('map-canvas');
mapObj.style.display = 'block';
document.getElementById('rt-results').style.display = 'none';
geoCoder = new google.maps.Geocoder();
startPt = new google.maps.LatLng(54.57019583004256,-1.3190460205078125);
var myOptions = {
zoom: 10,
center: startPt,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
map = new google.maps.Map(mapObj, myOptions);
google.maps.event.addListener(map, 'click', function(res){
en = LatLonWGS842OS_func(res.latLng.lat(), res.latLng.lng());
getStopsGoByCoord(parseInt(en.easting), parseInt(en.northing));
/*infowindow = new google.maps.InfoWindow({
content:"<div class='infowin'><div class='inner'><h3>aaaa</h3></div></div>",
position:startPt,
pixelOffset:new google.maps.Size(0,33)
});
infowindow.open(map)
infowindow.setContent("OOOO<br />aaaddad")*/
});
}
function resetMap(){
map.setCenter(startPt);
map.setZoom(10);
gmapDeleteOverlays();
deleteMarkers();
if (infowindow != undefined){
infowindow.close();
}
document.getElementById('foundstops').style.display="none";
}
function getStopsGoByTxt(qry){
document.getElementById('rt-results').style.display = 'none';
document.getElementById('fbloader').style.display="inline";
sendXmlHttpRequestGet("datanew/nextbuses/findstops.asp?stype=bytxt&qry="+qry,function(res){
//alert(res)
eval("stopsJson="+res);
rtSearchType = "text";
foundStops();
},"");
}
function getStopsGoByCoord(e,n){
document.getElementById('rt-results').style.display = 'none';
var ll = OS2LatLonWGS84_func(e, n);
ll = new google.maps.LatLng(ll.lat, ll.lng);
currMarker = gmapAddMarker({position: ll,title:'',map:map, icon:'images/arrow.png'});
document.getElementById('fbloader').style.display="inline";
sendXmlHttpRequestGet("datanew/nextbuses/findstops.asp?stype=bycoords&e="+e+"&n="+n,function(res){
//alert(res)
eval("stopsJson="+res);
rtSearchType = "map";
foundStops();
},"");
}
function gmapGeoCode(qry) {
geoCodeAddr(geoCoder,{'address':qry+", UK", 'region':"UK"}, gmapGeoCodeResults)
}
function gmapGeoCodeResults(res) {
en = LatLonWGS842OS_func(res.lat(), res.lng());
getStopsGoByCoord(en.easting,en.northing);
}
function selectAddress(addr,e,n){
getStopsGoByCoord(e,n);
document.getElementById('stoptxtquery').value = addr;
}
var stopsJson;
var stopMarkers = [];
function foundStops(){
document.getElementById('rt-results').innerHTML = "";
document.getElementById('rt-results').style.display = 'block';
document.getElementById('fbloader').style.display="none";
var selObj = document.getElementById('foundstops');
var ll;
selObj.style.display="block";
selObj.length = 0;
appendToSelectObj(selObj, " --- Select a stop --- ", "");
gmapDeleteOverlays();
deleteMarkers();
stopMarkers = [];
stopsTotal = 0;
if (stopsJson.stops.length < 1){
gmapGeoCode(document.getElementById("stoptxtquery").value);
}
var bounds = new google.maps.LatLngBounds();
for (i=0;i<stopsJson.stops.length;i++){
if (stopsJson.stops[i].town != ""){
stopsJson.stops[i].town = ", "+stopsJson.stops[i].town;
}
//stopsJson.stops[i].name = stopsJson.stops[i].name+", "+stopsJson.stops[i].dir+stopsJson.stops[i].town+" ("+stopsJson.stops[i].sms+")";
appendToSelectObj(selObj,stopsJson.stops[i].name , i);
ll = OS2LatLonWGS84_func(stopsJson.stops[i].e, stopsJson.stops[i].n);
ll = new google.maps.LatLng(ll.lat, ll.lng);
bounds.extend(ll);
map.fitBounds(bounds);
if (browserIE) {
marker = gmapAddMarker({position: ll, map:map, title:stopsJson.stops[i].name});
} else {
marker = gmapAddMarker({position: ll, map:map, title:stopsJson.stops[i].name, icon:'images/new/marker-bus.png'});
}
marker.atco = stopsJson.stops[i].atco;
marker.i = i;
stopMarkers.push(marker);
google.maps.event.addListener(marker, 'click', function(res){
selectStop(this.i, this.title)
});
stopsTotal++;
}
if (selObj.length > 1){
jqueryOrderSelectOpts("foundstops");
selObj[0].text = "--- Select a stop ("+stopsTotal+" stops found) ---"
if (stopsTotal <= 2){
selObj.selectedIndex = 1;
selectStop(stopMarkers[0].i, stopMarkers[0].title)
}
}
if (stopsTotal <= 0){
selObj.style.display="none";
document.getElementById('rt-results').innerHTML = '<div class="warning">No stop was found please select refine your search or select a point on the map</div>';
}
if (map.getZoom() > 15){
map.setZoom(15);
}
}
function deleteMarkers(){
for (i=0;i<stopMarkers.length;i++){
stopMarkers[i].setMap(null);
}
stopMarkers = [];
}
var infowindow;
var selectedI;
function selectStop(indexI, stopName){
selectedI = indexI
//alert(indexI+" ----- "+stopName+"\n"+stopsJson.stops[indexI].name)
var stopName = stopsJson.stops[indexI].name;
var smsCode = stopsJson.stops[indexI].sms;
$('#foundstops').val(indexI);
var mkr = null;
for (i=0;i<stopMarkers.length;i++){
if (stopMarkers[i].i == indexI){
mkr = stopMarkers[i]
}
}
if (infowindow != undefined){
infowindow.close();
}
infowindow = new google.maps.InfoWindow({
content: "<div class='infowin'><div class='inner'><h3>"+stopName+" </h3><div id='infowin-rtloader' class='realtimeresults'><img src='images/ajax-loader-facebook.gif' /> loading...</div></div></div>",
pixelOffset:new google.maps.Size(0,33)
});
if (mkr != null){
infowindow.open(map,mkr);
getNextBuses(stopsJson.stops[indexI].name, stopsJson.stops[indexI].atco, "", "", "infowin-rtresults", "infowin-rtloader", true);
}
}
var nextbusesNum = 5;
function searchKeyPress(e, func, params){
// look for window.event in case event isn't passed in
if (window.event) { e = window.event; }
if (e.keyCode == 13){
func(params);
return false; // disables submitting form, must have "return searchKeyPress" on the keypress event in textbox
}
}
//-->
</script>
<script type="text/javascript">
<!--//
// Hover navigation images for page:
var navImgHoverArr = ['images/button__myjourney.jpg','images/button__bus.jpg','images/button__rail.jpg','images/button__walk.jpg','images/button__cycle.jpg','images/button__air.jpg','images/button__drive.jpg','images/button__taxi.jpg'];
//-->
</script>
<title>Connect Tees Valley - Live Bus Information</title>
<!--Google Analytics Tracking Snippet - 15 November 2012-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11278574-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body onload="initNav();initPg()" class="realtime">
<section id="allContent">
<header id="topHeader">
<div id="headerContent">
<div id="connectLogo"></div>
<h1>Tees Valley Live Bus Information</h1>
<div id="connectModeLogo"></div>
</div>
</header>
<div id="modeBand"></div>
<section id="mainSection">
<h2>To get departure information from any bus stop in the Tees Valley area<br />please either search for a stop by text search or select a point on the map.</h2>
<article id="busLive">
<input type="text" name="stoptxtquery" id="stoptxtquery" style="width:auto" class="txtgray" onkeyup="searchKeyPress(event, getStopsGoByTxt, document.getElementById('stoptxtquery').value)" value="Stop name, street name, postcode or SMS code" onclick="javascript:if (this.value == 'Stop name, street name, postcode or SMS code'){this.value=''}" />
<input type="submit" id="realSearch" aclass="but" value="Search" align="absmiddle" onclick="getStopsGoByTxt(document.getElementById('stoptxtquery').value)" />
reset
<!--//<label> or </label>
<input type="button" class="but" value="Show map" onclick="showMap()" />//-->
<img src="images/ajax-loader-facebook.gif" id="fbloader" style="display:none" />
<select name="foundstops" id="foundstops" style="display:none" onchange="selectStop(this.value, $('#foundstops option:selected').text())"></select>
<div id="map-canvas" ></div>
<div id="rt-results"></div>
</article>
<article id="infowin">
</article>
</section>
<!--Close Main Section-->
<!--Document Footer-->
<div id="modeBand"></div>
<section id="journeyPlanner">
<form id="jpform" method="post" action="http://www.connectteesvalley.com/jplanner1.asp">
<h2>Connect Journey Planner</h2>
<input type="text" id="jpFrom" name="addrfrom" placeholder="I'm leaving from..." tabindex="1"/>
<input type="text" id="jpTo" name="addrto" placeholder="I'm travelling to..." tabindex="2"/>
<input type="submit" id="jpGo" value="Go" tabindex="3"/>
<br class="clearboth" />
</form>
</section>
<section id="homeSection">
<nav id="mainNavigation">
<ul>
<li id="busButton">Bus</li>
<li id="trainButton">Train</li>
<li id="walkButton">Walk</li>
<li id="cycleButton">Cycle</li>
<li id="driveButton">Drive</li>
<li id="flyButton">Fly</li>
<li id="taxiButton">Taxi</li>
</ul>
</nav>
</section>
<section id="socialSection">
<div id="youtubeLogo"></div>
<div id="twitterLogo"></div>
<div id="facebookLogo"></div>
<h3>Let's journey together</h3>
</section>
<div class="homeBand"></div>
</section>
</body>
</html>
You cannot open an infowindow inside an <article>-element, but you can easily copy the content from the infoWindow to that element.
var article = document.getElementById('infowin'); // <-- get <article id="infowin">
article.innerHTML=infoWindow.getContent();
Sorry to say, I gave up to find the logic in the 347 lines of code in the question. So I dont know exactly where in the code you want it to happend.
You may could take advantage of the content_changed event to track when the content for the infoWindow is changed.
google.maps.event.addListener(infoWindow, 'content_changed', function() {
var article = document.getElementById('infowin');
article.innerHTML=infoWindow.getContent();
});
So whenever the content of the infowindow changes, <article> is updated.
Related
total noob here.
I am pushing radiation values every 5 minutes into a Firebase database and I am looking for a simple way to create a live line graph, which also shows all the data of the last 24 hours.
I managed to create a graph which updates live, but it does not show past data. I have no idea how to accomplish this. I really hope someone can help me.
Here's my java script controller.js:
$(document).ready(function() {
var gammaArray = [];
var tArray = [];
var sessionArray = [];
var currGamma = '';
var dataRef = new Firebase('https://xxx.firebaseio.com/readings');
dataRef.on('value', function(snapshot) {
var t = snapshot.val();
var count = 0;
for (var key in t) {
if (t.hasOwnProperty(key)) {
var dt = [];
dt[0] = count;
dt[1] = parseFloat(t[key]);
gammaArray = [];
gammaArray.push(dt);
tArray = [];
tArray.push(dt[1]);
count++;
}
}
sessionArray.push(gammaArray[0])
//console.log(gammaArray)
$.plot($("#chart1"), [ sessionArray ]);
currGamma = gammaArray[0][1].toString();
$('#gammaMsg').show();
$("#currGamma").text(currGamma);
});
});
And here's my html:
<html>
<head>
<script type='text/javascript' src='https://cdn.firebase.com/js/client/1.0.6/firebase.js'></script>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<script src="controller.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body>
<div style="width:800px; margin:0 auto;">
<div><h1 id='gammaMsg' style='display:none;width:550px; margin:0 auto;margin-top: 50px;'>Current radiation: <span id="currGamma"></span> mSv</h1></div>
<div id="chart1" style="width:600px;height:300px;"></div>
</div>
</body>
In below ExamppleController function a value is entered into message variable local storage. For the first time value is getting stored but when entered again value is not getting stored. When browser cache is cleared then value is stored again and second time no value is getting stored.
Mystorage.html
<html>
<head>
<script src="angular.min.js"></script>
<script src="ngStorage.min.js"></script>
<script>
var example = angular.module("example", ["ngStorage"]);
example.controller("ExampleController", function($scope,$rootScope,$window,$localStorage,$location) {
$scope.save = function() {
$rootScope.newq=$scope.name;
$scope.$apply();
**$localStorage.message = $scope.name;**
console.debug($localStorage.message);
$window.location.href = 'nextstorage.html';
}
});
</script>
</head>
<body ng-app="example">
<div ng-controller="ExampleController">
<input type="text" ng-model="name"/>
<button ng-click="save()">Save</button>
<br>
{{data}}
</div>
</body>
</html>
NextStorage.html
<html>
<head>
<script src="angular.min.js"></script>
<script src="ngStorage.min.js"></script>
<script>
var example = angular.module("example", ["ngStorage"]);
example.controller("ExampleController", function($scope,$window,$localStorage,$location) {
$scope.data1 = $localStorage.message;
});
</script>
</head>
<body ng-app="example">
<div ng-controller="ExampleController">
<span>{{data1}}</span>
</div>
</body>
</html>
You should really be doing things the AngularJS way. I think this is where the disconnect happens.
See the following code:
<html>
<head>
<script src="angular.min.js"></script>
<script src="ngStorage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script>
var example = angular.module("example", ["ngStorage", "ui.router"]);
example.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('1', {
url: '/1',
templateUrl: 'templates/1.html',
controller: 'FirstController'
})
.state('2', {
url: '/2',
templateUrl: 'templates/2.html',
controller: 'SecondController'
});
$urlRouterProvider.otherwise('/1');
});
example.controller("FirstController", function($scope,$localStorage,$location) {
$scope.save = function() {
$localStorage.message = $scope.name;
$location.path("/2");
}
});
example.controller("SecondController", function($scope,$localStorage,$location) {
$scope.data1 = $localStorage.message;
});
</script>
</head>
<body ng-app="example">
<div ui-view></div>
<script id="templates/1.html" type="text/ng-template">
<div>
<input type="text" ng-model="name"/>
<button ng-click="save()">Save</button>
<br>
</div>
</script>
<script id="templates/2.html" type="text/ng-template">
<div>
<span>{{data1}}</span>
</div>
</script>
</body>
</html>
You'll notice I'm using routes and navigating between them using the $location provider. The $localStorage works fine when doing it this way.
Read up on the ui-router or ngRoute.
Regards,
Hi iam trying to put buttons in the infowindow and when i click the button some action should takeplace atleast an alert.below is my code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(12.98,77.59),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var infoWindow = new google.maps.InfoWindow();
(function() {
var marker = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(12.98,77.59)
});
var content = "<div id='tabs'>"+
"<form id='button'>"+
"<div>"+
"<input type='button' onclick='alert(infoWindow)'>"+
"</div>"+
"</form>"+
"</div>";
google.maps.event.addListener(marker, 'click', function(event) {
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
})();
};
</script>
</head>
<body onload="initialize()">
<div id="map" style="width:400px; height:300px"></div>
</body>
</html>
here i can add the button but not able to make it work..Any help would be appreciated
you pass the value in the alert() as variable not as string. You need to pass this within single or double quote
var content = "<div id='tabs'>"+
"<form id='button'>"+
"<div>"+
"<input type='button' onclick='alert(\"infoWindow\")'>"+ // here
"</div>"+
"</form>"+
"</div>";
now try with this.
If you want to get more out of InfoWindows and put HTML content in them I would recommend trying InfoBox. Check out the reference here
It has some of the additional things like closing the window build in.
while i tried to validate my php file (write in xhtml and php), I got 2 errors that I can't solve :S the error is:
1 - end tag for "body" omitted, but OMITTAG NO was specified
2 - end tag for "html" omitted, but OMITTAG NO was specified
Here I paste the code of my file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<?php
require 'include/config.php';
connection();
if(isset($_COOKIE['COOKIE_CHECK']) === FALSE) {
setcookie('COOKIE_CHECK', 'ENABLED', time() + 31536000);
header('Location: index.php');
}
?>
<title>Nome da definire - Homepage</title>
<link rel="shortcut icon" href="themes/<?php echo $home_theme; ?>/images/homepage/favicon/favicon.ico" />
<!-- CSS DELLA PAGINA E PLUGIN -->
<link rel="stylesheet" type="text/css" href="themes/<?php echo $home_theme; ?>/css/index.css" title="index" />
<link rel="stylesheet" type="text/css" href="themes/<?php echo $home_theme; ?>/css/news.css" title="index" />
<!-- PLUGIN JQUERY -->
<script src="include/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<!--SCRIPT BROWSER AGGIORNATO
<script type='text/javascript'>
var ba = document.createElement('script');
ba.type = 'text/javascript';
ba.async = true;
ba.src = 'http://www.browseraggiornato.it/browser-updated.js?t=a&p=tl';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ba, s);
</script>-->
<!-- SCRIPT PULSANTI -->
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
jQuery("ul#menu span").css("opacity","0");
jQuery("ul#menu span").hover(function () {
jQuery(this).stop().animate({
opacity: 1
}, 'slow');
},
function () {
jQuery(this).stop().animate({
opacity: 0
}, 'slow');
});
});
</script>
<!-- SCRIPT NEWS -->
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
var ticker = function() {
setTimeout(function() {
jQuery('#ticker li:first').animate({
marginTop: '-100px'
}, 800, function() {
jQuery(this).detach().appendTo('ul#ticker').removeAttr('style');
});
ticker();
}, 4000);
};
ticker();
});
</script>
<?php
$login_error = '';
if(isset($_GET['login_error']) === TRUE && $_GET['login_error'] != '') {
if($_GET['login_error'] == 'usrpss') {
$login_error .= ' alert(\'Devi inserire username e password per poter effettuare il login!\');';
} else if($_GET['login_error'] == 'wrong') {
$login_error .= ' alert(\'Hai inserito dei dati errati oppure il tuo account non รจ ancora stato attivato!\');';
}
}
?>
</head>
<body<?php if($login_error != '') { echo ' onload="' . $login_error . '"'; } ?>>
<?php
if(isset($home_theme) === TRUE && $home_theme != '') {
if(check_directory('themes/' . $home_theme . '') === TRUE) {
if(check_file($path . '/index.php') === TRUE) {
require $path . '/index.php';
} else {
echo 'Il file dell\'index per questo tema non esiste';
}
} else {
echo 'La cartella del tema selezionato non esiste';
}
}
connection_close();
?>
</body>
</html>
please help me :( thank you
Am playing with Google Maps V3 API and StyledMarkers. The data is derived from a PHP/MySQL query returning several hundred points.
The code below returns everything I need and works fine EXCEPT for getting it to zoom to an approriate level (which in this case I know is 10).
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title><?php echo returnval("event_name","events",$_GET['eid']); ?> Map - No Refresh</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="StyledMarker.js"></script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(<?php echo $evlat; ?>, <?php echo $evlng; ?>);
var bounds = new google.maps.LatLngBounds();
var myOptions = {
zoom: 9,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("show_map"), myOptions);
<?php
$iconcntr = 0;
while ($row = mysql_fetch_array($result)) {
$iconcntr ++;
$rfa_no = $row['rfa_no'];
$longitude = $row['longitude'];
$latitude = $row['latitude'];
if ($row['rfa_priority'] == 1) {
$iconclr = "FF0000";
} elseif ($row['rfa_priority'] == 2) {
$iconclr = "FFFF00";
} else {
$iconclr = "FFFFFF";
}
?>
var varLatLng = new google.maps.LatLng(<?php echo $latitude; ?>,<?php echo $longitude; ?>);
bounds.extend(varLatLng);
var styleMaker<?php echo $iconcntr; ?> = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.BUBBLE,{color:"<?php echo $iconclr; ?>",text:"<?php echo $rfa_no; ?>"}),position:new google.maps.LatLng('<?php echo $latitude; ?>', '<?php echo $longitude; ?>'),flat:true,zIndex:<?php echo ($iconcntr+1000); ?>,map:map});
<?php
}
?>
map.fitbounds(bounds);
}
</script>
</head />
<body style="margin:0px; padding:0px;" onload="initialize()" />
<div id="show_map" style="width:100%; height:100%;"></div>
</body>
</html>
Anyone have any idea what I'm doing wrong? Not very strong in the programming department.
JavaScript is case-sensitive.
Use map.fitBounds(bounds) instead of map.fitbounds(bounds). Documentation
You should have seen an error in the Javascript Console about fitbounds not being a valid method or something similar.