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'].
Related
tried to make some markers on my google map but it wasnt a number so it didnt work, i tried to put parseFloat to convert it to a number but it still didnt work.
JavaScript code
var urlApi = "https://api.jcdecaux.com/vls/v1/stations?contract=lyon&apiKey=";
function initMap(){
//map options
var options ={
zoom:13,
center:{lat:45.7563172, lng:4.827523}
}
//new map
var map = new google.maps.Map(document.getElementById('map'),options);
//new markers
$.getJSON(urlApi, function(data) {
data.forEach(function(item) {
new google.maps.Marker({
position : {
lat : (parseFloat(item.lat)),
Ing : (parseFloat (item.Ing))
},
})
})
})
};
You are creating a new marker but never using it :
new google.maps.Marker({ // This doesn't do anything by itself
As mentioned in the doc, you need to use setMap :
// To add the marker to the map, call setMap();
marker.setMap(map);
So your last code block should look like this :
//new markers
$.getJSON(urlApi, function(data) {
data.forEach(function(item) {
var marker = new google.maps.Marker({
position: {
lat: (parseFloat(item.lat)),
lng: (parseFloat(item.lng))
},
})
marker.setMap(map);
})
})
};
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.
I need to open info window on map, when I click a link on the map page( not marker it self). Here is my code so far,
var marker = new MarkerWithLabel({
map: resultsMap,
id: label,
position: latlng,
title: "Address",
// radius: int_radius ,
draggable: false,
labelAnchor: new google.maps.Point(10, 35),
labelContent: label,
labelClass: "labels",
labelInBackground: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
icon: image,
customInfo: "dynamic data for each marker"
});
And calling function
function bindInfoWindow(resultsMap, marker, infoWindow) {
google.maps.event.addListener(marker, 'click',
function(){
infoWindow.setContent(marker.customInfo);
infoWindow.open(resultsMap,marker);
});
$(document).on('click','.store-title', function(){
var linkId = $(this).attr('id');
infoWindow.setContent(marker.customInfo);
infoWindow.open(resultsMap,marker);
});
}
In my situation I can't use an array to store markers. Is there way to get marker.customInfo by using condition like below? Please Note When I click on marker it works. I need it for latter onclick function.
infoWindow.setContent(marker.customInfo where marker.id==linkId);
This might work, keeping it inside your bindInfoWindow as you currently have it:
$(document).on('click','.store-title', function() {
var linkId = $(this).attr('id');
if (linkId == marker.id) {
google.maps.event.trigger(marker, 'click');
}
});
Notice I'm passing the marker as a data parameter to the click event handle, but you maybe don't need to do that. - not needed it seems.
And then I just trigger the click on that marker, rather than repeat the code that you've already got in the marker's click handler.
I'm assuming the id property you're adding to each marker is the same as the 'id' attribute you're reading on your links. If not, can you have some identical property on the markers and links that you can check.
I am trying to populate some map points on a canvas which have been read from a JSON file.
I can create one set of points fine but I want to add different icons depending on what kind of point it is. I have tried evaluating the JSON data the map will not load with more than on kind of icon.
My code is as follows:
$.each( data.markers, function(i, marker) {
$('#map_canvas').gmap('addMarker', {
'position': new google.maps.LatLng(marker.latitude, marker.longitude),
if (marker.company == "Capgemini") {
'icon':new google.maps.MarkerImage("capico.png"),
} else if (marker.company == "Accenture") {
'icon':new google.maps.MarkerImage("accico.png"),
}
'bounds': true
}).click(function() {
//$('#map_canvas').gmap('openInfoWindow', {
// 'content': marker.content
$.mobile.changePage("#details");
Not sure where im going wrong here.
Any help greatly appreciated
try this code
var customIcons = {
"Capgemini": {
icon: 'path_to_your_marker_pictures/capico.png',
},
"Accenture": {
icon: 'path_to_your_marker_pictures/accico.png',
}
};
var icon = customIcons[marker.company] || {};
var marker = new google.maps.Marker({
position: point,
icon: icon.icon,
});
Best,
Darko
We have a dynamic json feed that is parsed into markers on our google map.
the parsing function looks something like this:
function parse_json(json) {
// alert('start parse: '+json.length);
if (json.length > 0) {
var markers = [];
for (i=0; i<json.length; i++) {
var report = json[i];
//alert(report.longitude +','+report.latitude);
// addLocation(report);
markers[i] = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(report.latitude, report.longitude),
pop_title: report.area1.name,
pop_body: '<b>'+ report.spot.name +'</b>'+
'<br>'+ report.report_description,
draggable: false,
title: 'title',
zIndex: i,
icon: '/images/map_icon.png'
});
markers[i].metadata = {type: "point", id: report.id};
google.maps.event.addListener(markers[i], 'click', onMarkerClick);
}
};
i have added metadata info to the markers created so their id is the report.id - but i want to use the google.maps.event.trigger(SOMETHING_HERE, 'click'); construct to trigger a click event on a given marker when a button outside of the map is pressed. how do i get the object name, or is there a way to do this using the object's id?
thanks!
If you declare your markers array at a higher scope than your parse_json function, then you will be able to refer to it later, something like this:
var markers = new Array();
function parse_json(json) {
//code removed for brevity
}
Then later, when you need to find the marker you want to fire a click event against, you could use the id like this:
for ( var i = 0; i < markers.length; i++ ) {
var mkr = markers[i];
if ( mkr.metadata.id === idYouAreSearchingFor ) {
//do whatever is needed here and fire your event
}
}