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. :-)

tooltip content undefined - google map

I added code for tool tip display when hovering the pointers in the google map.It is showing the tool tip but the content is "undefined". How can put the corresponding content related to the pointer into the tool tip box.The code is :
function initialize() {
var myOptions = {
zoom: 11,
center: new google.maps.LatLng(29.7,-95.4),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("salon_map"), myOptions);
var locations = [
__newmapdetls__
];
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var image = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+location[3]+"|FF0000|000000",
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34));
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: location[0],
zIndex: location[3],
tooltip:"testinggg"+i
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow1.open(map, this);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow1.close(map, this);
});
var infowindow1 = new google.maps.InfoWindow({
content: "'"+this.tooltip+"'"
});
}
}
Also url is : http://myshopsalon.com/find-a-shop-salon

A couple of things I noticed when looking at your page source:
Your page is loading both jQuery 1.10.1 and 1.7.2. But it isn't using noConflict(). So these two jQuery versions are stepping on each other.
You're also loading three copies of the Maps API: two copies of version 3 and a copy of the deprecated version 2 API.
Now to your question:
Use a closure to save your variables for each iteration of the marker loop. You can do this by simply calling a function in each iteration.
Instead of using this when you call infowindow.open(), use marker. (this and marker may be the same in this context, but use marker for consistency.)
The .close() method of an infowindow does not take any parameters.
Don't set the tooltip property when you create the marker. That may work, but it isn't documented that you can add your own properties in this fashion. Instead, simply use a local variable or parameter for tooltip.
I would create the infowindow before adding the event listeners. This will actually work fine in either order (since the event listeners are asynchronous), but it looks better to see the infowindow created first.
So, change your for loop to:
for (var i = 0; i < locations.length; i++) {
addMarker( locations[i], "testinggg" + i );
}
function addMarker( location, tooltip ) {
var image = new google.maps.MarkerImage(
"http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+location[3]+"|FF0000|000000",
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34)
);
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: location[0],
zIndex: location[3]
});
var infowindow = new google.maps.InfoWindow({
content: "'" + tooltip + "'"
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
}
That said, you may not like the result you get when you open an infowindow in response to moving the mouse over a marker. What if the marker is near the top of the window? The page will immediately move to make the infowindow fit on the screen, and now the marker won't be under the mouse any more.
You're already setting the title property when you create the marker. This should cause a normal browser tooltip to appear when the mouse is hovered over the marker, and it won't cause the map to move as the infowindow may do. Any reason not to just use that tooltip instead of the infowindow? You could just remove all of the infowindow code, or let the infowindow open on a click as it normally would.

Set the content of the infowindow onmouseover(you may access there the tooltip-property of the specific marker)
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow1.setContent(this.tooltip);
infowindow1.open(map, this);
});
the initializing of infowindow1 move to outside the loop and leave the arguments empty.

Use the below code:
var infowindow1 = new google.maps.InfoWindow({
content: "'"+marker.tooltip+"'"
});
EDIETD:
var contentString = "testinggg"+i;
var infowindow1[i] = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: location[0],
zIndex: location[3],
tooltip:"testinggg"+i
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow1[i].open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow1[i].close(map, marker);
});
You can not get the property of marker in the info window. So you need to define the content in other variable.

Google Maps API Circle Icons

I am trying to make a map using Google Maps API and the red dot icons (aka earthquake icons).
I have several locations and several magnitudes, since some of magnitudes are lower therefore it will not be very visible so the red dot icons only will apply to some locations.
var marker1;
var marker2
for (var i = 0; i < locations.length; i++) {
if (locations[i][3] > 5){
alert("I am in");}
marker1 = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: getCircle(locations[i][3])
});
if(locations[i][3] < 5){
marker2 = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
animation: google.maps.Animation.BOUNCE
});
}
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker1);
}
})(marker1, i));
}
The problem resides on marker1. Because if i try to limit the marker to locations where magnitude is higher than 5 it will not design a single icon and the alert will not even be trigger.
BUT if I remove the code of the marker1 from within the "if" statement (like the example), the alert is triggered and the icons appear on the map.
Marker 2 can be filtered with no problems.
Why is this working this way? I just simply move the "}" a few lines below. I cannot understand.
Thanks for the help!

