Develop Reference

Ionic 2: Google Map Custom Controls Not Working

I have a google map implementation in Ionic2. Map and geolocation works fine. The errors occured only after I tried to implement custom controls/button into the map. I followed this link:
https://developers.google.com/maps/documentation/javascript/examples/control-custom
This is my js code (Constructor):
constructor(navController, platform, app) {
this.navController = navController;
this.platform = platform;
this.app = app;
platform.ready().then(() => {
this.initializeMap();
});
}
Custom control:
CenterControl(controlDiv, map){
// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.borderRadius = '3px';
controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to recenter the map';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Center Map';
controlUI.appendChild(controlText);
// Setup the click event listeners: simply set the map to Chicago.
controlUI.addEventListener('click', function() {
map.setCenter(chicago);
});
}
Map Initialization:
initializeMap() {
let locationOptions = {timeout: 10000, enableHighAccuracy: true};
navigator.geolocation.getCurrentPosition(
(position) => {
let options = {
// /new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(document.getElementById("map_canvas"), options);
var centerControlDiv = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, options);
centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
},
(error) => {
console.log(error);
}, locationOptions
);
}
My index.html:
<script src="http://maps.google.com/maps/api/js?key=<MY API KEY>"></script>
The error message given was this:
Where line 87 refers to:
var centerControl = new CenterControl(centerControlDiv, options);
I'm unable to set "CenterControl(){}" as "function CenterControl(){}" as I would encounter syntax error in that case.

I would define CenterControl like this:
export class CenterControl {
constructor(controlDiv, map){
(...)
}
}
instead of
CenterControl(controlDiv, map) {
(...)
}
and import then when you want to use it... Don't forget the export keyword.
Edit
If it's a method of your class, simply call it this way:
this.CenterControl(centerControlDiv, options);
centerControlDiv.index = 1;
this.map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

How to change color of Panel on expand of Ajax collapsible panel which is created at code - behind

I have created Panels and Ajax collapsible panel at code-behind in asp.net. Now i have to change color of panel(pnl1) on expand and collapse. How to implement this if done at runtime?
Runt time Code ->
{
Label lbl=new Label();
lbl.ID="Label1";
// lbl.Text = "Hello";
lbl.Attributes.Add("runat","server");
lbl.Style.Add("ForeColor","Crimson");
lbl.Style.Add("Font-Italic","true");
lbl.Style.Add("Font-Names","Comic Sans MS");
lbl.Style.Add("Font-Size","XX-Large");
Label lbl1 = new Label();
lbl1.ID = "lbl1";
lbl1.Width = 800;
lbl1.Height = 30;
lbl1.Attributes.Add("runat", "server");
lbl1.Style.Add("ForeColor", "Crimson");
lbl1.Style.Add("background-color", "Orange");
lbl1.Style.Add("text-align", "right");
lbl1.Style.Add("Font-Size", "X-Large");
Label lbl2 = new Label();
lbl2.ID = "lbl2";
lbl2.Width = 800;
lbl2.Height = 400;
lbl2.Attributes.Add("runat", "server");
lbl2.Style.Add("ForeColor", "Crimson");
lbl2.Style.Add("background-color", "Blue");
lbl2.Style.Add("Font-Names", "Comic Sans MS");
lbl2.Style.Add("Font-Size", "XX-Large");
Panel pnl1=new Panel();
pnl1.ID="pnl1";
pnl1.Width=500;
pnl1.Attributes.Add("runat","server");
Panel pnl2 = new Panel();
pnl2.ID = "pnl2";
pnl2.Width = 500;
pnl2.Attributes.Add("runat", "server");
Image img1= new Image();
img1.ID="img1";
img1.Attributes.Add("runat","server");
img1.Height=150;
img1.BorderWidth=1;
img1.ImageUrl="";
img1.BackColor = System.Drawing.Color.DarkBlue;
Image img2 = new Image();
img2.ID = "img2";
img2.Attributes.Add("runat", "server");
img2.Height = 150;
img2.BorderWidth = 2;
img2.ImageUrl = "";
img2.BackColor = System.Drawing.Color.DarkGray;
pnl1.Controls.Add(lbl1);
pnl2.Controls.Add(lbl2);
AjaxControlToolkit.CollapsiblePanelExtender cpe = new AjaxControlToolkit.CollapsiblePanelExtender();
cpe.ID = "ajax1";// +i.ToString();
//cpe.Attributes.Add("runat", "server");
cpe.TargetControlID = "pnl2";
cpe.ExpandedSize = 300;
cpe.CollapsedSize = 0;
cpe.ExpandControlID = "pnl1";
cpe.CollapseControlID = "pnl1";
cpe.AutoCollapse = false;
cpe.AutoExpand = false;
cpe.ScrollContents = true;
cpe.TextLabelID = "lbl1";
cpe.CollapsedText = "-";
cpe.ExpandedText = "+";
cpe.ExpandedImage = "";
cpe.CollapsedImage = "";
cpe.ExpandDirection = AjaxControlToolkit.CollapsiblePanelExpandDirection.Vertical;
MainDiv.Controls.Add(cpe);
MainDiv.Controls.Add(pnl1);
MainDiv.Controls.Add(pnl2);
MainDiv.Controls.Add(lbl);
}

