We Keep Coding

Customized and numbered icons + info windows with Google Maps Api 3

First want to say that I'm new in this and don't have a lot of Javascript knowledge. Just need to create a website but can't afford paying someone else do it for me!
What I'm trying to build is a map where I can locate multiple different markers that I created myself. They are .png files no bigger than 20KB. I have loaded them to my server inside images/numbers/. They look like this:
I will probably need more than 50, each one also with its own infowindow.
This is an example I tried to edit, but couldn't make it work:
https://developers.google.com/maps/documentation/javascript/tutorials/custom-markers?hl=es
Here the javascript code I have so far:
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(41.388426, 2.171339),
mapTypeId: 'roadmap'
});
var iconBase = 'images/numbers/';
var icons = {
001: {
icon: iconBase + '001.png'
},
002: {
icon: iconBase + '002.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
var features = [
{
position: new google.maps.LatLng(41.388426, 2.171339),
type: '001'
}, {
position: new google.maps.LatLng(41.387815, 2.139496),
type: '002'
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
}
Hope you can help!
Thankssss

The main problem I can see is in your for loop.
Try to replace it with this:
for (var i = 0, i<features.length; i++) {
addMarker(features[i]);
}
Then, like #MrUpsidown mentioned in the comments, you should define your objects correctly in the icons array.
var icons = {
'001': {
icon: iconBase + '001.png'
},
'002': {
icon: iconBase + '002.png'
}
};
Since in features, it is defined as string, it should be the same in icons.
The rest looks to be ok.

Google Maps API "Listings By"

I'm using the google places API and it's working fine except it keeps displaying some kind of "Listings by" text. My map is only 500x400 so it shows up right into the center of the screen which looks really horrible.
I guess it's just some ad and it must be displayed (according to docs). But is there anyway to change it's position?
Related here and here
Note I'm already using one PlacesService object so it's not an issue of too many. It's just one line that goes out about 300px into the map.
Link to screenshot http://i.imgur.com/I1Eh5KM.png
createAmenitiesMarkers(type) {
var _this = this;
this.placesService = this.placesService || new google.maps.places.PlacesService(this.map);
this.placesService.nearbySearch({
location: new google.maps.LatLng(
this.address.location.coordinates[1],
this.address.location.coordinates[0]
),
radius: 1000,
type: [type]
}, function(results, status) {
var i, ii;
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (i = 0, ii = results.length; i < ii; i++) {
_this.amenitiesMarkers.push(new google.maps.Marker({
map: _this.map,
position: results[i].geometry.location,
title: results[i].name,
icon: {
url: 'http://mt.google.com/vt/icon/name=icons/spotlight/' + type + '_search_L_8x.png&scale=1'
}
}));
}
}
});
},

I don't know of any way to control this position using the API, but you can control positioning of other UI elements. If in your example you set:
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
},
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
},
when initialising your map, the "Listing By" notice will appear just above the google copyright notice, which looks way better.

accessing objects in $.getJSON

