In my iOS app i want to display traffic information which is provided by google maps not by MKMapView..So i m using google maps api v3 but loading google maps api v3 maps in UIWebView causes memory leak.Specially when we zoom the Map and Click on satellite button.
Code --
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100%;}
#route_table { height: 0%;}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
var arrayInput = [];
var trafficLayer;
var map;
var markers = [];
var bounds;
var zoomWidth;
var alertBOOL;
function initialize() {
var txt = new String(%#);
arrayInput = txt.split(',');
//var latlng = new google.maps.LatLng(parseFloat(arrayInput[0]),parseFloat(arrayInput[1]));
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 5,
center: latlng,
disableDefaultUI:true,
streetViewControl:false,
backgroundColor: '#FFFFF',
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
directionsDisplay.setMap(this.map);
directionsDisplay.suppressInfoWindows = true;
addTrafficButton();
addSatelliteButton();
calcRoute(arrayInput);
}
function calcRoute(inputArray) {
var i=0;
var wps = [];
var start;
var end;
var i = 0;
var j=0;
for(i=0;i<arrayInput.length-1;i=i+2)
{
if(i==0)
{
start = new google.maps.LatLng(parseFloat(arrayInput[i]),arrayInput[i+1]);
this.map.center = start;
}
else if(i==(arrayInput.length-2))
{
end = new google.maps.LatLng(parseFloat(arrayInput[i]),arrayInput[i+1]);
}
else
{
wps[j] = { location: new google.maps.LatLng(parseFloat(arrayInput[i]),arrayInput[i+1]) };
j++;
}
}
bounds = new google.maps.LatLngBounds(start,end);
this.map.fitBounds(bounds);
var request =
{
origin:start,
destination:end,
waypoints: wps,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(result, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(result);
}
});
}
function addTrafficButton()
{
var tbutton = document.createElement("button");
tbutton.innerHTML = "Traffic On";
tbutton.style.position = "absolute";
tbutton.style.bottom = "50px";
tbutton.style.right = "15px";
tbutton.style.zIndex = 10;
tbutton.style.width = "70px";
tbutton.style.height = "30px";
this.map.getDiv().appendChild(tbutton);
tbutton.className = "lolight";
tbutton.onclick = function() {
if (tbutton.className == "hilight") {
tbutton.innerHTML = "Traffic On";
this.trafficLayer.setMap(null);
this.trafficLayer = null;
tbutton.className = "lolight";
} else {
tbutton.innerHTML = "Traffic Off";
this.trafficLayer = new google.maps.TrafficLayer();
this.trafficLayer.setMap(this.map);
tbutton.className = "hilight";
}
}
}
function addSatelliteButton()
{
var sbutton = document.createElement("button");
sbutton.innerHTML = "Satellite";
sbutton.style.position = "absolute";
sbutton.style.bottom = "90px";
sbutton.style.right = "15px";
sbutton.style.zIndex = 10;
sbutton.style.width = "70px";
sbutton.style.height = "30px";
this.map.getDiv().appendChild(sbutton);
sbutton.className = "lolight";
sbutton.onclick = function() {
if (sbutton.className == "hilight") {
sbutton.innerHTML = "Satellite";
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
sbutton.className = "lolight";
} else {
sbutton.innerHTML = "Map";
sbutton.className = "hilight";
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
}
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</body>
</html>
i think your issue can be solved using ARC into ios 5 .. it is best feature add by apple to into ios 5. it holds whole memory management into your app. Go with ARC it helps you lot.
Related
Making a voice recorder visualizer and I'm just about finished but there's one thing, After I stop the recording, the values in mic.getLevel() do not go back to 0 but instead it seems like the last value that was recorded in mic.getLeve() is stored permanently and added to the height of my ellipse so the ellipse would then have a height of some value rather than 0 which it started with, is there anyway to fix this?
var recordAudio;
function setup() {
createCanvas(windowWidth, windowHeight);
recordAudio = new AudioFile()
}
function draw() {
background(0);
recordAudio.draw();
recordAudio.setup();
recordAudio.drawBorder();
recordAudio.drawNode();
}
function AudioFile() {
this.nodes = [];
var speed = 2;
var endBorder;
var mic = new p5.AudioIn();
var micLevel;
var level;
var recorder = new p5.SoundRecorder();
var soundFile = new p5.SoundFile();
var button = createButton('Start Recording');
var state = 0;
this.draw = function() {
background(0);
level = mic.getLevel();
micLevel = floor(map(level, 0, 0.6545, 0, 50));
}
this.drawNode = function() {
if (frameCount % 5 == 0) {
this.addNode()
}
for (var i = 0; i < this.nodes.length; i++) {
var node = this.nodes[i]
for (var j = 0; j < node.length; j++) {
fill(255);
node[j].x -= speed;
ellipse(node[j].x, node[j].y, node[j].width, node[j].height)
}
if (node[0].x < endBorder) {
this.nodes.splice(i, 1);
}
}
}
this.drawBorder = function() {
var x = windowWidth / 9;
var y = windowHeight / 10;
var width = (windowWidth / 9) * 7;
var height = windowHeight - y * 2;
stroke(255);
strokeWeight(2);
noFill();
rect(x, y, width, height);
}
this.addNode = function() {
this.nodes.push(
[{
x: ((windowWidth / 9) * 8) - 10,
y: windowHeight / 2,
width: 5,
height: 5 * micLevel
}])
}
this.setup = function() {
endBorder = windowWidth / 9 + 5;
mic.start();
recorder.setInput(mic);
button.position(windowWidth / 9, windowHeight / 10);
button.style('font-size', '18px');
button.mousePressed(this.recording)
}
this.recording = function() {
if (state === 0 && mic.enabled) {
button.html("Stop Recording");
getAudioContext().resume()
recorder.record(soundFile);
state++
} else if (state === 1) {
button.html("Start Recording");
getAudioContext().suspend();
recorder.stop();
state++;
} else if (state === 2) {
save(soundFile, 'Sound.wav');
state = 0;
}
}
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<script src="p5.min.js"></script>
<script src="p5.dom.js"></script>
<script src="p5.sound.js"></script>
<script src="sketch.js"></script>
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<style>
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="Button">
</div>
</body>
</html>
I ended up making a global variable called listening and used that in an if statement in draw to set the level to either mic.getLevel() or 0 based on if listening is true or false.
<!DOCTYPE html>
<html>
<head>
<title>SPIA positions</title>
<style type="text/css">
html,
body,
#basicMap {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<script src="OpenStreetMaps/OpenLayers.js"></script>
<script>
function init() {
map = new OpenLayers.Map("basicMap");
var mapnik = new OpenLayers.Layer.OSM();
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position1 = new OpenLayers.LonLat(29.856919813673, 30.6698231962015).transform(fromProjection, toProjection);
//this initial size of the popup appears to be infinite in one dimension
var popup1 = new OpenLayers.Popup("popup1", position1, new OpenLayers.Size("20121210_5"), "20121210_6", false);
var position2 = new OpenLayers.LonLat(29.8555655833635, 30.6691027291649).transform(fromProjection, toProjection);
var popup2 = new OpenLayers.Popup("popup2", position2, new OpenLayers.Size(100, 20), "20121210_7", false);
var position3 = new OpenLayers.LonLat(29.8536289031314, 30.6680431519365).transform(fromProjection, toProjection);
var popup3 = new OpenLayers.Popup("popup3", position3, new OpenLayers.Size(50, 20), "20121210_8", false);
var CenterPosition = new OpenLayers.LonLat(29.8513532832137, 30.6614234181425).transform(fromProjection, toProjection);
var zoom = 16;
map.addLayer(mapnik);
map.setCenter(CenterPosition, zoom);
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
Marker1 = new OpenLayers.Marker(position1);
Marker1.icon.imageDiv.title = "20121210_6";
markers.addMarker(Marker1);
popup1.updatesize;
map.addPopup(popup1);
Marker2 = new OpenLayers.Marker(position2);
Marker2.icon.imageDiv.title = "20121210_7";
markers.addMarker(Marker2);
popup2.setContentHTML("20121210_5");
//popup2.setSize("20121210_5");
//popup2.autosize =true;
//popup2.maxSize = new OpenLayers.Size(100,20);
popup2.maxSize = new OpenLayers.Size(100, 20);
popup2.setSize(new OpenLayers.Size('20121210_5));
//popup2.updatesize;
//popup2.maxSize = new OpenLayers.Size(100,20);
map.addPopup(popup2); Marker3 = new OpenLayers.Marker(position3); Marker3.icon.imageDiv.title = "20121210_8"; markers.addMarker(Marker3); popup3.autosize = true; popup3.updatesize; map.addPopup(popup3);
}
</script>
</head>
<body onload="init();">
<div id="basicMap"></div>
</body>
</html>
Wrapping the text worked for me:
var popup2 = new OpenLayers.Popup("popup2",position2,new OpenLayers.Size('<div class="ol-popup"><p>20121210_5<\/p><\/div>'),"20121210_7",false);
All my requirement is to load daeja docviewer in html and running it using jsp file in jboss server
I have tried to load/configure IBM Daeja ViewONE using Html.I have included necessary jars and license files but it is not loading. Please help in resolving this and check i need to add/remove any thing to get this running
Jars added
Html :
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script language="javascript" type="text/javascript" src="viewone.js"></script>
<title>User Data</title>
</head>
<body>
<div>
<Object class="com.ibm.dv.client.Viewer" id="viewone" width="100%" height="100%" name="viewone">
<param name="trace" value="true">
<param name="tracenet" value="true">
<param name="tracefilter" value="true">
</Object>
</div>
</body>
</html>
``
viewone.js
function ViewOneBootstrap() { alert('1ds1');
this.logMessages = new Array();
this.debugMessages = new Array();
this.clientids = new Array();
this.codebase = null;
this.lastFocussed = null;
this.objectTag = "com.ibm.dv.client.Viewer";
this.instanceId = 1;
//document content clipboard
this.clipboard = new ViewOneClipboard();
this.getInstanceId = function() {
return "" + this.instanceId++;
}
this.addMessage = function(message) {
this.logMessages.push(message);
this.log(message)
};
this.clearMessages = function() {
this.logMessages = new Array();
};
this.log = function(message) {
if (this.debugMessages.length >= 100)
this.debugMessages.shift();
this.debugMessages.push(message);
if (window.console) {
if (window.console.debug)
window.console.debug(message);
else if (window.console.log)
window.console.log(message);
}
};
this.getHead = function() {
var headElem = null;
var oHead = document.getElementsByTagName('head');
if (oHead == null || oHead.length == 0) {
headElem = document.createElement();
document.appendChild(headElem);
} else {
headElem = oHead[0];
}
return headElem;
};
this.includeJS = function(sId, fileUrl, source) {
viewoneLoader.addMessage("Attaching script " + sId
+ (source == null ? "" : (" length=" + source.length)));
if ((source != null) && (!document.getElementById(sId))) {
var oHead = viewoneLoader.getHead();
var oScript = document.createElement("script");
oScript.type = "text/javascript";
oScript.id = sId;
oScript.defer = "true";
if (source == null) {
oScript.src = fileUrl;
} else {
oScript.text = source;
}
viewoneLoader.getHead().appendChild(oScript);
viewoneLoader.addMessage("Script attached");
}
};
var addMessage = this.addMessage;
this.addMessage('ViewOneBootstrap:init<>');
this.showMessages = function() {
var messages = "";
for (var i = 0; i < this.logMessages.length; i++) {
messages += this.logMessages[i];
messages += "\n";
}
alert(messages);
};
this.getHttpRequest = function() {
if (window.XMLHttpRequest)
return new XMLHttpRequest();
if (window.ActiveXObject)
return new ActiveXObject("MsXml2.XmlHttp");
};
this.loadScript = function(sId, url, postData) {
this.codebase = url;
this.postData = postData;
this.addMessage('ViewOneBootstrap.loadScript: ' + url);
var oXmlHttp = this.getHttpRequest();
var scriptLoad = this.includeJS;
var loadFailed = this.loadError;
oXmlHttp.onreadystatechange = function() {
if (oXmlHttp.readyState == 4) {
if (oXmlHttp.status == 200 || oXmlHttp.status == 304) {
viewoneLoader.addMessage("Script downloaded");
scriptLoad(sId, url, oXmlHttp.responseText);
} else {
var isCrossDomain = true;
if (url.indexOf("http://") != 0 && url.indexOf("https://") != 0)
isCrossDomain = false;
// Can't be cross domain unless the URL starts http: or https:
else if (url.indexOf("https:") == 0 && window.location.protocol != "https:")
isCrossDomain = false;
else if (url.indexOf("http:") == 0 && window.location.protocol != "http:")
isCrossDomain = false;
else {
var url2 = url.replace(/^https?:\/\//, "");
var match = url2.match(/^[^\/]+/);
if (match) {
var domain = match[0];
if (window.location.host == domain)
isCrossDomain = false;
}
}
if (isCrossDomain && oXmlHttp.status == 0) {
loadFailed("Cannot load ViewONE.\n"
+ "Likely reasons include:\n"
+ "- Cross domain resource loading is not supported by this browser\n"
+ "- Cross domain resource loading is not configured correctly on the server\n"
+ "- There was a temporary network issue when loading ViewONE\n"
+ "- This web browser has incorrectly cached some data (please empty the cache)");
} else {alert('error 2');
viewoneLoader.addMessage('XML request error: '
+ oXmlHttp.statusText + ' (' + oXmlHttp.status
+ ')');
viewoneLoader.showMessages();
}
}
}
};
oXmlHttp.open('GET', url, true);
if (oXmlHttp.setRequestHeader)
oXmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
oXmlHttp.send(null);
};
this.includeJS = function(sId, fileUrl, source) {
viewoneLoader.addMessage("Attaching script " + sId
+ (source == null ? "" : (" length=" + source.length)));
if (!(source == null && fileUrl == null)
&& (!document.getElementById(sId))) {
var oHead = viewoneLoader.getHead();
var oScript = document.createElement("script");
oScript.type = "text/javascript";
oScript.id = sId;
oScript.defer = "true";
if (source == null) {
oScript.src = fileUrl;
} else {
oScript.text = source;
}
oHead.appendChild(oScript);
viewoneLoader.addMessage("Script attached");
}
};
this.addMetaTag = function(name, content) {
this.addMessage('ViewOneBootstrap.addMetaTag');
var oHead = this.getHead();
var mTag = document.createElement("meta");
mTag.name = name;
mTag.content = content;
oHead.appendChild(mTag);
};
this.loadCompleted = function() {
this.addMessage("ViewOneBootstrap.loadCompleted: viewer ready to start");
if (window.notifyViewONECodeInit)
{
window.notifyViewONECodeInit();
}
};
this.loadError = function(message) {
addMessage(message);
if (window.deinitPercentage) {
window.deinitPercentage();
addMessage("Percentage display removed");
}
if (window.showViewoneLoadError)
window.showViewoneLoadError(message);
else
alert(message);
}
}
function ViewOneClipboard() {
this.content = null;
this.putContent = function(jsonBlob)
{
//viewoneLoader.log("added to clipboard: " + jsonBlob);
this.content = jsonBlob;
}
this.getContent = function()
{
//viewoneLoader.log("retrieved from clipboard: "+ this.content);
return this.content;
}
}
var viewoneLoader = new ViewOneBootstrap();
//viewoneLoader.addMetaTag('viewone_ajax::gwt:property', 'baseUrl=filenet/v1files/?v=9001&op=resource&file=');
//viewoneLoader.loadScript('viewoneLoader', 'filenet/v1files/?v=9001&op=resource&file=viewone.cache.js', '');
viewoneLoader.com_viewone_instance = '1';
viewoneLoader.com_viewone_instancel = {"start":"","end":"","num":"", "modInf": [{"type":"2"}, {"type":"3"}, {"type":"4"}, {"type":"5"}, {"type":"6"}, {"type":"8"}, {"type":"G"}, {"type":"I"}, {"type":"M"}],"trial":false,"company":"","country":"","support":false,"contact":"","rProduct":"","rCompany":"","rEmail":"","rSite":"","rAllowIgnorePro":false,"testBuild":false,"legacyFeatures":false};
viewoneLoader.loadingMessage = 'IBM Daeja ViewONE Virtual 5.0.3';
viewoneLoader.version = "9001";
viewoneLoader.displayversion = "5.0.3";
viewoneLoader.fulldisplayversion = "5.0.3 iFix 1";
viewoneLoader.acceptLanguages = ["en-US","en"];
If you remove DIV tags around Daeja object, the page will get loaded.
If you want to keep the DIV, you need to change width and height value from percentage to absolute px value. Otherwise it won't work. Don't know why and really don't like the way it is.
I am using a custom menu extension from Magento. I have one issue. There is a popup dropdown box that appears on the menu. When I use firebug to trace the coding I find this:
<div id="popup6" class="wp-custom-menu-popup" onmouseover="wpPopupOver(this, event, 'popup6', 'menu6')" onmouseout="wpHideMenuPopup(this, event, 'popup6', 'menu6')" style="display: none; top: 20px; left: 20px; z-index: 10000;">
I cannot find this code any where in the files from the extension so I tracked down this:
<script type="text/javascript">
//<![CDATA[
var CUSTOMMENU_POPUP_WIDTH = <?php echo Mage::getStoreConfig('custom_menu/popup/width') + 0; ?>;
var CUSTOMMENU_POPUP_TOP_OFFSET = <?php echo Mage::getStoreConfig('custom_menu/popup/top_offset') + 0; ?>;
var CUSTOMMENU_POPUP_DELAY_BEFORE_DISPLAYING = <?php echo Mage::getStoreConfig('custom_menu/popup/delay_displaying') + 0; ?>;
var CUSTOMMENU_POPUP_DELAY_BEFORE_HIDING = <?php echo Mage::getStoreConfig('custom_menu/popup/delay_hiding') + 0; ?>;
var CUSTOMMENU_RTL_MODE = <?php echo $_rtl; ?>;
var wpCustommenuTimerShow = {};
var wpCustommenuTimerHide = {};
//]]>
I need to change the top:20px where should I look for this? Its not in the js file and not in the css file... Cannot find it anywhere. Any ideas? I am a beginer! From my understanding it would have to be the JS file, I am not sure how to read it. JS is here:
function wpShowMenuPopup(objMenu, popupId)
{
if (typeof wpCustommenuTimerHide[popupId] != 'undefined') clearTimeout(wpCustommenuTimerHide[popupId]);
objMenu = $(objMenu.id); var popup = $(popupId); if (!popup) return;
wpCustommenuTimerShow[popupId] = setTimeout(function() {
popup.style.display = 'block';
objMenu.addClassName('active');
var popupWidth = CUSTOMMENU_POPUP_WIDTH;
if (!popupWidth) popupWidth = popup.getWidth();
var pos = wpPopupPos(objMenu, popupWidth);
popup.style.top = pos.top + 'px';
popup.style.left = pos.left + 'px';
wpSetPopupZIndex(popup);
if (CUSTOMMENU_POPUP_WIDTH)
popup.style.width = CUSTOMMENU_POPUP_WIDTH + 'px';
// --- Static Block width ---
var block2 = $(popupId).select('div.block2');
if (typeof block2[0] != 'undefined') {
var wStart = block2[0].id.indexOf('_w');
if (wStart > -1) {
var w = block2[0].id.substr(wStart+2);
} else {
var w = 0;
$(popupId).select('div.block1 div.column').each(function(item) {
w += $(item).getWidth();
});
}
//console.log(w);
if (w) block2[0].style.width = w + 'px';
}
}, CUSTOMMENU_POPUP_DELAY_BEFORE_DISPLAYING);
}
function wpHideMenuPopup(element, event, popupId, menuId)
{
if (typeof wpCustommenuTimerShow[popupId] != 'undefined') clearTimeout(wpCustommenuTimerShow[popupId]);
element = $(element.id); var popup = $(popupId); if (!popup) return;
var current_mouse_target = null;
if (event.toElement) {
current_mouse_target = event.toElement;
} else if (event.relatedTarget) {
current_mouse_target = event.relatedTarget;
}
wpCustommenuTimerHide[popupId] = setTimeout(function() {
if (!wpIsChildOf(element, current_mouse_target) && element != current_mouse_target) {
if (!wpIsChildOf(popup, current_mouse_target) && popup != current_mouse_target) {
popup.style.display = 'none';
$(menuId).removeClassName('active');
}
}
}, CUSTOMMENU_POPUP_DELAY_BEFORE_HIDING);
}
function wpPopupOver(element, event, popupId, menuId)
{
if (typeof wpCustommenuTimerHide[popupId] != 'undefined') clearTimeout(wpCustommenuTimerHide[popupId]);
}
function wpPopupPos(objMenu, w)
{
var pos = objMenu.cumulativeOffset();
var wraper = $('custommenu');
var posWraper = wraper.cumulativeOffset();
var xTop = pos.top - posWraper.top
if (CUSTOMMENU_POPUP_TOP_OFFSET) {
xTop += CUSTOMMENU_POPUP_TOP_OFFSET;
} else {
xTop += objMenu.getHeight();
}
var res = {'top': xTop};
if (CUSTOMMENU_RTL_MODE) {
var xLeft = pos.left - posWraper.left - w + objMenu.getWidth();
if (xLeft < 0) xLeft = 0;
res.left = xLeft;
} else {
var wWraper = wraper.getWidth();
var xLeft = pos.left - posWraper.left;
if ((xLeft + w) > wWraper) xLeft = wWraper - w;
if (xLeft < 0) xLeft = 0;
res.left = xLeft;
}
return res;
}
function wpIsChildOf(parent, child)
{
if (child != null) {
while (child.parentNode) {
if ((child = child.parentNode) == parent) {
return true;
}
}
}
return false;
}
function wpSetPopupZIndex(popup)
{
$$('.wp-custom-menu-popup').each(function(item){
item.style.zIndex = '9999';
});
popup.style.zIndex = '10000';
}
enter code here
There is an option in custom menu settings - top offset, may be this option defines top: 20px; attribute.
I'm not really sure why the GeoLocation works on my PC, but not my iPhone ... I've got sensor=true within the script call to the API, but apart from that, I'm at a loss. Here's the entire script:
<div id="info"></div>
<div id="map_canvas" style="width:908px; height:420px"></div>
<input type="text" id="addressInput" size="10"/>
<select id="radiusSelect">
<option value="5" selected>5mi</option>
<option value="15" selected>15mi</option>
<option value="25" selected>25mi</option>
<option value="100">100mi</option>
<option value="200">200mi</option>
<option value="4000">4000mi</option>
</select>
<input type="button" value="Search" onclick="searchLocations();">
<div><select id="locationSelect" style="width:100%;visibility:hidden"></select></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCe49sI29q0AVNo9iVvQ-lDlDwZpFZuA4o&sensor=true"></script>
<script type="text/javascript" src="http://gmaps-samples-v3.googlecode.com/svn/trunk/geolocate/geometa.js"></script>
<script type="text/javascript">
var map;
var markers = [];
var infoWindow;
var locationSelect;
function load() {
map = new google.maps.Map(document.getElementById("map_canvas"), {
center: new google.maps.LatLng(40, -100),
zoom: 4,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
infoWindow = new google.maps.InfoWindow();
locationSelect = document.getElementById("locationSelect");
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
if (markerNum != "none") {
google.maps.event.trigger(markers[markerNum], 'click');
}
};
// geolocation
prepareGeolocation();
doGeolocation();
}
function doGeolocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(positionSuccess, positionError);
} else {
positionError(-1);
}
}
function positionError(err) {
var msg;
switch(err.code) {
case err.UNKNOWN_ERROR:
msg = "Unable to find your location";
break;
case err.PERMISSION_DENINED:
msg = "Permission denied in finding your location";
break;
case err.POSITION_UNAVAILABLE:
msg = "Your location is currently unknown";
break;
case err.BREAK:
msg = "Attempt to find location took too long";
break;
default:
msg = "Location detection not supported in browser";
}
document.getElementById('info').innerHTML = msg;
}
function positionSuccess(position) {
// Centre the map on the new location
var coords = position.coords || position.coordinate || position;
var latLng = new google.maps.LatLng(coords.latitude, coords.longitude);
map.setCenter(latLng);
map.setZoom(15);
var marker = new google.maps.Marker({
map: map,
position: latLng,
title: 'Why, there you are!'
});
document.getElementById('info').innerHTML = 'Looking for <b>' +
coords.latitude + ', ' + coords.longitude + '</b>...';
// And reverse geocode.
(new google.maps.Geocoder()).geocode({latLng: latLng}, function(resp) {
var place = "You're around here somewhere!";
if (resp[0]) {
var bits = [];
for (var i = 0, I = resp[0].address_components.length; i < I; ++i) {
var component = resp[0].address_components[i];
if (contains(component.types, 'political')) {
bits.push('<b>' + component.long_name + '</b>');
}
}
if (bits.length) {
place = bits.join(' > ');
}
marker.setTitle(resp[0].formatted_address);
}
document.getElementById('info').innerHTML = place;
});
}
function contains(array, item) {
for (var i = 0, I = array.length; i < I; ++i) {
if (array[i] == item) return true;
}
return false;
}
function searchLocations() {
console.log("searching locations...");
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
searchLocationsNear(results[0].geometry.location);
} else {
alert(address + ' not found');
}
});
}
function clearLocations() {
//infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
locationSelect.innerHTML = "";
var option = document.createElement("option");
option.value = "none";
option.innerHTML = "See all results:";
locationSelect.appendChild(option);
locationSelect.style.visibility = "visible";
}
function searchLocationsNear(center) {
clearLocations();
var radius = document.getElementById('radiusSelect').value;
/* var searchUrl = 'phpsqlajax_search.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius; */
var searchUrl = 'http://dev-imac.local/phpsqlajax_search.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
console.log(searchUrl);
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++) {
var name = markerNodes[i].getAttribute("name");
var address = markerNodes[i].getAttribute("address");
var distance = parseFloat(markerNodes[i].getAttribute("distance"));
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
createOption(name, distance, i);
createMarker(latlng, name, address);
bounds.extend(latlng);
}
map.fitBounds(bounds);
});
}
function createMarker(latlng, name, address) {
var html = "<b>" + name + "</b> <br/>" + address;
var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
}
function createOption(name, distance, num) {
var option = document.createElement("option");
option.value = num;
option.innerHTML = name + "(" + distance.toFixed(1) + ")";
locationSelect.appendChild(option);
}
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.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
function doNothing() {}
window.onload = load();
</script>
First of all,
mapTypeId: 'roadmap',
should be:
mapTypeId: google.maps.MapTypeId.ROADMAP,
but that should cause it to fail in your PC as well.
Other than that, your <script> section should be in the <head> section of the document and not in the <body>. Maybe the iPhone browser is more strict about this than the browser on your PC. What browser(s) are you using in each system? (I'm guessing you're using IE on the PC. Have you tried other browsers?)