We can achieve this using javascript.
In your above code (Server side code) add following line at the end of the code.
pnl1.Attributes.Add("onclick", "JavaScript:ChangeColor('MainContent_pnl1');");
and in your .aspx file, you can write something like following to change the color.
function ChangeColor(MainContent_pnl1) {
document.getElementById(MainContent_pnl1).style.color = "blue";
}
This code is not perfect, but will save your time..
Thanks,
Prashant Trambake

leaflet Js custom control button add (text, hover)

I followed this control-button-leaflet tutorial and it worked for me. Now I want to:
show some text when i hover over the button (like with the zoom buttons)
Change the color of the button when i hover over it
be able to write text inside the button instead of an image.
Here's the code:
var customControl = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
container.style.backgroundColor = 'white';
container.style.backgroundImage = "url(http://t1.gstatic.com/images?q=tbn:ANd9GcR6FCUMW5bPn8C4PbKak2BJQQsmC-K9-mbYBeFZm1ZM2w2GRy40Ew)";
container.style.backgroundSize = "30px 30px";
container.style.width = '30px';
container.style.height = '30px';
container.onclick = function(){
console.log('buttonClicked');
}
return container;
}
});
var map;
var readyState = function(e){
map = new L.Map('map').setView([48.935, 18.14], 14);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
map.addControl(new customControl());
}
window.addEventListener('DOMContentLoaded', readyState);

It seems you more need a Button than a div:
var container = L.DomUtil.create('input');
container.type="button";
Then you can easily set a mouseover text:
container.title="No cat";
And some Text instead of an image:
container.value = "42";
And you can use the mouse events to style the button:
container.onmouseover = function(){
container.style.backgroundColor = 'pink';
}
container.onmouseout = function(){
container.style.backgroundColor = 'white';
}
(you could of course do this last part with css, might be more elegant)
Full example: http://codepen.io/anon/pen/oXVMvy

Google Maps Searchbox Positioning (library angular-google-maps)

I try to position the Google Maps searchbox variable. A list shows all markers and under those markers there should be the searchbox. As the list grows the searchbox moves down. I use this library: Angular Google Maps
There is a directive called <ui-gmap-search-box>. But it must be inside <div id="map_canvas"> </div> and the list is outside of that div.

I think you should use the custom control functions provided by the Google Maps API.
You can position your controls on the top left corner of your maps, and create click event listeners for your control and do your work from there.
Refer to the documentation for more information on Custom Controls.
Also, I made some quick changes to this sample, and made this example here. Hope it helps.
var map;
//var chicago = new google.maps.LatLng(41.85, -87.65);
/**
* The CenterControl adds a control to the map that recenters the map on Chicago.
* This constructor takes the control DIV as an argument.
* #constructor
*/
controlUIs = [];
function CenterControl(controlDiv, map) {
locations = [new google.maps.LatLng(37.7833, -122.4167),
new google.maps.LatLng(37.3382, -121.8863),
new google.maps.LatLng(37.4223662, -122.0839445),
new google.maps.LatLng(37.8694772, -122.2577238),
new google.maps.LatLng(37.7919615, -122.2287941),
new google.maps.LatLng(37.6256441, -122.0413544)
];
for (var i = 0; i < locations.length; i++) {
// Set CSS for the control border
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.borderRadius = '3px';
controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to recenter the map';
controlUIs[i] = controlUI;
controlDiv.appendChild(controlUIs[i]);
// Set CSS for the control interior
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Location ' + i;
controlText.location = locations[i];
controlUIs[i].appendChild(controlText);
// Setup the click event listeners: simply set the map to
// Chicago
google.maps.event.addDomListener(controlUIs[i], 'click', function(click) {
map.setCenter(click.target.location)
});
}
}
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(37.6326196, -122.1568744)
}
map = new google.maps.Map(mapDiv, mapOptions);
// Create the DIV to hold the control and
// call the CenterControl() constructor passing
// in this DIV.
var centerControlDiv = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, map);
centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_LEFT].push(centerControlDiv);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<div id="map-canvas"></div>