That code is very complicated, and the way it uses the two global marker1 and marker2 variables, it can't possibly do anything that you want it to do.
I'm not entirely clear what it is you do want the code to do, but can I show you a much cleaner way to code it that may be a step in the right direction?
for( var i = 0; i < locations.length; i++ ) {
addMarker( locations[i] );
}
function addMarker( location ) {
var lat = location[1], lng = location[2],
magnitude = location[3], content = location[0];
var options = {
position: new google.maps.LatLng( lat, lng ),
map: map
};
if( magnitude > 5 ) {
options.icon = getCircle( magnitude );
}
else {
options.animation = google.maps.Animation.BOUNCE;
}
var marker = new google.maps.Marker( options );
google.maps.event.addListener( marker, 'click', function() {
infowindow.setContent( content );
infowindow.open( map, marker );
});
}
Differences worth noting:
No global marker1 and marker2 variables. Instead, every marker has its very own marker variable.
A simple call to the addMarker() method creates the closure you need, instead of the complicated function-returning-a-function.
Use of named variables for all those locations[i][n] properties to make it more readable.
Handles the case where magnitude is exactly 5, which the original code skips. (Change the test from > 5 to >= 5 if needed.)
Combined the two google.maps.Marker() calls to avoid a bit of repetition.
Hopefully that will make it easier to figure out what is going on and what you need to do.

Google Maps. Placing Markers with an interval

I've been trying to get the code working for hours. It seems to me that everything is ok, but it doesn't work. The markers keep showing up at the same time.
I'd really appreciate if you could point out my mistakes. Thanks in advance!
function dropMarker(data){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: data.name,
animation: google.maps.Animation.DROP
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
showIW(this);
});
}
function placeAllMarkers(data){
clearMarkers();
for(var i=0;i<data.length;i++){
setTimeout(dropMarker(data[i]),100*i);
}
}

You have to pass a function to setTimeout not call the function in it. Try
function placeAllMarkers(data){
clearMarkers();
for(var i=0;i<data.length;i++){
setTimeout((function(i){return function(){dropMarker(data[i])};})(i),100*i);
}
}

Automatically opening marker info pane on google map

I've created a custom map with most things I want on it (custom icon and custom info bubble), however I can't find a solution to automatically open the markers info window on load, I've done alot of searching but can't seem to find anything the code I have so far is as follows, any help would be much appreciated:
function initialize() {
var myLatlng = new google.maps.LatLng(54.325109,-2.742226);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var countries = [
{
title:'Remedy',
lat:54.3210,
lon:-2.7438,
content:"<h2>Remedy</h2><p>address, <br />location, <br />postcode</p> <p><b>T:</b> 07595 153 835 <br /><b>E:</b> <a href='mailto:email'>email</a></p>"
}
];
for (var i = 0; i < countries.length; i++) {
var c = countries[i];
c.marker = new google.maps.Marker({
position: new google.maps.LatLng(c.lat, c.lon),
map: map,
icon: '/wp-content/themes/remedy/display_images/google_map_icon.png',
title: c.title});
c.infowindow = new google.maps.InfoWindow({content: c.content});
google.maps.event.addListener(c.marker, 'click', makeCallback(c));
}
function makeCallback(country) {
return function () {
country.infowindow.open(map, country.marker);
};
}
infowindow.open(map, marker);
}

Maybe it's not working because you just created the instance of the Map and didn't wait for the complete load of the map to open the InfoWindow.
Try something like this:
google.maps.event.addListenerOnce(map, 'tilesloaded', function(event) {
infowindow.open(map, marker);
});
According to the reference:
http://code.google.com/intl/en/apis/maps/documentation/javascript/reference.html#Map
tilesloaded - This event is fired when the visible tiles have finished loading.

Hmm, inforwindow does not refer to anything in your code, which is why it is not working.
Since you have one country in the list as of now you can do a quick test and intialize the infowindow variable with an actual info window, or better yet also since you have 1 item in the list, just define c to be outside the loop so you can access it and then open the popup passing it the map and the marker, something like this (assuming c has been defined outside the loop)
c.infowindow.open(map, c.marker);

var infowindow = new google.maps.InfoWindow({
content: "Test Route",
position: new google.maps.LatLng(38.8709866, -77.208055),
});
infowindow.open(map);