Example from Bing map V8 official documentation. By default infobox is given false but inspite its displaying for the first time.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type='text/javascript'
src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
<script type="text/javascript">
var map, clusterLayer, infobox;
function GetMap() {
map = new Microsoft.Maps.Map('#myMap', {
credentials: 'Bing Map Key'
});
//Add an infobox to the map.
infobox = new Microsoft.Maps.Infobox(map.getCenter(), { visible: false });
infobox.setMap(map);
Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
//Create a clustering layer
clusterLayer = new Microsoft.Maps.ClusterLayer(createCustomPushpins(100), {
clusteredPinCallback: createCustomClusterPushpins,
callback: createPushpinList
});
map.layers.insert(clusterLayer);
});
}
function createCustomPushpins(size) {
//Generate random pushpins within the map bounds.
var pins = Microsoft.Maps.TestDataGenerator.getPushpins(size, map.getBounds());
for (var i = 0; i < size; i++) {
//Create a title for each pushpin.
pins[i].setOptions({ title: 'Pushpin #' + i });
//Add handler for the pushpin click event.
Microsoft.Maps.Events.addHandler(pins[i], 'click', pushpinClicked);
}
return pins;
}
function createCustomClusterPushpins(cluster) {
//Create a title for the cluster.
cluster.setOptions({
title: 'Cluster of ' + cluster.containedPushpins.length + ' pins'
});
//Add handler for the cluster click event.
Microsoft.Maps.Events.addHandler(cluster, 'click', pushpinClicked);
}
function pushpinClicked(e) {
//Show an infobox when a pushpin is clicked.
showInfobox(e.target);
}
function createPushpinList() {
//Create a list of displayed pushpins each time clustering layer updates.
if (clusterLayer != null) {
infobox.setOptions({ visible: false });
//Get all pushpins that are currently displayed.
var data = clusterLayer.getDisplayedPushpins();
var output = [];
//Create a list of links for each pushpin that opens up the infobox for it.
for (var i = 0; i < data.length; i++) {
output.push("<a href='javascript:void(0);' onclick='showInfoboxByGridKey(", data[i].gridKey, ");'>");
output.push(data[i].getTitle(), "</a><br/>");
}
document.getElementById('listOfPins').innerHTML = output.join('');
}
}
function showInfoboxByGridKey(gridKey) {
//Look up the cluster or pushpin by gridKey.
var clusterPin = clusterLayer.getClusterPushpinByGridKey(gridKey);
//Show an infobox for the cluster or pushpin.
showInfobox(clusterPin);
}
function showInfobox(pin) {
var description = [];
//Check to see if the pushpin is a cluster.
if (pin.containedPushpins) {
//Create a list of all pushpins that are in the cluster.
description.push('<div style="max-height:75px;overflow-y:auto;"><ul>');
for (var i = 0; i < pin.containedPushpins.length; i++) {
description.push('<li>', pin.containedPushpins[i].getTitle(), '</li>');
}
description.push('</ul></div>');
}
//Display an infobox for the pushpin.
infobox.setOptions({
title: pin.getTitle(),
location: pin.getLocation(),
description: description.join(''),
visible: true
});
}
</script>
</head>
<body>
<div id="myMap" style="position:relative; width:600px; height:400px;"></div>
<br />
<div id="listOfPins" style="max-height:250px;width:250px;overflow-y:scroll;"></div>
</body>
</html>
As per official documentation, we have to pass visible false while instantiating the infobox object (infobox = new Microsoft.Maps.Infobox(map.getCenter(), { visible: false });) Any suggestions where I am going wrong?
Strange, just tried the code provided in IE11, Edge, Chrome and Firefox. It worked correctly in all browsers other than Chrome. Not sure why Chrome is acting differently. Will have the team look into this. Thanks for reporting.
Related
I'm trying to loop through Google Place IDs and gather data from each place and then output the place details into one single JSON file which could later be imported into a map. The importing stage is not a concern but I'm struggling to get the data into the JSON file to begin with. What I have currently is below.
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&key=APIKEY"></script>
var placeid_list = [{
"placeid": 'ChIJryijc9s0K4gRG9aU7SDTXdA',
}, {
"placeid": 'ChIJaZ6Hg4iAhYARxTsHnDFJ9zE',
}, {
"placeid": 'ChIJl64IQXrYzUwR8CVOTRf_h3o',
}, {
"placeid": 'ChIJBTMkuph-zkwR9oEF8Nv3Z0o',
}, {
"placeid": 'ChIJ4QbSBj8IzkwRGi0ILu03_VA',
}, {
"placeid": 'ChIJc2nSALkEdkgRkuoJJBfzkUI',
}, {
"placeid": 'ChIJmzrzi9Y0K4gRgXUc3sTY7RU',
}];
function setPlaces() {
var json = placeid_list;
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i];
createPlace(data);
}
}
function createPlace(data) {
var service = new google.maps.places.PlacesService();
service.getDetails({
placeId: data.placeid
}, function (result, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
placeResults(data, result);
});
}
function placeResults(data, result) {
console.log(result.name);
}
Currently I'm just trying to output each of the Place names into a console.log but nothing seems to be showing. It doesn't look like I'm getting any errors in the console either so I'm not too sure where I'm going wrong.
Looking at Google's documentation, I'm not sure if I have to make use of
console.log(JSON.stringify(response.data));
Would this help me to put the details of each of the places into one large JSON file? I'm not too sure how I can implement it with what I currently have. I don't have a great deal of expertise in using javascript but I'm hoping that I'm not too far away from a solution. Thanks
You a typo in youre code:
var service = new google.maps.places.PlacesService();
Per the documentation:
Constructor
PlacesService(attrContainer)
Parameters:
attrContainer: HTMLDivElement|Map
Creates a new instance of the PlacesService that renders attributions in the specified container.
The PlacesService constructor has a required argument, either a google.maps.Map object or an HTMLDivElement that can be used to render attributions.
So the referenced line should be:
var service = new google.maps.places.PlacesService(map);
Or:
var service = new google.maps.places.PlacesService(document.getElementById("attributionDiv");
// where attributionDiv is a div that is displayed on your page
Proof of concept fiddle
Outputs:
Alo
Ottawa International Airport
lastminute.com London Eye
Four Seasons Hotel San Francisco
CN Tower
Glenn P Cowan, Chartered Professional Accountant
KB Media Corp
code snippet:
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: -33.866,
lng: 151.196
},
zoom: 15,
});
const request = {
placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4",
fields: ["name", "formatted_address", "place_id", "geometry"],
};
const infowindow = new google.maps.InfoWindow();
const service = new google.maps.places.PlacesService(map);
var placeid_list = [{
"placeid": 'ChIJryijc9s0K4gRG9aU7SDTXdA',
}, {
"placeid": 'ChIJaZ6Hg4iAhYARxTsHnDFJ9zE',
}, {
"placeid": 'ChIJl64IQXrYzUwR8CVOTRf_h3o',
}, {
"placeid": 'ChIJBTMkuph-zkwR9oEF8Nv3Z0o',
}, {
"placeid": 'ChIJ4QbSBj8IzkwRGi0ILu03_VA',
}, {
"placeid": 'ChIJc2nSALkEdkgRkuoJJBfzkUI',
}, {
"placeid": 'ChIJmzrzi9Y0K4gRgXUc3sTY7RU',
}];
function setPlaces() {
var json = placeid_list;
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i];
createPlace(data);
}
}
function createPlace(data) {
var service = new google.maps.places.PlacesService(map);
console.log(data);
service.getDetails({
placeId: data.placeid,
fields: ["name", "formatted_address", "place_id", "geometry"],
}, function(result, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
placeResults(data, result);
});
}
function placeResults(data, result) {
console.log(result.name);
document.getElementById("placeResults").innerHTML += result.name + "<br>";
}
setPlaces();
}
window.initMap = initMap;
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 50%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Place Details</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="placeResults"></div>
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises
with https://www.npmjs.com/package/#googlemaps/js-api-loader.
-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=places&v=weekly" defer></script>
</body>
</html>
I am very new to chrome extensions and react. An overview of what I am doing is pretty straight forward. I have a chrome extension which takes a screenshot of the activeTab and I want to send that screenshot from the extension to my react app.
From what I understand, I need to dispatch an event from the extension and have the react app listen to it. I have an event listener in the index.html of my react app to listen to events that are dispatched by the extension. I have been unsuccessful in my attempts.
Here's what I have so far:
Chrome extension
popup.js
let tabImage = document.getElementById('tabImage');
let capturedImage = null;
tabImage.onclick = () => {
chrome.tabs.captureVisibleTab(null, (image) => {
document.dispatchEvent(new CustomEvent('csEvent', { data: image })) // send image to react app
viewScreenshot(image);
});
}
//Create a new window in the browser with the captured image
viewScreenshot = (capturedImage) => {
const b64 = capturedImage;
const contentType = 'image/jpeg';
const byteCharacters = atob(b64.substr(`data:${contentType};base64,`.length));
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += 1024) {
const slice = byteCharacters.slice(offset, offset + 1024);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, { type: contentType });
const blobUrl = URL.createObjectURL(blob);
window.open(blobUrl, '_blank');
}
popup.html
<html lang="en">
<head>
</head>
<body>
<button id="tabImage">Get a screenshot!</button>
<script src='popup.js'></script>
</body>
</html>
reactJS app
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Shots</title>
</head>
<body>
<iframe id="qa_films" src="./demo_course_classic_player_html5-flash-AMP/story.html"
style="position:absolute ;top:0; left:0; bottom:0; right:0; width:100%; height:90%; border:none; margin:0 auto; padding:0; z-index: 0; overflow:hidden; "></iframe>
<div id="screenshot"></div>
</body>
<script>
document.body.addEventListener('csEvent', (event) => {
console.log(event);
})
</script>
</html>
I would like to know which part I am doing it wrong or is there a better way of implementing what I'm trying to achieve. Any help is appreciated. Thanks!
I have a number of markers on a map using angular-google-maps.
Can someone please tell me how to you change the icon image of a marker when you click on it?
My HTML looks like this:
<div class="map-wrapper" flex>
<ui-gmap-google-map flex center='map.center' zoom='map.zoom' class="ui-gmap-google-map" control="control">
<ui-gmap-markers models="markers" coords="'self'" icon="'icon'" doRebuildAll="true"></ui-gmap-markers>
</ui-gmap-google-map>
</div>
My controller code to populate markers:
function mapFilter(dealerList) {
angular.forEach(dealerList, function (dlr) {
if (dlr.Category_type_id == $scope.categoryType) {
var marker = {
id: dlr.Site_owner_id + "_" + dlr.Site_locationseq,
icon: "/img/dealerlocator/pin_icon.png",
events: {
click: function (marker, eventName, model, arguments) {
gotoAnchor(marker.key);
}
},
latitude: dlr.Site_address_map_latitude,
longitude: dlr.Site_address_map_longitude,
showWindow: false
};
$scope.markers.push(marker);
}
});
}
function gotoAnchor(x) {
var newHash = 'anchor_' + x;
if ($location.hash() !== newHash) {
// set the $location.hash to `newHash` and
// $anchorScroll will automatically scroll to it
$location.hash('anchor_' + x);
// Update the map marker icons
angular.forEach($scope.markers, function (mkr) {
if (mkr.id == x) {
mkr.icon = "/img/dealerlocator/pin_icon_selected.png";
} else {
mkr.icon = "/img/dealerlocator/pin_icon.png";
}
});
expandDealer(x);
} else {
// call $anchorScroll() explicitly,
// since $location.hash hasn't changed
$anchorScroll();
expandDealer(x);
}
};
In the gotoAnchor function above, you can see here that I've changed the icon in the markers, but this doesn't change on the map.
You'll need to debug your ($location.hash() !== newHash) to see if its making it through to the forEach. This plunker demo implements the method below, and the icons are updating on click;
function gotoAnchor(x) {
// Update the map marker icons
angular.forEach($scope.randomMarkers, function (mkr) {
if (mkr.id == x) {
mkr.icon = "https://mapicons.mapsmarker.com/wp-content/uploads/mapicons/shape-default/color-ffc11f/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/cserkesz_ikon.png";
} else {
mkr.icon = 'https://mapicons.mapsmarker.com/wp-content/uploads/mapicons/shape-default/color-128e4d/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/crow2.png';
}
});
};
There's this box that I can get to go away under my maps. I have a main map for my index and another map for show. I have the map options different for both of them. When I look at my page source I see my scripts for both maps. I can't figure out why this is happening.
<script type="text/javascript" charset="utf-8">
Gmaps.map = new Gmaps4RailsGoogle();
Gmaps.load_map = function() {
Gmaps.map.map_options.auto_adjust = true;
Gmaps.map.initialize();
Gmaps.map.markers = [{"description":"test, 217 cleveland ave , liverpool, This is some additional information.","lat":43.1155,"lng":-76.2292},{"description":"bah, 215 university place, syracuse, ","lat":43.0396,"lng":-76.1355}];
Gmaps.map.markers_conf.do_clustering = true;
Gmaps.map.create_markers();
Gmaps.map.adjustMapToBounds();
Gmaps.map.callback();
};
window.onload = function() { Gmaps.loadMaps(); };
</script>
<script type="text/javascript" src="//maps.google.com/maps/api/js?v=3.8&sensor=false&libraries=geometry&language=&hl=®ion="></script>
`<script type="text/javascript" charset="utf-8">
Gmaps.map = new Gmaps4RailsGoogle();
Gmaps.load_map = function() {
Gmaps.map.map_options.auto_adjust = true;
Gmaps.map.map_options.auto_zoom = false;
Gmaps.map.map_options.zoom = 10;
Gmaps.map.map_options.detect_location = true;
Gmaps.map.map_options.center_on_user = false;
Gmaps.map.initialize();
Gmaps.map.markers = [{"description":"test, 217 cleveland ave , liverpool, This is some additional information.","lat":43.1155,"lng":-76.2292},{"description":"bah, 215 university place, syracuse, ","lat":43.0396,"lng":-76.1355}];
Gmaps.map.create_markers();
Gmaps.map.adjustMapToBounds();
Gmaps.map.callback();
};
window.onload = function() { Gmaps.loadMaps(); };
</script>`
I fixed it by making .map_container twice as small as the map height. My map height is 400px and my map container height is 200px. I still don't know why that would happen.
How can I horizontally expand a combobox pull-down display?
My actual data is: ARAMEX1234
But the pull-down display only shows: ARAMEX123
I need to support the following browsers: IE 6, 7, 8.
I tested it using Firefox and it works out of the box. However, my application will be run on IE and never on FF.
Here is the code (jsp file content):
<%# page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<script type="text/javascript" src="<c:url value="/js/jquery/grid.locale-ja.js" />" charset="UTF-8"></script>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/jquery/ui.jqgrid.css" />"/>
<script src="<c:url value="/js/jquery/jquery.jqGrid.min.js" />" type="text/javascript"></script>
<table id="rowed5"></table>
<script type="text/javascript" charset="utf-8">
var lastsel2;
$("#rowed5").jqGrid({
datatype: "local",
height: 250,
colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: true},
{name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
{name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX;AR1:ARAMEX123456789"}},
{name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}
],
caption: "Input Types",
resizeStop: function (newwidth, index) {
var selectedRowId = $("#rowed5").getGridParam('selrow');
if(selectedRowId) {
//resize combobox proportionate to column size
var selectElement = $('[id="' + selectedRowId + '_ship"][role="select"]');
if(selectElement.length > 0){
$(selectElement).width(newwidth);
}
}
}
,
onSelectRow: function(id){
if(id && id!==lastsel2){
//$(this).saveRow(lastsel2, true);
$(this).restoreRow(lastsel2);
$(this).editRow(id,true);
lastsel2=id;
$(this).scroll();
//resize combobox proportionate to column size
var rowSelectElements = $('[id^="' + id + '_"][role="select"]');
if(rowSelectElements.length > 0) {
$(rowSelectElements).each(function(index, element){
var name = $(element).attr('name');
var columnElement = $('#rowed5_' + name);
if(columnElement.length > 0) {
var columnWidth = $(columnElement).width();
$(element).width(columnWidth);
}
});
}
}
}
});
var mydata2 = [
{id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"},
{id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"},
{id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"},
{id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX123456789"},
{id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx"},
{id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx"},
{id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX"},
{id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT"},
{id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx"}
];
for(var i=0;i < mydata2.length;i++) {
$("#rowed5").jqGrid('addRowData',mydata2[i].id,mydata2[i]);
}
</script>
This is a well-known bug in IE. You can fix it by temporarily resizing the select input on mouseover or on focus as described in the following article: Select Cuts Off Options In IE (Fix)
In your specific example, the code might look like this:
$("#rowed5 select").live({
focus: function () {
$(this).
data("origWidth", $(this).css("width")).
css("width", "auto");
},
blur: function () {
var $this = $(this);
$this.css("width", $this.data("origWidth"));
}
});