I'm trying to get this piece of code to work in an iframe, but I always get the error:
ReferenceError: GetMap is not defined
I am not an advanced programmer, so I have no idea why it works alone, but not in an iframe (and nobody seems to have the same problem)! Help would be very appreciated.
PS: The programming code is mostly from YoYoMyo (who posted it on stackoverflow), I just adapted it for my use
<html>
<head>
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript" language="JavaScript">
function GetMap() {
var longitude = new Array();
var latitude = new Array();
var title = new Array();
var description = new Array();
longitude[0] = 47.5564154 //two defined locations
latitude[0] = 7.59245395
title[0] = "Basler Münster"
description[0] = "Basel"
longitude[1] = 47.55330556 //second defined Location
latitude[1] = 7.59001851
title[1] = "Theater Basel"
description[1] = "Basel"
var total = 2 //number of locations
var pinInfoBox; //the pop up info box
var infoboxLayer = new Microsoft.Maps.EntityCollection();
var pinLayer = new Microsoft.Maps.EntityCollection();
var apiKey = "AmpgeSj6OVb9ILPwvjyIfwM3qmqm5yccyNGR_mxmbpw2znYZoXxQAz_KVbc84XCC";
map = new Microsoft.Maps.Map(document.getElementById("map"), {credentials: apiKey});
// Create the info box for the pushpin
pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
infoboxLayer.push(pinInfobox);
for (var i = 0 ; i < total; i++){
//add pushpins
var latLon = new Microsoft.Maps.Location(longitude[i], latitude[i]);
var pin = new Microsoft.Maps.Pushpin(latLon);
pin.Title = title[i];//usually title of the infobox
pin.Description = description[i]; //information you want to display in the infobox
pinLayer.push(pin); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
}
map.entities.push(pinLayer);
map.entities.push(infoboxLayer);
map.setView({zoom: 15, center: new Microsoft.Maps.Location(47.55330556, 7.59001851)});
}
function displayInfobox(e)
{
pinInfobox.setOptions({title: e.target.Title, description: e.target.Description, visible:true, offset: new Microsoft.Maps.Point(0,25)});
pinInfobox.setLocation(e.target.getLocation());
}
function hideInfobox(e)
{
pinInfobox.setOptions({ visible: false });
}
</script>
<style>
#map { position: relative; top: 0; left: 0; width: 100%; height: 800px; border:none;}
</style>
</head>
<body onload="GetMap()">
<div id="some stuff" style="width=100%; height:80px">
some text
</div>
<div id="map" style="width=100%; height:800px">
</div>
<div id="some more stuff" style="width=100%; height:80px">
some more text to read
</div>
</body>
</html>
The code looks fine and I'm unable to reproduce the error you are seeing.
Related
I am using RTKLIB feature RTKPLOT. Google map is not enabled in it because it requires API key. I inserted google map API key in given htm file but a blank screen is shown while showing coordinates. The header part of htm file is first like this
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"
type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
After that i replaced it for inserting API key as follows.
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"
->
<script src="http://maps.google.com/maps/api/js?key={XXXXXXXXXXXXXXXXXXXXXXXXXXXXX_XXXXXXXXX}&v=3&sensor=false"
tell me where I am wrong .
complete code is
<html>
<head>
<title>RTKLIB_GM</title>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"
type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
var map = null;
var marks = [];
var markh = null;
var markz = 0;
var info = null;
var icon0="http://maps.google.co.jp/mapfiles/ms/icons/red-dot.png";
var icon1="http://maps.google.co.jp/mapfiles/ms/icons/yellow-dot.png";
function init() {
var opt = {
center: new google.maps.LatLng(0,0),
zoom: 2, minZoom: 2,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),opt);
document.getElementById('state').value='1';
}
function SetView(lat,lon,zoom) {
if (map == null) return;
map.setCenter(new google.maps.LatLng(lat,lon));
map.setZoom(zoom);
}
function SetCent(lat,lon) {
if (map == null) return;
map.setCenter(new google.maps.LatLng(lat,lon));
}
function SetZoom(zoom) {
if (map == null) return;
map.setZoom(zoom);
}
function ClearMark(lat,lon,title) {
for (var i in marks) {
marks[i].setMap(null);
}
marks.length = 0;
markh = null;
}
function AddMark(lat,lon,title,msg) {
var pos = new google.maps.LatLng(lat,lon);
var opt = {map: map, position: pos, title: title, icon: icon1};
var mark = new google.maps.Marker(opt);
if (title == "SOL2") mark.setIcon(icon0);
google.maps.event.addListener(mark,'click',function(event) {
if (info) {info.close();}
info = new google.maps.InfoWindow({content: msg});
info.open(mark.getMap(),mark);
});
marks.push(mark);
}
function PosMark(lat,lon,title) {
for (var i in marks) {
if (marks[i].title==title) {
marks[i].setPosition(new google.maps.LatLng(lat,lon));
break;
}
}
}
function ShowMark(title) {
for (var i in marks) {
if (marks[i].title==title) {
marks[i].setVisible(true);
break;
}
}
}
function HideMark(title) {
for (var i in marks) {
if (marks[i].title==title) {
marks[i].setVisible(false);
break;
}
}
}
</script>
</head>
<body style="margin: 0;"; scroll="no"; onload="init()">
<div id="map" style="height: 100%; width: 100%;"> </div>
<input id="state" type="hidden" value="0">
</body>
</html>
Assuming you are on Windows. You need to add a register key for the software to work.
Add the following entry of Windows registries by regedit (Registry Editor) to run the WebBrowser component on RTKPlot.exe as IE 11.
Key: KEY_LOCAL_MACHINE - SOFTWARE - Wow6432Node - Microsoft - Internet Explorer - MAIN - FeatureControl - FEATURE_BROWSER_EMULATION
Name: rtkplot.exe
Type: REG_DWORD
Data: 11000 (decimal)
http://www.rtklib.com/rtklib_support.htm - the same issue exists for NTRIP Browser (srctblbrows.exe)
This made it work on my machine, I had the same issue you had.
I'm using this code to get gps data from (db.php from database), I need to update marker without refreshing the page. I tested setInterval (function ()), it works but it updates the whole page (map + marker). I need to update just the position of marker (variable uluru) but my problem is that the variable uluru is local
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"><b></b></div>
<div id="map2"><b>
</b></div>
<script>
var markers = [];
function loadmap(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
var latt = myObj.name;
var longg = myObj.name2;
uluru = {lat:+latt , lng:+longg };
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center:uluru,
});
addmarker(uluru);
}
};
xmlhttp.open("GET","db.php?q=",true);
xmlhttp.send();
}
function addmarker(location){
var marker = new google.maps.Marker({ position: location, map: map });
markers.push(marker);
}
setInterval(function(){ loadmap() }, 1000);
</script>
<script
async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD9J11XCcYDoT8-s0BD9sR4ARzIUmpI&callback=loadmap">
</script>
</body>
</html>
I'm trying to display markers on a map using Leaflet. On clicking each marker, I'm trying to display a variable inside a popup but I am not able to do so. However, if the same thing is done inside the alert method, the variable gets displayed. What am I doing wrong?
var map = L.map('map').setView([51.505, -0.09], 12);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
var latlngs = [[51.49,-0.11],[51.51,-0.13],[51.505,-0.09],[51.507,-0.08], [51.509,-0.07]];
var speed = [1,2,3,4,5]
var time = [12,14,15,16]
var test = 1
customMarker = L.CircleMarker.extend({
options: {
}
});
for (var i = 0, len = latlngs.length; i < len; i++) {
var m = new customMarker(latlngs[i], {
speed: speed[i],
time: time[i]
});
m.on('mouseover', function() {
//alert('Speed at this point' + this.options.speed)
this.bindPopup(this.options.speed).openPopup()
})
m.addTo(map);
}
var polyline = L.polyline(latlngs,{});
polyline.addTo(map);
bindPopup accepts multiple types for its content argument :
bindPopup(<String|HTMLElement|Function|Popup>content, <Popup options> options?)
You're passing an integer, not a string and that confuses Leaflet into looking for a DOM node named 1. Cast your value to a string and your problem disappears :
this.bindPopup(this.options.speed+"").openPopup()
And a demo
var map = L.map('map').setView([51.505, -0.09], 12);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
var latlngs = [[51.49,-0.11],[51.51,-0.13],[51.505,-0.09],[51.507,-0.08], [51.509,-0.07]];
var speed = [1,2,3,4,5]
var time = [12,14,15,16]
var test = 1
customMarker = L.CircleMarker.extend({
options: {
}
});
for (var i = 0, len = latlngs.length; i < len; i++) {
var m = new customMarker(latlngs[i], {
speed: speed[i],
time: time[i]
});
m.on('mouseover', function() {
this.bindPopup(this.options.speed+"").openPopup()
})
m.addTo(map);
}
var polyline = L.polyline(latlngs,{});
polyline.addTo(map);
html, body {
height: 100%;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
<div id='map'></div>
I can't create multiple layers (images and lines) on the same coordinates.
Does anyone know how you can handle it?
example code:
for (; index_array < array_trip.length; index_array++) {
latVal = array_trip[index_array].latitude;
longVal = Microsoft.Maps.Location.normalizeLongitude(array_trip[index_array].longitude);
map.setView({ center: new Microsoft.Maps.Location(latVal, longVal) });
var pushpinOptions = { icon: path + 'car.png', width: 50, height: 50 };
var pushpin = new Microsoft.Maps.Pushpin({ latitude: latVal, longitude: longVal }, pushpinOptions);
map.entities.push(pushpin);
}
First off, don't set the map view in an array. This will only cause issues. Secondly, ensure that the URL to the pushpin icon is correct. Perhaps try removing that option for now until you see the default pushpins displayed on the map, then try adding a custom icon.
If you want to separate your data into layers you should use EntityCollection's: https://msdn.microsoft.com/en-us/library/gg427616.aspx
Here is a good blog post on layering: https://rbrundritt.wordpress.com/2011/10/13/multiple-pushpins-and-infoboxes-in-bing-maps-v7/
Use could initialize EntityCollection object to add multiple entities to the map at one time.
Example
function GetMap() {
var locations = [
new Microsoft.Maps.Location(60.173783, 24.941068),
new Microsoft.Maps.Location(59.338575, 18.065823),
new Microsoft.Maps.Location(59.922602, 10.749411),
new Microsoft.Maps.Location(55.675817, 12.570452)
];
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), { credentials: "Bing Maps Key" });
//1. Add pushpins
for (var i = 0; i < locations.length; i++) {
var pin = new Microsoft.Maps.Pushpin(locations[i]);
// Add the pushpin
map.entities.push(pin);
}
//2. Add a polyline
var line = new Microsoft.Maps.Polyline(locations);
map.entities.push(line);
//3. Add a polygon
var polygoncolor = new Microsoft.Maps.Color(100, 100, 0, 100);
var polygon = new Microsoft.Maps.Polygon(locations, { fillColor: polygoncolor, strokeColor: polygoncolor });
map.entities.push(polygon);
var bestview = Microsoft.Maps.LocationRect.fromLocations(locations);
map.setView({ bounds: bestview });
}
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:600px; height:600px;"></div>
</body>
This is the code that I am using to drop a marker after searching for an address and then dragging it.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Local Search API + Maps API v3 demo</title>
<link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet" type="text/css"/>
<link href="./places.css" rel="stylesheet" type="text/css"/>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQ82LsCgTSsdpNEnBsExtoeJv4cdBSUkiLH6ntmAr_5O4EfjDwOa0oZBQ" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
// Our global state
var gLocalSearch;
var gMap;
var gInfoWindow;
var gSelectedResults = [];
var gCurrentResults = [];
var gSearchForm;
// Create our "tiny" marker icon
var gYellowIcon = new google.maps.MarkerImage(
"http://labs.google.com/ridefinder/images/mm_20_yellow.png",
new google.maps.Size(12, 20),
new google.maps.Point(0, 0),
new google.maps.Point(6, 20));
var gRedIcon = new google.maps.MarkerImage(
"http://labs.google.com/ridefinder/images/mm_20_red.png",
new google.maps.Size(12, 20),
new google.maps.Point(0, 0),
new google.maps.Point(6, 20));
var gSmallShadow = new google.maps.MarkerImage(
"http://labs.google.com/ridefinder/images/mm_20_shadow.png",
new google.maps.Size(22, 20),
new google.maps.Point(0, 0),
new google.maps.Point(6, 20));
// Set up the map and the local searcher.
function OnLoad() {
// Initialize the map with default UI.
gMap = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: 'roadmap'
});
// Create one InfoWindow to open when a marker is clicked.
gInfoWindow = new google.maps.InfoWindow;
google.maps.event.addListener(gInfoWindow, 'closeclick', function() {
unselectMarkers();
});
// Initialize the local searcher
gLocalSearch = new GlocalSearch();
gLocalSearch.setSearchCompleteCallback(null, OnLocalSearch);
}
function unselectMarkers() {
for (var i = 0; i < gCurrentResults.length; i++) {
gCurrentResults[i].unselect();
}
}
function doSearch() {
var query = document.getElementById("queryInput").value;
gLocalSearch.setCenterPoint(gMap.getCenter());
gLocalSearch.execute(query);
}
// Called when Local Search results are returned, we clear the old
// results and load the new ones.
function OnLocalSearch() {
if (!gLocalSearch.results) return;
var searchWell = document.getElementById("searchwell");
// Clear the map and the old search well
searchWell.innerHTML = "";
for (var i = 0; i < gCurrentResults.length; i++) {
gCurrentResults[i].marker().setMap(null);
}
// Close the infowindow
gInfoWindow.close();
gCurrentResults = [];
for (var i = 0; i < gLocalSearch.results.length; i++) {
gCurrentResults.push(new LocalResult(gLocalSearch.results[i]));
}
var attribution = gLocalSearch.getAttribution();
if (attribution) {
document.getElementById("searchwell").appendChild(attribution);
}
// Move the map to the first result
var first = gLocalSearch.results[0];
gMap.setCenter(new google.maps.LatLng(parseFloat(first.lat),
parseFloat(first.lng)));
}
// Cancel the form submission, executing an AJAX Search API search.
function CaptureForm(searchForm) {
gLocalSearch.execute(searchForm.input.value);
return false;
}
// A class representing a single Local Search result returned by the
// Google AJAX Search API.
function LocalResult(result) {
var me = this;
me.result_ = result;
me.resultNode_ = me.node();
me.marker_ = me.marker();
google.maps.event.addDomListener(me.resultNode_, 'mouseover', function() {
// Highlight the marker and result icon when the result is
// mouseovered. Do not remove any other highlighting at this time.
me.highlight(true);
});
google.maps.event.addDomListener(me.resultNode_, 'mouseout', function() {
// Remove highlighting unless this marker is selected (the info
// window is open).
if (!me.selected_) me.highlight(false);
});
google.maps.event.addDomListener(me.resultNode_, 'click', function() {
me.select();
});
document.getElementById("searchwell").appendChild(me.resultNode_);
}
LocalResult.prototype.node = function() {
if (this.resultNode_) return this.resultNode_;
return this.html();
};
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
// Returns the GMap marker for this result, creating it with the given
// icon if it has not already been created.
LocalResult.prototype.marker = function() {
var me = this;
if (me.marker_) return me.marker_;
var marker = me.marker_ = new google.maps.Marker({
position: new google.maps.LatLng(parseFloat(me.result_.lat),
parseFloat(me.result_.lng)),
icon: gYellowIcon, shadow: gSmallShadow, map: gMap});
google.maps.event.addListener(marker, "click", function() {
me.select();
});
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
geocodePosition(marker.getPosition());
});
return marker;
};
// Unselect any selected markers and then highlight this result and
// display the info window on it.
LocalResult.prototype.select = function() {
unselectMarkers();
this.selected_ = true;
this.highlight(true);
gInfoWindow.setContent(this.html(true));
gInfoWindow.open(gMap, this.marker());
};
LocalResult.prototype.isSelected = function() {
return this.selected_;
};
// Remove any highlighting on this result.
LocalResult.prototype.unselect = function() {
this.selected_ = false;
this.highlight(false);
};
// Returns the HTML we display for a result before it has been "saved"
LocalResult.prototype.html = function() {
var me = this;
var container = document.createElement("div");
container.className = "unselected";
container.appendChild(me.result_.html.cloneNode(true));
return container;
}
LocalResult.prototype.highlight = function(highlight) {
this.marker().setOptions({icon: highlight ? gRedIcon : gYellowIcon});
this.node().className = "unselected" + (highlight ? " red" : "");
}
GSearch.setOnLoadCallback(OnLoad);
//]]>
</script>
</head>
<body style="font-family: Arial, sans-serif; font-size: small;">
<p>Perform a local search on the map below:</p>
<div style="width: 500px;">
<div style="margin-bottom: 5px;">
<div>
<input type="text" id="queryInput" value="pizza" style="width: 250px;"/>
<input type="button" value="Find" onclick="doSearch()"/>
</div>
</div>
<div style="position: absolute; left: 540px;">
<div id="searchwell"></div>
</div>
<div id="map" style="height: 350px; border: 1px solid #979797;"></div>
</div>
</body>
</html>
But the dragging of the marker doesn't work. How to make it work? This code is obviously taken from google samples.
By default markers are not draggable. You must set the draggable-option of the marker(s) to true.