Markers were displayed before geolocationAPI was introduced, but
when debugging.InvalidValueError: setMap:not an instance of Map; and not an instance of StreetViewPanorama
The error appears and the marker disappears.(The central coordinates were acquired.) I don't know what it means.Please let me know.
Note: Added action that was not written
<html>
<head>
<metacharset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://maps.googleapis.com/maps/api/js?key=Yourkey"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script>
vargmap = null;
$(document).on('pageshow', '#map', drawMap);
function drawMap(){
if(gmap==null){
initialize (data, map); // Initialize map
}
}
$(function(){
// Start loading JSON files
$.ajax({
type: "POST",
url: "json.php",
cache: false,
dataType: "json",
success:function(json){
vardata=jsonRequest(json);
initialize(data,map);
}
});
});
varcurrentInfoWindow=null;
// Data stored in JSON file read marker
function jsonRequest(json){
vardata=[];
if(json.Marker){
varn = json.Marker.length;
for(vari=0;i<n;i++){
data.push(json.Marker[i]);
}
}
return data;
}
// Marker generation
function createClickCallback(marker, infoWindow){
return function() {
if(currentInfoWindow){
currentInfoWindow.close();
}
infoWindow.open(marker.getMap(), marker);
currentInfoWindow=infoWindow;
};
}
// Get current location
navigator.geolocation.getCurrentPosition(successCallback);
function successCallback(pos){
var Position_latitude=pos.coords.latitude;
var Position_longitude=pos.coords.longitude;
// console.log (Position_latitude, Position_longitude);
geo_location(Position_latitude, Position_longitude);
}
function geo_location(x,y){
var bodyHeight=$('body').height();
$("#map").css('height', bodyHeight);
varopts={
zoom:16,
center —new google.maps.LatLng(x,y),
mapTypeId—Google.maps.MapTypeId.ROADMAP
};
varmap = new google.maps.Map( document.getElementById("map"), opts);
}
// Map generation
function initialize(data,map){
vari = data.length;
while(i-->0){
var data=data[i];
varmarker = new google.maps.Marker({
position: new google.maps.LatLng(dat.lat, dat.lng),
map —map
});
var infoWindow = new google.maps.InfoWindow({
maxWidth: 250,
content: '<div class="infoWindow">'+
'<h2>'+dat.title+'</h2>'+
'<span>'+dat.comment+'</span>'+
'</div>'
});
google.maps.event.addListener(marker, 'click', createClickCallback(marker, infoWindow));
}
}
</script>
</head>
<body>
<div data-role="page"id="top">
<div data-role="header">
<h1>DEMO</h1>
</div>
<div role="main" class="ui-content">
<divid="map"></div>
</div>
<div data-role="footer">
<div data-role="navbar" data-iconpos="bottom" class="navi_bar">
<ul>
<lic class="ui-block-a">a href="index.html" rel="external" data-icon="home" class="ui-btn-active ui-state-persist">Map</a><li>
<lic class="ui-block-b">a href="sentpage.html" rel="external" data-icon="info">Info</a><li>;;
</ul>
</div>
</div>
</div>
</body>
<style type="text/css">
#map{
width: 100%;
height —auto;
}
# infoWindow {
width: 100%;
height —auto;
}
</style>
InvalidValueError: setMap:not an instance of Map; and not an instance of StreetViewPanorama
Invalid value error: setMap() method passed non-Map or StreetViewPanorama class instance
That's what it means.
In other words, the infoWindow.open(marker.getMap(), marker); part is strange.
The infoWindow.open() method code is not published, but this is the only part that passes the instance of the Map class, so I guess it's here.
I haven't identified the entire source code yet.
This is what Nao Tera looks like when you make the code work.
(I think there is a better way to write the code...)
<!DOCTYPE html>
<html>
<head>
<title> Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<metacharset="utf-8">
<style>
US>html,body{
height —100%;
margin:0;
padding:0;
}
#map{
height —100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js" async></script>
<script>
window.addEventListener("load", function(){
varcurrentInfoWindow=null;
// Data stored in JSON file read marker
function jsonRequest(json){
vardata=[];
if(json.Marker){
varn = json.Marker.length;
for(vari=0;i<n;i++){
data.push(json.Marker[i]);
}
}
return data;
}
// Marker generation
function createClickCallback(marker, infoWindow){
return function() {
if(currentInfoWindow){
currentInfoWindow.close();
}
infoWindow.open(marker.getMap(), marker);
currentInfoWindow=infoWindow;
};
}
// Map generation
navigator.geolocation.getCurrentPosition(
function geo_location(pos){
varopts={
zoom:16,
center: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
mapTypeId—Google.maps.MapTypeId.ROADMAP
};
varmap = new google.maps.Map( document.getElementById("map"), opts);
initialize(map, [
{
lat: pos.coords.latitude-pos.coords.latitude/100000,
lng: pos.coords.longitude-pos.coords.latitude/100000,
title: "marker1",
comment: "marker1"
},
{
lat: pos.coords.latitude+pos.coords.latitude/100000,
lng: pos.coords.longitude+pos.coords.longitude/100000,
title: "marker2",
comment: "marker2"
}
])
});
function initialize (map, data) {
vari = data.length;
while(i-->0){
var data=data[i];
varmarker = new google.maps.Marker({
position: new google.maps.LatLng(dat.lat, dat.lng),
map —map
});
var infoWindow = new google.maps.InfoWindow({
maxWidth: 250,
content: '<div class="infoWindow">'+
'<h2>'+dat.title+'</h2>'+
'<span>'+dat.comment+'</span>'+
'</div>'
});
google.maps.event.addListener(marker, 'click', createClickCallback(marker, infoWindow));
}
}
}, false);
</script>
</head>
<body>
<divid="map"></div>
</body>
</html>
© 2024 OneMinuteCode. All rights reserved.