I used the Google Maps API Search box instead of the library's search box.
main.js:
var searchBox = function() {
var input = document.getElementById('autocomplete');
var searchBox = new google.maps.places.SearchBox(input);
google.maps.event.addListener(searchBox, 'places_changed', function() {
});
}; // end searchBox
The function searchBox() is executed in $scope.init().
index.html:
<input id="autocomplete" ng-model="newPlace" type="text">

Add Multiple Custom Control buttons on Google Maps API v3

I have 2 Google maps on the same page and I am looking to add the same button to a map that already has one.
This button is to close the overlay that Google maps launches in, basically an exit button.
The Button works fine on the first map but I cant get the second one to work D:!
I know I have to change the variables because that's what I had to do to get 2 maps on one page. Also if someone else is good in Google Maps API v3 can you tell me why I need the "map" variable in the function HomeControl(controlDiv, map) { line?
Here is my code:
function HomeControl(controlDiv, map) {
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map.
controlDiv.style.padding = '5px';
// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<strong>Home</strong>';
controlUI.appendChild(controlText);
// Setup the click event listeners: simply set the map to Chicago.
google.maps.event.addDomListener(controlUI, 'click', function() {
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
});
}
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdivMap = document.getElementById("light");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdivMap.style.width = '100%';
mapdivMap.style.height = '100%';
initialize();
} else {
mapdivMap.style.width = '600px';
mapdivMap.style.height = '100%';
initialize();
}
};
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(43.464258,-80.52041),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('light'),
mapOptions);
var marker = new google.maps.Marker({
  position: map.getCenter(),
    map: map,
    title: 'Waterloo'
});
// Create the DIV to hold the control and call the HomeControl() constructor
// passing in this DIV.
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}
//*******************************************************
//************ Conestoga Map Page JavaScript ************
//*******************************************************
function Map2(Map2Div, map2) {
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map.
Map2Div.style.padding = '5px';
// Set CSS for the control border.
var Map2UI = document.createElement('div');
Map2UI.style.backgroundColor = 'white';
Map2UI.style.borderStyle = 'solid';
Map2UI.style.borderWidth = '2px';
Map2lUI.style.cursor = 'pointer';
Map2UI.style.textAlign = 'center';
Map2UI.title = 'Click to set the map to Home';
Map2Div.appendChild(Map2UI);
// Set CSS for the control interior.
var Map2Text = document.createElement('div');
Map2Text.style.fontFamily = 'Arial,sans-serif';
Map2Text.style.fontSize = '12px';
Map2Text.style.paddingLeft = '4px';
Map2Text.style.paddingRight = '4px';
Map2Text.innerHTML = '<strong>Home</strong>';
Map2UI.appendChild(Map2Text);
// Setup the click event listeners: simply set the map to Chicago.
google.maps.event.addDomListener(MapUI2, 'click', function() {
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
});
}
function detectBrowser2() {
var useragent2 = navigator.userAgent;
var mapdivMap2 = document.getElementById("light");
if (useragent2.indexOf('iPhone') != -1 || useragent2.indexOf('Android') != -1 ) {
mapdivMap2.style.width = '100%';
mapdivMap2.style.height = '100%';
initialize2();
} else {
mapdivMap2.style.width = '600px';
mapdivMap2.style.height = '100%';
initialize2();
}
};
function initialize2() {
var mapOptions2 = {
zoom: 8,
center: new google.maps.LatLng(43.464258,-80.52041),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map2 = new google.maps.Map(document.getElementById('light'),
mapOptions2);
var marker2 = new google.maps.Marker({
  position: map.getCenter(),
    map: map2,
    title: 'Waterloo'
});
// Create the DIV to hold the control and call the HomeControl() constructor
// passing in this DIV.
var Map2Div = document.createElement('div');
var Map2 = new Map2(Map2Div, map2);
Map2Div.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(Map2Div);
}