So, i used $.getJSON to get the objects from openweathermap API. Below is what I get in my console when I try to type:
console.log(data[0])
I want to access 'icon'. I tried:
data[0]["icon"] and data[0].icon
However, it was to no avail.
Can anyone help me? Thanks in advance!
$.getJSON
(edit #1)
Here is my code:
$.getJSON(weatherlink, function(json1) {
$.each(json1, function(key, data) {
// Creating a marker and putting it on the map
var marker = new MarkerWithLabel({
position: points,
labelContent: title,
labelAnchor: new google.maps.Point(22, 20),
labelClass: "label",
// icon: "http://openweathermap.org/img/w/" +data[0]["icon"]+ ".png"
});
markersWeather.push(marker);
marker.setMap(map);
console.log(data[0]);
});
})
weatherlink is a variable containing the link to the API.
(edit #2)
this is how the entire data looks like
(edit #3)
it is giving me undefined when i do either way.

Start at json1[0] instead of data:
var icon;
json1 = [{
"icon": "04n"
}];
$.each(json1, function() {
icon = "<img src = http://openweathermap.org/img/w/" + json1[0].icon + ".png>"
});
$('#output').html(icon);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>

Try this(data[key]['icon']):
$.getJSON(weatherlink, function(json1) {
$.each(json1, function(key, data) {
// Creating a marker and putting it on the map
var marker = new MarkerWithLabel({
position: points,
labelContent: title,
labelAnchor: new google.maps.Point(22, 20),
labelClass: "label",
// icon: "http://openweathermap.org/img/w/" +data[0]["icon"]+ ".png"
});
markersWeather.push(marker);
marker.setMap(map);
console.log(data[key]['icon']);
});
})

json1 (Object) is inside loop you can use a condition like
if ( key == 'icon' ) or if ( json1.hasOwnProperty( 'icon' ) ),
if it matches a condition use variable like data or json1[key]
If you want to get the value outside of the loop, use json1['icon'].

ngmap - drawing a dynamic polygon

I'm having an issue drawing a dynamic polygon using ngmap. Basically I have a map with an on-click event as follows
<map center="<% latitude %>, <% longitude %>" zoom="2" on-click="placeMarker()">
and the "placeMarker" method is inside my controller. Now, the following code will correctly place markers on the map and turn them into a polygon the moment you place the 4th marker...
$scope.placeMarker = function(e)
{
var marker = new google.maps.Marker({position: e.latLng, map: $scope.map});
$scope.coordinates.push( [Number(e.latLng.J),Number(e.latLng.M)] );
if( $scope.coordinates.length == 4 )
{
$scope.createPolygon();
}
}
$scope.createPolygon = function()
{
$scope.GoogleMap.polygons.push( $scope.coordinates );
$scope.coordinates = [];
}
... but when I try to refactor the code to build the polygon when the user clicks back onto the first marker they placed nothing happens. The event listener fires, the logic appears OK but the polygon never appears
$scope.placeMarker = function(e)
{
var marker = new google.maps.Marker({position: e.latLng, map: $scope.map});
$scope.coordinates.push( [Number(e.latLng.J),Number(e.latLng.M)] );
if( $scope.coordinates.length == 1 )
{
google.maps.event.addListener(marker, 'click', function () {
$scope.createPolygon();
});
}
}
$scope.createPolygon = function()
{
$scope.GoogleMap.polygons.push( $scope.coordinates );
$scope.coordinates = [];
}
I'm sure this is probably a limitation in my generic JS knowledge. It has me stumped. Can anybody please advise?

TOC with Label layer in ArcGIS JavaScript

I am using ArcGIS JavaScript 3.7 API's and i am using agsjs.dijit.TOC control and it is working fine but when i added Label Layer in my map that time Label layer is coming fine but TOC is not working Properly.
While Pressing the checkbox to On-Off the Layer it is working fine but regarding the feature layer i added one Label layer that is not getting On-Off
Can anyone tell me how to Switch-Off or On the Label Layer.
Thanks in Advance.
I am Pasting some code..
Var load = function () {
require(["dojo/_base/Color", "esri/symbols/TextSymbol", "esri/renderers/SimpleRenderer", "esri/renderers/ScaleDependentRenderer"],
function (Color, TextSymbol, SimpleRenderer, ScaleDependentRenderer) {
var statesColor = new Color("#666");
var fieldLabel = new TextSymbol().setColor(statesColor);
fieldLabel.font.setSize("4pt");
fieldLabel.font.setFamily("arial");
statesLabelRenderer = new SimpleRenderer(fieldLabel);
return statesLabelRenderer;
});
}
var layers = [];
var layer = new esri.layers.FeatureLayer(url, {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
layers.push(layer);
layerInfo.push({ layer: layer, title: item["LookupDisplayDesc"], boxLabel: item["LookupDisplayDesc"], id: layer.id, checked: layer.visibleAtMapScale, slider: true });
if (item["LookupLongDesc"] != null && item["LookupLongDesc"] != "") {
var fieldNames = item["LookupLongDesc"].split(",");
var labelFields = "";
for (var i = 0 ; i < fieldNames.length ; i++) {
labelFields = labelFields + "${" + fieldNames[i].trim() + "},";
}
labelFields = labelFields.slice(0, -1).trim();
load();
var labelLayer = new esri.layers.LabelLayer();
labelLayer.addFeatureLayer(layer, statesLabelRenderer, labelFields);
layers.push(labelLayer);
}
}
map.addLayers(layers);
dojo.connect(map, 'onLayersAddResult', function (results) {
if (layerInfo.length > 0) {
var legendDijit = new esri.dijit.Legend({
map: map,
layerInfos: layerInfo
}, "legendDiv");
legendDijit.startup();
}
toc = new agsjs.dijit.TOC({
map: map,
layerInfos: layerInfo
}, 'LayerDiv');
toc.startup();
});

Not familiar with how TOC works, I build my layer logic manually. If you go the manual route you can just use show and hide like below or use setVisibleLayers like this.
A simple show and hide in your layer logic would be:
labelLayer.hide();
labelLayer.show();