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.
Related
I literally just copy and paste the example code from the API documentation (link: https://developer.here.com/cn/documentation/maps/hls-chn/topics/quick-start.html)
and I put in my own app_id and app_code into the appropriate lines (for obvious reasons I cannot disclose my api key and code; sorry).
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script src="https://js.hereapi.cn/v3/3.0/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.hereapi.cn/v3/3.0/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div style="width: 640px; height: 480px" id="mapContainer"></div>
<script>
// Initialize the platform object:
var platform = new H.service.Platform({
'app_id': '{YOUR_APP_ID}',
'app_code': '{YOUR_APP_CODE}'
});
// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.normal.map,
{
zoom: 10,
center: { lng: 13.4, lat: 52.51 }
});
</script>
</body>
</html>
However, the browser reported the following errors: screenshot of errors in console:
This is what the webpage looks like: the map does not display
The errors are confusing because the code snippet was not written by me, but directly copied from HERE Map's developer documentation. Your help is much appreciated. Thank you.
If you are using freemium plan then probably you should follow this documentation-
https://developer.here.com/documentation/maps/3.1.17.0/dev_guide/topics/get-started.html
and the below code-
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div style="width: 640px; height: 480px" id="mapContainer"></div>
<script>
// Initialize the platform object:
var platform = new H.service.Platform({
'apikey': 'Your_api_key'
});
// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.vector.normal.map,
{
zoom: 10,
center: { lng: 13.4, lat: 52.51 }
});
</script>
</body>
</html>
I want to parse a simple marker from a KML so i have been making some tests with geoxml3, everything goes perfect if I use (import) the 'polys/geoxml3.js' library, but if I change it to 'kmz/geoxml3.js' (because later I want to use some extendedData) I get this error 'Cannot read property 'setAnimation' of undefined' . How can I solve it but using the 'kmz/geoxml3.js' library?
<!DOCTYPE html>
<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>Geoxml3</title>
<style>
html{height:100%;}
body{height:100%;margin:0px;}
#map_canvas{height: 90%;width: 90%;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/kmz/geoxml3.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map_canvas"></div>
</div>
<script type="text/javascript">
var geoXml=null, map=null;
var infowindow = new google.maps.InfoWindow({});
function initialize() {
var myOptions = {
center: new google.maps.LatLng(39.397, -100.644),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geoXml = new geoXML3.parser({
map: map,
zoom: true,
createMarker: addMyMarker,
singleInfoWindow: true,
suppressInfoWindows: true
});
geoXml.parse('exampleMarker.kml');
function addMyMarker(placemark,doc) {
var marker = geoXml.createMarker(placemark);
marker.setAnimation(google.maps.Animation.BOUNCE);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(placemark.description);
infowindow.open(map,marker);
});
doc.markers.push(marker);
return marker;
};
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
My KML file is:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.1">
<Document>
<name>Chicago Bike Parking</name>
<description>A map of 20 bike parking.</description>
<Style id='bikeParkingIcon'>
<IconStyle>
<color>ffffffff</color>
<colorMode>normal</colorMode>
<scale>1.0</scale>
<Icon id='bikeParking'>
<href>icono.png
</href>
</Icon>
</IconStyle>
</Style>
<Placemark>
<name>2024 S Western</name>
<address>2024 S Western Ave, Chicago, IL 60608</address>
<phoneNumber></phoneNumber>
<description>1 bike rack installed here. <a href='http://www.chicagobikes.org/bikeparking/rackinfo.php?id=2' title='More info about this Bike Rack location'>More info</a>.</description>
<visibility>1</visibility>
<styleUrl>#bikeParkingIcon</styleUrl>
<Point>
<coordinates>-87.685871,41.854533,1000</coordinates>
</Point>
<TimeStamp><when>2009-07-24</when>
</TimeStamp>
<ExtendedData xmlns:cdot="http://www.chicagobikes.org/data">
<cdot:locName>Salvation Army</cdot:locName>
<exampleTag>My data</exampleTag>
</ExtendedData>
</Placemark>
</Document>
</kml>
So far this is my solution using a 'custom' createMarker function, this way you can use and define your own marker properties/options.
geoXml = new geoXML3.parser({
map: map,
zoom: true,
createMarker: addMyMarker,
singleInfoWindow: true,
suppressInfoWindows: true,
afterParse: useTheData
});
geoXml.parse('exampleMarker.kml');
function addMyMarker(placemark,doc) {
var marker = new google.maps.Marker({
title: placemark.name,
position: placemark.latlng,
map: map,
//This case href is the tag in my KML
icon: placemark.style.icon.href
});
google.maps.event.addListener(marker, 'click', function() {
marker.setAnimation(google.maps.Animation.BOUNCE);
infowindow.setContent(placemark.description);
infowindow.open(map,marker);
});
//doc.markers.push(marker);
return marker;
};
function useTheData(doc){
$.each(doc[0].placemarks, function(index, value) {
//Something
});
};
in your description tag i noticed have an html anchor tag but is not being read as html
<description>1 bike rack installed here. <a href='http://www.chicagobikes.org/bikeparking/rackinfo.php?id=2' title='More info about this Bike Rack location'>More info</a>.</description>
you can encapsulate it inside so it should look like this
<description><![CDATA[1 bike rack installed here. <a href='http://www.chicagobikes.org/bikeparking/rackinfo.php?id=2' title='More info about this Bike Rack location'>More info</a>.]]></description>
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.
I'm trying to create a map of Stockholm subway on Google maps.
I have created a KML file to the blue line http://tourist-sweden.se/transport/map/sthlm/t-11-bana.kml
I call this file with this JavaScript code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Map of Stockholm's subway: line Nr.T-11 "Akalla - Kungsträdgården"</title>
<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var subwayblue = new google.maps.LatLng(18.032405,59.334372);
var mapOptions = {
zoom: 10,
center: subwayblue,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://tourist-sweden.se/transport/map/sthlm/t-11-bana.kml'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
But not showing the path between the stations. What is my fault?
Your polyline doesn't have a valid color:
http://feedvalidator.org/check.cgi?url=http%3A%2F%2Ftourist-sweden.se%2Ftransport%2Fmap%2Fsthlm%2Ft-11-bana.kml
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.