When i have opened, page was blank. In place key i have copied my key but still it doesn't works. Someone knows what is wrong? I Have added html etc. I don't know why everytime when i open, page is blank. No errors or something.
<title>Place searches</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=key&libraries=places">
var map;
var service;
var infowindow;
function initialize() {
var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: '500',
type: ['restaurant']
};
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createMarker(results[i]);
}
}
}
</script>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=key&libraries=places&callback=initMap" async defer>
There are several problems with your code:
you don't close <script> tag that loads Google Maps JavaScript API
you include call for Maps JavaScript API twice
you are missing the opening <script> tag in the code that initializes a map
you use initMap as name of callback function, but in your code the name of function is initialize
function createMarker is not defined
If I fix these issues map is loaded correctly. Have a look at fixed sample:
var map;
var service;
var infowindow;
function initialize() {
var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: '500',
type: ['restaurant']
};
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
//createMarker(results[i]);
}
}
}
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initialize&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU" async defer></script>
You can also see the example on jsbin: http://jsbin.com/cutomaxoxi/edit?html,output
I hope this helps!
Related
Im injecting html and js in my web view. What im trying to do is allow support on my Android phone to connect to a local Node.js Server to send and receive Audio and Video.
This is my Server.js that runs:
const HTTPS_PORT = 8443;
const fs = require('fs');
const https = require('https');
const WebSocket = require('ws');
const WebSocketServer = WebSocket.Server;
// Yes, TLS is required
const serverConfig = {
key: fs.readFileSync('key.pem'),
cert: fs.readFileSync('cert.pem'),
};
// ----------------------------------------------------------------------------------------
// Create a server for the client html page
const handleRequest = function(request, response) {
// Render the single client html file for any request the HTTP server receives
console.log('request received: ' + request.url);
if(request.url === '/') {
response.writeHead(200, {'Content-Type': 'text/html'});
response.end(fs.readFileSync('client/index.html'));
} else if(request.url === '/webrtc.js') {
response.writeHead(200, {'Content-Type': 'application/javascript'});
response.end(fs.readFileSync('client/webrtc.js'));
}
};
const httpsServer = https.createServer(serverConfig, handleRequest);
httpsServer.listen(HTTPS_PORT, '192.168.1.62');
// ----------------------------------------------------------------------------------------
// Create a server for handling websocket calls
const wss = new WebSocketServer({server: httpsServer});
wss.on('connection', function(ws) {
ws.on('message', function(message) {
// Broadcast any received message to all clients
console.log('received: %s', message);
wss.broadcast(message);
});
});
wss.broadcast = function(data) {
this.clients.forEach(function(client) {
if(client.readyState === WebSocket.OPEN) {
client.send(data);
}
});
};
console.log('Server running. Visit https://localhost:' + HTTPS_PORT + ' in Firefox/Chrome.\n\n\
Some important notes:\n\
* Note the HTTPS; there is no HTTP -> HTTPS redirect.\n\
* You\'ll also need to accept the invalid TLS certificate.\n\
* Some browsers or OSs may not allow the webcam to be used by multiple pages at once. You may need to use two different browsers or machines.\n'
);
This is the HTML thats viewable on the Webview in Android:
<!DOCTYPE html>
<html lang="en">
<head>
<title>P2P Video Chat</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=320, initial-scale=1" />
<script src="https://unpkg.com/peerjs#1.3.1/dist/peerjs.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<style>
div::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
#live {
background-color: #000;
height:100%;
width:100%;
}
#local-video {
width: 100%;
background-color:black;
}
#divider{
height:20px;
background-color:black;
}
#remote-video {
width: 100%;
background-color:black;
}
#end-call {
position: absolute;
top: 0;
left: 0;
padding: 8px;
background-color: red;
color: white;
border: none;
}
.d1{border-bottom:1px solid #ffffff;font-weight:bold;font-size:22px;color:#90CAF9;top:20px;left:20px;padding:8px;background-color:#0D47A1;opacity:0.7;text-align:center;}
.s1{color:white;font-size:12px;}
.d2{position:absolute;left:20px;top:20px;width:70px;height:70px;border-radius:35px;background-color:green;opacity:0.7;display:flex:justify-content:center;align-items:center;}
.i1{width:50px;height:50px;margin-left:10px;margin-top:10px;}
#record1{display:none;left:20px;border-radius:25px;width:50px;height:50px;position:absolute;background-color:red;opacity:0.7;padding:8px;color:white;font-weight:bold;font-size:18px;margin-top:-180px;z-index:400;}
#timer1{width:100%;margin-top:-50px;position:absolute;text-align:center;color:white;padding:8px;z-index:800;font-size:10px;}
.d3{position:absolute;opacity:0.7;padding:0px;color:white;font-weight:bold;font-size:18px;margin-top:-105px;display:inline-block;z-index:1000}
.d4{font-weight:bold;margin-top:-15px;margin-left:15px;position:absolute;width:120px;height:30px;z-index:300;}
.i2{float:left;width:50px;height:50px;margin-top:3px;}
.d5{float:left;color:black;margin-top:0px;margin-left:5px;}
.d6{position:absolute;color:gray;font-size:23px;text-align:center;z-index:200;width:100%;margin-top:-22px;padding:0px;background-color:white;}
.d7{background-color:white;padding:10px;border-radius:25px;font-size:23px;}
.d8{position:absolute;opacity:0.7;padding:0px;color:white;font-weight:bold;font-size:18px;margin-top:70px;display:inline-block;z-index:400;}
#timer2{width:100%;margin-top:80px;position:absolute;text-align:center;color:white;padding:8px;z-index:800;font-size:3px;}
#record2{display:none;left:20px;border-radius:25px;width:50px;height:50px;position:absolute;background-color:red;opacity:0.7;padding:8px;color:white;font-weight:bold;font-size:18px;margin-top:135px;z-index:100}
.d9{position:absolute;left:20px;bottom:20px;width:70px;height:70px;border-radius:35px;background-color:green;z-index:1200;opacity:0.7;display:flex:justify-content:center;align-items:center;}
.i3{width:50px;height:50px;margin-left:10px;margin-top:10px;}
.d10{border-top:1px solid #ffffff;text-align:center;font-weight:bold;font-size:22px;color:#90CAF9;position:absolute;left:0;bottom:0;right:0;padding:8px;background-color:#0D47A1;opacity:0.7;}
.s2{color:white;font-size:12px;}
/* Exact resolution */
#media (-webkit-device-pixel-ratio: 1) {
}
/* Minimum resolution */
#media (-webkit-min-device-pixel-ratio: 1.1) {
.d1{font-size:8px;}
.d2{width:40px;height:40px;background-color:red;}
.d2 img{width:20px;height:20px}
#record1{width:20px;height:20px;border-radius:10px; margin-top:-100px;}
#timer1{font-size:8px;}
#record2{width:20px;height:20px;border-radius:10px;margin-top:53px;}
#timer2{font-size:8px;margin-top:15px;}
.d3{font-size:12px;display:inline-block;}
.d5{font-size:8px;margin-top:4px;}
.d6{font-size:23px;}
.d8{font-size:12px;margin-top:50px;display:inline-block;}
.d3 img{ width:20px; height:20px;margin-right:5px; padding:2px;display:inline-block;}
.d8 img{ width:20px; height:20px;margin-right:5px;padding:2px;display:inline-block;}
.i2{float:left;width:20px;height:20px;}
.d9{width:40px;height:40px;background-color:red;}
.d9 img{width:20px;height:20px;}
.i4{width:20px;height:20px;margin-right:5px;}
.i5{width:20px;height:20px;margin-right:5px;}
.d7{font-size:10px;}
.d10{font-size:8px;}
.d11{display:inline-block;margin-top:16px;position:absolute;width:300px;font-size:8px;}
.d12{display:inline-block;margin-top:16px;position:absolute;width:300px;font-size:8px;}
}
/* Maximum resolution */
#media (-webkit-max-device-pixel-ratio: 3) {
}
</style>
</head>
<body style="margin:0;padding:0;overflow:hidden;" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0">
<!-- App code -->
<div id="live">
<div class=""><div class="d1"><img class="i4" src="vote.png" />VOTE: <span class="s1">123</span></div></div>
<div class="d2"><img class="i1" src="like.png" /></div>
<video id="remote-video" autoplay muted="true"></video>
<div id="divider">
<div id="record1" class=""></div>
<div id="timer1" class="">15 seconds</div>
<div class="d3"><img class="i1" src="rap.png" /><div class="d11">MC Trix</div></div>
<div class="d4">
<img class="i2" src="views.png"/> <div class="d5">1.1k</div> </div>
<div class="d6"><div class="d7">VS</div></div>
<div class="d8"><img class="i1" src="rap.png" /><div class="d12">MC Trix and Metz</div></div>
<div id="timer2" class="">15 seconds</div>
<div id="record2" class=""></div>
</div>
<video id="local-video" muted="true" autoplay></video>
<input value="lfnvsfnsnfvsnvsn" style="z-index:10000;position:absolute;top:0;left:0;" type="button" onclick="start(true)" />
<div class="d9"><img class="i3" src="like.png" /></div>
<div class=""><div class="d10"><img class="i5" src="vote.png" />VOTE: <span class="s2">123</span></div></div>
<!--<button id="end-call" onclick="endCall()">End Call</button>-->
</div>
</body>
</html>
<script>
var timer = 15;
setTimeout(setTimer1, 5000);
var interval;
function setTimer1(){
interval = setInterval(setTimer1Elapsed, 1000);
}
function setTimer1Elapsed(){
--timer;
if(timer > 0){
$("#timer1").text(timer + " seconds");
}else{
$("#record1").fadeTo(100, 0.3, function() { $(this).fadeTo(500, 1.0); });
$("#remote-video")[0].muted = !$("#remote-video")[0].muted;
$("#timer1").text("");
interval = null;
}
}
var timer2 = 15;
var interval2;
//function setTimer2AfterContestantFinish(){
setTimeout(setTimer2, 5000);
//}
function setTimer2(){
interval2 = setInterval(setTimer1Elapsed2, 1000);
}
function setTimer1Elapsed2(){
if(timer2 > 0){
$("#timer2").text(timer2 + " seconds");
}else{
$("#record2").fadeTo(100, 0.3, function() { $(this).fadeTo(500, 1.0); });
$("#local-video")[0].muted = !$("#local-video")[0].muted;
$("#timer2").text("");
interval = null;
}
--timer2;
}
var height = $(document).height() / 2 - 60;
$("#remote-video").height(height);
$("#local-video").height(height);
$("#remote-video").css("opacity", 0);
$("#local-video").css("opacity", 0);
$("#live").width($(document).width());
$("#live").height($(document).height());
var localVideo;
var localStream;
var remoteVideo;
var peerConnection;
var uuid;
var serverConnection;
var peerConnectionConfig = {
'iceServers': [
{'urls': 'stun:stun.stunprotocol.org:3478'},
{'urls': 'stun:stun.l.google.com:19302'},
]
};
pageReady();
async function pageReady() {
uuid = createUUID();
localVideo = document.getElementById('local-video');
remoteVideo = document.getElementById('remote-video');
serverConnection = new WebSocket('wss://' + "192.168.1.62" + ':8443');
serverConnection.onmessage = gotMessageFromServer;
var constraints = {
video: true,
audio: false,
};
var stream;
if(navigator.mediaDevices.getUserMedia) {
stream = await navigator.mediaDevices.getUserMedia(constraints).catch(errorHandler);
getUserMediaSuccess(stream);
} else {
alert('Your browser does not support getUserMedia API');
}
}
function getUserMediaSuccess(stream) {
alert(uuid);
$("#local-video").css("opacity", 1);
localStream = stream;
localVideo.srcObject = stream;
localVideo.play();
}
function start(isCaller) {
peerConnection = new RTCPeerConnection(peerConnectionConfig);
peerConnection.onicecandidate = gotIceCandidate;
peerConnection.ontrack = gotRemoteStream;
peerConnection.addStream(localStream);
if(isCaller) {
peerConnection.createOffer().then(createdDescription).catch(errorHandler);
}
}
function gotMessageFromServer(message) {
if(!peerConnection) start(false);
var signal = JSON.parse(message.data);
// Ignore messages from ourself
if(signal.uuid == uuid) return;
if(signal.sdp) {
peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp)).then(function() {
// Only create answers in response to offers
if(signal.sdp.type == 'offer') {
peerConnection.createAnswer().then(createdDescription).catch(errorHandler);
}
}).catch(errorHandler);
} else if(signal.ice) {
peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice)).catch(errorHandler);
}
}
function gotIceCandidate(event) {
if(event.candidate != null) {
serverConnection.send(JSON.stringify({'ice': event.candidate, 'uuid': uuid}));
}
}
function createdDescription(description) {
console.log('got description');
peerConnection.setLocalDescription(description).then(function() {
serverConnection.send(JSON.stringify({'sdp': peerConnection.localDescription, 'uuid': uuid}));
}).catch(errorHandler);
}
function gotRemoteStream(event) {
console.log('got remote stream');
remoteVideo.srcObject = event.streams[0];
}
function errorHandler(error) {
console.log("xxxxx " + error);
}
// Taken from http://stackoverflow.com/a/105074/515584
// Strictly speaking, it's not a real UUID, but it gets the job done here
function createUUID() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}
</script>
I have the local video loading, just when the start(true) is causing the error:
WebSocket is already in CLOSING or CLOSED state.
I want to create a Group chat application based on Android and socket.io functionality just like Whatsapp.
I guess I don't really understand the question, but here is a very small simple chat room I wrote with socket.io a couple of years ago. I hope you can use it as a skeleton..
<body><ul id="Messages"></ul>
<form action="">
<input id="Message" autocomplete="off">
<input type="button" id="Send" value="Send">
</form>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$.getScript('socket.io/socket.io.js', function () {
initSocket();
});
var initSocket = function () {
var socket = io();
$('#Send').click(function () {
var userNameTag = $('#UserNameTag');
var nameTag = userNameTag.html();
if (nameTag) {
socket.emit('ioChatMessage', { text: nameTag + ': ' + $('#Message').val(), style: userNameTag[0].style });
} else {
socket.emit('ioChatMessage', { text: $('#Message').val() });
}
$('#Message').val('');
return false;
});
socket.on('ioChatMessage', function (msg) {
$('#Messages').append($('<li>').text(msg.text).css(msg.style));
});
window.onbeforeunload = function () {
socket.disconnect();
};
};
</script>
</body>
App.js
var app = require('express')();
var http = require('http').Server(app);
var socket = require('socket.io')(http);
app.get('*', function(req, res){
res.sendFile(__dirname + '/index.html');
});
socket.on('connection', function (io) {
io.on('ioChatMessage', function (msg) {
socket.emit('ioChatMessage', msg);
});
});
http.listen(process.env.PORT);
In this page you can learn how to build a chat group using socket.io in a browser:
https://socket.io/get-started/chat/
My recomendation if you want it to be an Android app is to do it like you see in the tutorial and then use Apache Cordova to make it an Android App anyone can install.
You can download it from here:
https://cordova.apache.org/
The final index.html should look like this:
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
#messages { margin-bottom: 40px }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
window.scrollTo(0, document.body.scrollHeight);
});
});
</script>
</body>
</html>
And the index.js:
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var port = process.env.PORT || 3000;
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
});
http.listen(port, function(){
console.log('listening on *:' + port);
});
I want to detect map position change (same as map camera change) in Yandex maps. Google maps API provide this opportunity via OnCameraChangeListener(), but I couldn't find the appropriate one for Yandex one.
SO:Which is the appropriate function of Google's OnCameraChangeListener in Yandex maps?
Thanks in advance.
I know the answer is too so late , but maybe help someone :
class GeofenceActivity : ComponentActivity() , CameraListener {
private lateinit var mapViewYandex: com.yandex.mapkit.mapview.MapView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
SetupMapInitializing(this)
mapViewYandex.map.addCameraListener(this)
}
private fun SetupMapInitializing(cx : Context){
try {
MapKitFactory.setApiKey("your-key")
MapKitFactory.initialize(cx)
I18nManagerFactory.setLocale(Locale.getDefault().language)
} catch(e : IOException){
e.printStackTrace()
}
}
override fun onCameraPositionChanged(
p0: Map,
p1: CameraPosition,
p2: CameraUpdateReason,
p3: Boolean
) {
Log.w(
"Yandex",
p1.target.latitude.toString() + " , " +
p1.target.longitude.toString()
)
}
}
You need top add an event handler for the map with the title of boundschange
Here is some simplae sample code:
<script>
var myMap;
ymaps.ready(init);
function init () {
myMap = new ymaps.Map('map', {
center: [55.76, 37.64], // Moscow
zoom: 10
});
//add an event handler for detecting any change to the boudnaries of the map
myMap.events.add('boundschange', onBoundsChange);
//a callback function to do something with the new boundaries
function onBoundsChange(e){
console.log(e.originalEvent.newBounds);
}
}
</script>
And the most basic HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Detecting boundary changes of a Yandex Map</title>
<script src="https://api-maps.yandex.ru/2.1/?lang=en_RU&apikey=<your API-key>" type="text/javascript"></script>
<style>
body, html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 90%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
I am developing a Hybrid mobile application using IBM Worklight 6.2.0 on Android and iOS.
I am using AngularJS with BootstrapUI.
It runs on a browser and on iOS devices, but I am facing issues with Google Maps integration on Android devices.
I have tried many possible solutions but none worked.
Below is my code:
<style>
#content,#map_canvas {
padding: 0;
position: absolute !important;
top: 40px !important;
right: 0;
bottom: 40px !important;
left: 0 !important;
}
</style>
<script>
var map, currentLocation, currentLocationMarker;
function loadMapScript() {
alert("Loading map plz wait : ");
var script = document.createElement("script");
script.type = "text/javascript";
script.id = "googleMaps"
script.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initializeMap";
document.body.appendChild(script);
}
function initializeMap() {
var myLatlng = new google.maps.LatLng(currentLocation.coords.latitude,
currentLocation.coords.longitude);
var mapOptions = {
center : myLatlng,
zoom : 18,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
updateCurrentLocationMarker();
}
function updateCurrentLocationMarker() {
var myLatlng = new google.maps.LatLng(currentLocation.coords.latitude,
currentLocation.coords.longitude);
if (currentLocationMarker) {
currentLocationMarker.setMap(null);
} else {
currentLocationMarker = new google.maps.Marker({
position : myLatlng,
animation : google.maps.Animation.DROP,
title : "You!",
map : map
});
}
}
function onSuccess(position) {
alert("onSuccess called : ");
currentLocation = position;
if (!map) {
loadMapScript();
}
}
function onError(error) {
alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}
function onDeviceReady() {
alert("onDeviceReady called : ");
if (navigator && navigator.geolocation) {
alert("everthing is fine");
//navigator.geolocation.getCurrentPosition(onSuccess, onError);
WL.Device.Geo.acquirePosition(onSuccess, onError);
} else {
alert("issue");
}
}
document.addEventListener("deviceready", onDeviceReady, false);
</script>
<div id="content">
<div id="map_canvas"
style="padding: 0; position: absolute !important; top: 1px !important; right: 0; bottom: 1px !important; left: 0 !important;"></div>
</div>
The URL was blocked by my whitelist in config.xml.Adding ; to config.xml in my native folder worked.:)
When I remove a marker using marker.setMap(null), it remains visible until I zoom out at which point Google Maps removes it.
The marker is not visible after being removed on the same HTML page with Chrome on Windows.
It appears that the map is not being refreshed properly after the markers are removed.
Code with the issue (marker should disappear after 5s):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.8.2.min.js"></script>
<style type="text/css">
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html { height: 100%; }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQ7L1PL7pQzSuDfv9kTL_qE4Cp0wy8Oo8&sensor=true">
</script>
<script type="text/javascript">
var theMap = null;
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(37.7749295, -122.4194155),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
theMap = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
navigator.geolocation.getCurrentPosition(
function (position) {
// successfully load position
var lat = position.coords.latitude;
var long = position.coords.longitude;
theMap.setCenter(new google.maps.LatLng(lat, long), 21);
},
function (fail) {
console.error("Failed to load GPS coordinates");
}
);
var marker;
function addMarker(itemid, lat, lon) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: theMap
});
}
addMarker('pokemon', 37.42841, -122.16960);
setTimeout(function() {marker.setMap(null);}, 5000);
}
</script>
</head>
<body onload="initialize();">
<div id="map_canvas" style="width:100%; height:100%; top:0px; z-index: 10"/>
</body>
</html>
I think, it's the same issue like here: Google Maps API v3 in PhoneGap: markers not drawing properly after move
Try to set the optimized: false property to the marker:
new google.maps.Marker({
map: map,
optimized: false,
clickable: true
});
this should fix it!