We Keep Coding

Google Maps using custom icon for marker sometimes doesn't show up

I am getting weird and unpredictable behavior when specifying an icon to use with google.maps.Markers. Basically, the markers show up (with default icon) if I don't specify an icon property, but if I do specify the icon property, no markers show up (although I have other case where I can get a custom icon to show, so that's why it's weird).
Here's the relevant code:
function initMap() {
var markers = route_log.map(function(segment) {
return new google.maps.Marker({
position: new google.maps.LatLng(segment.lat, segment.lng)
});
});
...calculate bounds..
var map = new google.maps.Map(document.getElementById('route_log_map_map'), {
position: bounds.getCenter(),
zoom: 15
});
...other unrelated code...
for(i=0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
This is called with:
<script src="https://maps.googleapis.com/maps/api/js?key=...key...&callback=initMap" async="" defer=""></script>
and the above results in:
Obviously that's a lousy marker to use in this case (there's almost 2000 points), so if I change the marker creation to be like this:
var markers = route_log.map(function(segment) {
return new google.maps.Marker({
position: new google.maps.LatLng(segment.lat, segment.lng),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 1
}
});
});
the markers don't show up (and there's no errors either) (note those blue circles are unrelated to this code):
EDIT
This is interesting. It works if the array I'm building the markers from has only one element, but fails to display if it has more than one. E.g. this works and displays one marker:
var route_log = [
{lat: 41.86219805, lng: -71.04886590000001}
];
var markers = route_log.map(function(segment) {
return new google.maps.Marker({
position: new google.maps.LatLng(segment.lat, segment.lng),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
}
});
});
but this displays no markers (only change is to add another element to the array):
var route_log = [
{lat: 41.86219805, lng: -71.04886590000001},
{lat: 41.87219805, lng: -71.05886590000001}
];
var markers = route_log.map(function(segment) {
return new google.maps.Marker({
position: new google.maps.LatLng(segment.lat, segment.lng),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
}
});
});

Wow.
I have position in the options to the new google.maps.Map call. It should be center, which is required. position is not even a valid option for google.maps.MapOptions.
I blame the Google Maps API for this one. :-)

Google Maps v3 move Markers on top when updated

My App show couriers on Google Maps and as soon as the application receive a GPS update for one of the courier I keep the Map updated with the new courier position. It happen every second for each of my couriers.
The issue is that every time a courier is updated it is moved on top of all others causing a "disco" effect on the map (because couriers may have differe marker color).
I wish to keep the Marker at the same position (in terms of zIndex or whatever) when its position is updated.
How can I do that?
I don't think any code is required here... I do nothing special than create markers and update markers, but I'm pretty sure a comment will arrive with: "show code", so here we are:
funciton createCourierMarkers() {
var couriersStorage = [];
for (var i = 0; i < couriers.length; i++) {
var courier = couriers[i];
var status = courier.status || 'free';
var courierPosition = _getCourierPosition(courier);
var icon = MarkersService.getCourierIcon(status);
var courierMarker = new google.maps.Marker({
map: map,
position: courierPosition,
icon: icon,
zIndex: 200,
type: 'courier',
id: courier.id,
status: status
});
couriersStorage.push(courierMarker);
}
}
function updateCourierMarkerPosition(courier, marker) {
var courierPosition = _getCourierPosition(courier);
marker.setPosition(courierPosition);
}

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.

Can't remove map part of function

I have some code heavily borrowed from Google's examples. All I'm using is the Google Places results part of this code, so I'd like to remove the map part out. So, when I do, it throws an error of Cannot read property 'innerHTML' of undefined, since I'm guessing it's needed for the var service function.
Any help removing this area of code?
var map;
var infowindow;
// Create Google Map with location at center
function initMap(latitude, longitude) {
var location = {lat: latitude, lng: longitude};
console.log(location);
// REMOVE THIS SECTION
map = new google.maps.Map(document.getElementById('map'), {
center: location,
zoom: 15
});
// ^^ REMOVE THIS SECTION
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: location,
radius: 3200,
types: ['school']
}, callback);
}
// List nearby places
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
listPlaces(results[i]);
}
}
}

Well, it's called "Googgle Maps API" for a reason :-)
In addition, you can hide the map, but the terms of service are including a requirement to show the "powered by Google" logo somewhere on your page.

you can use
<div id="map" style='display:none'></div>
on your map. That way it will still be there for other code to work and won't show up on your page

Ilya is correct that the license by which you use Googles data requires attribution (see https://developers.google.com/maps/documentation/javascript/places?hl=en#LogoRequirements).
A similar question has been asked before here: google places library without map
To get rid of the map, I would think you could do something like this:
map = new google.maps.Map(document.createElement('div'), {
center: location,
zoom: 15
});
This way you never add anything to the DOM. Just remember to add the Powered by Google graphic. (https://developers.google.com/places/documentation/images/powered-by-google.zip)

According to the documentation:
a map isn't required, but if one isn't displayed you must show a "Powered by Google" logo with that data:
If your application displays Google Places API data on a page or view that does not also display a Google Map, you must show a "Powered by Google" logo with that data.
The PlacesService Constructor takes either a google.maps.Map object or a HTMLDivElement (you don't have to provide a map, you can provide a div to display the manadatory attributions)
Constructor
PlacesService(attrContainer:HTMLDivElement|Map) Creates a new instance of the PlacesService that renders attributions in the specified container.
code snippet:
function initMap(latitude, longitude) {
var location = {
lat: latitude,
lng: longitude
};
console.log(location);
var service = new google.maps.places.PlacesService(document.getElementById('map'));
service.nearbySearch({
location: location,
radius: 3200,
types: ['school']
}, callback);
}
// List nearby places
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
document.getElementById('places').innerHTML += results[i].name + ", " + results[i].vicinity + "<br>";
// listPlaces(results[i]);
}
} else {
document.getElementById('places').innerHTML += "Status: " + status + "<br>";
}
}
google.maps.event.addDomListener(window, "load", function() {
initMap(40.7127837, -74.0059413);
});
#map {
height: auto;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map"></div>
<div id="places"></div>
<img src="https://developers.google.com/places/documentation/images/powered-by-google-on-white.png" alt="Google Logo" />

Setting multiple map point icons in JQM

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