Google Maps JavaScript Marker Issue

Question

This is the page in question...

http://dev.digitalskydesign.com/locations/

Go there, hover over one of the 'green' icons on the Google Map. Before you click it just hover over it and you'll see that a bunch of the code pops up.

I don't want that code to appear at all but I'm having a hard time figuring out how to handle that in my JavaScript code.

The JavaScript code that handles this map is found here...

http://dev.digitalskydesign.com/wp-content/themes/Teamsters-FCU/locations-iframe.php

There is also a .txt file called 'branch-locations.txt' that is basically just addresses and the geocodes for all of the map marker locations.

I'm not a JavaScript guru (just a web designer) so if you could tell me what code to modify / include as well as where to put it, that would be much appreciated.

Thanks guys!

score 1 · Accepted Answer · edited May 23 '17 at 12:27

1

It seems like you have html in your tooltip property.

It seems the code: var label = points[i].textArray[2]; is causing the issue.

If you desire HTML Markup for the tip you will need to add an event to the mouseover event of the marker which displays the toolTip in an element and the adds an event on mouseout to remove the tip element.

The other option you have is to change the label to something without HTML Markup.

An example of adding the Tip with JavaScript code is below:

Some of which was taken from How to call fromLatLngToDivPixel in Google Maps API V3?

//You need this to get the projection... put this code at the top of your javascript after you declare map
var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map); //Where map is your Map2 instance

//Put this code at line 164
var label = '';
points[i].marker = new GMarker(points[i],{title: label, icon:tinyIcon(opts.icon)});
google.maps.event.addListener(points[i].marker, 'mouseover', function() {

//Create the tip and get the Point so position the tip
var toolTip = document.createElement('div'),        
    point = overlay.getProjection().fromLatLngToDivPixel(this.getPosition());
toolTop.styles.position = 'absolute';
toolTop.styles.left = point.x;
toolTop.styles.top = point.y

document.body.appendChild(toolTip);

google.maps.event.addListener(this, 'mouseout', function() {
    document.body.removeChild(toolTip);
  });

});

edited May 23 '17 at 12:27

Community

1
1

answered May 29 '12 at 20:14

Jay

3,276
1
28
38

And I will take $5 or 1 BTC for an example of the HTML tooltip + your up vote :p – Jay May 29 '12 at 20:15
I'm not JavaScript guru, I basically just copied this code from one of Googles examples and custom designed it to fit my sites theme. Any help one what specific code I might add (and where to ad it) would be appreciated. – DigitalSky May 29 '12 at 20:16
I'm new to StackOverflow... What's a BTC? – DigitalSky May 29 '12 at 20:17
BiT Coin... and I should get a up vote cause this is a separate question! Not to mention you didn't up vote my answer which does answer your question. Please modify your question to get the example for free! – Jay May 29 '12 at 20:18
1

This has nothing to do with being a Guru, it has to do with being a programmer... if the code you copy and pasted hijacked user key input would you still want it in use on the Federal Credit Union's Site? Stop being a noob and asking to be spoon fed when you can't up-vote, you can't recognize the right thing to do on your own and you are getting paid to do it and last but not least you are not even saying thank you. – Jay May 29 '12 at 20:36
@Jay Note that this user does not have [enough reputation to upvote](http://stackoverflow.com/privileges/vote-up) you. But I'll give you +1 for your effort :) – Phrogz May 29 '12 at 20:37
Thanks =] my JavaScript guy who originally wrote and modified this code fell off the face of the earth or else I would have just asked him. Thanks though! Hopefully that does the trick. – DigitalSky May 29 '12 at 21:21

score -1 · Answer 2 · answered Jul 28 '22 at 06:28

-1

     new google.maps.Marker({
             position: new google.maps.LatLng(31.54131007135217, 
              74.34902252126089),
             map: map,
             icon: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyRo76igcU5ZR8f9kEo-rrP9du0esd1JiOVKARJqOM5qswG04bAMketGEQW-XhwrZk9ZE&usqp=CAU",
             label: { text: `0`, color: "white",fontSize: "15px" },
         }); 

      google.maps.event.addListener(marker, 'mouseover',()=>{
       infowindow.setContent("content");
        infowindow.open(map, marker);
      });

answered Jul 28 '22 at 06:28

mateen

11
2

when create multiple markers same code using in loop markers create using loop – mateen Jul 28 '22 at 06:28
if you face error to handle markers then ask me freely any question i will guide you completely – mateen Jul 28 '22 at 06:30
1

Hi, Welcome to SO, it is always better to include why and how your code solves the question, please try to edit your comment and add some text (why and how, also why the accepted answer is not good enough). – vaku Jul 30 '22 at 18:43

Google Maps JavaScript Marker Issue

2 Answers2