moving the mouse over the custom marker creates mouseover and mouseout events

[rlk27]

We have custom marker using Goodle.maps.OverlayView()  (creates div with our custom html) and marker events are triggered when events on the DIV is triggered (shown below)

 

this.DOMEventHandle.push( google.maps.event.addDomListener(this.div_, "mouseover", function() {

google.maps.event.trigger(marker, "mouseover");

}));

this.DOMEventHandle.push( google.maps.event.addDomListener(this.div_, "mouseout", function() {

google.maps.event.trigger(marker, "mouseout");

}));

panes =

this.getPanes();

panes.overlayImage.appendChild(

this.div_);

 

Now the problem is when I move the mouse on the marker and circle or move around inside the marker, I see mouseover and mouseout evevts are fired. this kind of creates flickering effect on the custom tooltip that we are showing.  how to control the custom markers mouseover area?

[Enoch Lau (Google Employee)]

Can you create a demo page and link to it please?

Enoch

[rlk27]

please see if this works

 

http://192.168.10.162:8080/custommarker.html

 

 

if not , I will send my html and img.

 

if you circle on the image you will see infowindow flicker and count incresing.

 

it works perfect if remove my custom image html for the custom marker. We create the custom image html dynamically.

I have commented out the working version which is basically example from google.

 

Thanks

Rlk27

[rlk27]

Html file and image files attached

[Andrew C Leach]

On 2 November 2011 16:39, rlk27 <ramapr...@gmail.com> wrote:
> please see if this works
>
> http://192.168.10.162:8080/custommarker.html

That won't work on anyone's network but yours.

> Html file and image files attached

The HTML has no Javascript included at all.

Please host the application in a location which anyone can get to, and
give a link to it here. You can use tinyurl to mask the url if you
need to, and you can remove it once the issue is resolved if you have
to.

[rlk27]

Sending attachments again.  Pl check. until then, I will figure out a place to host these files..

[geoco...@gmail.com]

On Nov 2, 9:39 am, rlk27 <ramapragat...@gmail.com> wrote:
> please see if this works
>
> http://192.168.10.162:8080/custommarker.html

192.168.10.162 is a private network. We won't be able to get to it.

>
> if not , I will send my html and img.

A publicly available link would be more useful.

-- Larry

[rlk27]

<

html>

<

head>

<

title>Google Maps JavaScript API v3: Custom Marker Demo</title>

<

script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.5&sensor=true"></script>

<

script>

function

CustomMarker(latlng, map) {

google.maps.OverlayView.call(

this);

this

.latlng_ = latlng;

// Once the LatLng and text are set, add the overlay to the map. This will

// trigger a call to panes_changed which should in turn call draw.

this

.setMap(map);

}

CustomMarker.prototype =

new google.maps.OverlayView();

CustomMarker.prototype.draw =

function() {

var

me = this;

var

color ="#00ff00"

var

html = "<div style='position: absolute; margin: 0; padding:0; background-color:transparent; background-image: url(" + "BusWithBump_N_48x64.png" + ");height: 63px; width: 48px;'>" +

"<div>"

+

"<div class='busLabel' style='position: absolute; margin: 0; padding:0; margin-left:10px; margin-top:2px; text-align:left; background-color:"

+ color + ";width:27px; height:1px; overflow: hidden; text-indent:11px;' ></div>" +

"<div class='busLabel' style='position: absolute; margin: 0; padding:0; margin-left:9px; margin-top:3px; text-align:left; background-color:"

+ color + ";width:29px; height:1px; overflow: hidden; text-indent:11px;' ></div>" +

"<div class='busLabel' style='position: absolute; margin: 0; padding:0; margin-left:8px; margin-top:4px; text-align:left; background-color:"

+ color + ";width:31px; height:3px; overflow: hidden; text-indent:11px;' ></div>" +

"<div class='busLabel' style='position: absolute; margin: 0; padding:0; margin-left:7px; margin-top:7px; text-align:left; background-color:"

+ color + ";width:33px; height:3px; overflow: hidden; text-indent:11px;' ></div>" +

"<div class='busLabel' style='position: absolute; margin: 0; padding:0; margin-left:6px; margin-top:10px; text-align:left; background-color:"

+ color + ";width:35px; height:2px; overflow: hidden; text-indent:11px;' ></div>" +

"<div class='busLabel' style='position: absolute; margin: 0; padding:0; margin-left:2px; margin-top:1px; font-size:7pt; text-align:center; width:41px; height:10px; overflow: hidden;' >"

+ 20 + "</div>" +

"</div>"

;

//html += "<div class='busLabel' style='position: absolute; margin: 0; padding:0; color: black; margin-top:16px;margin-left:4px;'>20</div>";

html +=

"</div>" +

"<div><div class='busLabel' style='background-color: black; color:white; margin-top:8px; margin-left:8px; margin-right: 35px;'>"

+

"<div class='busLabel' style='position: absolute; margin-top:35px; font-size:7pt; text-align:center; width:30px; height:10px; overflow: hidden;' >"

+ 1054 + "</div></div></div>"; //@3 issue 3 center the busId

　

// Check if the div has been created.

var

div = this.div_;

if

(!div) {

// Create a overlay text DIV

div =

this.div_ = document.createElement('DIV');

// Create the DIV representing our CustomMarker

div.style.border =

"1px red solid";

div.style.position =

"absolute";

div.style.paddingLeft =

"0px";

div.style.cursor =

'pointer';

//div.innerHTML = html; does not work

// creating another DIV and assign inner HTML does not work either.

var

imgDiv = document.createElement("div");

imgDiv.innerHTML = html;

div.appendChild(imgDiv);

/* *********** THIS WORKS *******

* *********** comment the above imgDiv creation, html and appending (3 lines)

* *********** uncomment this park to see it working ok.

* *********** problem seems to be my custom image html

* var img = document.createElement("img");

img.src = "http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/bluecirclemarker.png";

div.appendChild(img);*/

google.maps.event.addDomListener(div,

"click", function(event) {

google.maps.event.trigger(me,

"click");

});

google.maps.event.addDomListener(div,

"mouseover", function(event) {

google.maps.event.trigger(me,

"mouseover");

});

google.maps.event.addDomListener(div,

"mouseout", function(event) {

google.maps.event.trigger(me,

"mouseout");

});

// Then add the overlay to the DOM

var

panes = this.getPanes();

panes.overlayImage.appendChild(div);

}

// Position the overlay

var

point = this.getProjection().fromLatLngToDivPixel(this.latlng_);

if

(point) {

div.style.left = point.x +

'px';

div.style.top = point.y +

'px';

}

};

CustomMarker.prototype.remove =

function() {

// Check if the overlay was on the map and needs to be removed.

if

(this.div_) {

this

.div_.parentNode.removeChild(this.div_);

this

.div_ = null;

}

};

CustomMarker.prototype.getPosition =

function() {

return

this.latlng_;

};

var

map;

var

overlay;

var

iw;

function

initialize() {

var

opts = {

zoom: 4,

center:

new google.maps.LatLng(-25.363882,131.044922),

mapTypeId: google.maps.MapTypeId.ROADMAP

}

map =

new google.maps.Map(document.getElementById("map"), opts);

iw =

new google.maps.InfoWindow({

content:

"Hello"

});

var

count = 0;

overlay =

new CustomMarker(map.getCenter(), map);

google.maps.event.addListener(overlay,

"click", function() {

iw.setContent(

"you clicked me!")

iw.open(map, overlay);

});

google.maps.event.addListener(overlay,

"mouseover", function() {

count++;

iw.setContent(

"this is mouseover "+count);

iw.open(map, overlay);

});

google.maps.event.addListener(overlay,

"mouseout", function() {

//iw.setContent("this is mouseout");

iw.close();

});

}

function

addOverlay() {

overlay.setMap(map);

}

function

removeOverlay() {

overlay.setMap(

null);

}

</

script>

</

head>

<

body onload="initialize()">

<

div id="map" style="width: 320px; height: 480px;">map div</div>

<

div>

<

input type="button" value="Add Marker" onclick="addOverlay()">

<

input type="button" value="Remove Marker" onclick="removeOverlay()">

</

div>

</

body>

</

html>

[rlk27]

I have renamed the html.  image file is attached. 

 

I also copy pased the html

[rlk27]

I have renamed the html file this time. 

 

I am talking to my IT to have it posted on a public server,,

[rlk27]

files attached. I am talking to IT for making this available on the public server and provide the link..

[geoco...@gmail.com]

On Nov 2, 11:31 am, rlk27 <ramapragat...@gmail.com> wrote:
> files attached. I am talking to IT for making this available on the public
> server and provide the link..
>

>  custommarker.copytohtml
> 5KViewDownload
>
>  BusWithBump_N_48x64.png
> < 1KViewDownload

You really only have to say the same thing once in a thread...

-- Larry

[rlk27]

sorry and thanks

 

rename the file custommarker.copytohtml to .html.

 

place the html file and image file on a folder and open with a browser

 

view the html file to see my comment on working and nonworking version

 

thanks

Rlk27

[rlk27]

Did anyone see the problem? any idea? you help is much appreciated.

[geoco...@gmail.com]

On Nov 3, 6:52 am, rlk27 <ramapragat...@gmail.com> wrote:
> Did anyone see the problem? any idea? you help is much appreciated.

Do you have a link to a live map?

-- Larry

[rlk27]

I could not create link.

 

But it is really simple. just download the 2 files and place them in a folder.  rename the custommarker.copytohtml file to custommarker.html.  Open the custommarker.html using your IE browser.

 

Thanks

rlk27

 

 

[davie strachan]

Hi
Google Maps TOS 9.1.1 General Rules.(b) Public Access (No Firewall).
Your Maps API implementation must not (i) operate only behind a
firewall; or (ii) only on an internal network (except during the
development and testing phase); or (iii) in a closed community (for
example, through invitation-only access).

As the final product must be publicly accessible you should be able to
post a temp link.
If the final product is not publicly accessible you are breaking TOS
unless you have a Premier licence which has Google support.

Regards Davie

[geoco...@gmail.com]

On Nov 3, 7:53 am, davie strachan <daviestrac...@gmail.com> wrote:
> Hi
> Google Maps TOS 9.1.1 General Rules.(b) Public Access (No Firewall).
> Your Maps API implementation must not (i) operate only behind a
> firewall; or (ii) only on an internal network (except during the
> development and testing phase); or (iii) in a closed community (for
> example, through invitation-only access).
>
> As the final product must be publicly accessible you should be able to
> post a temp link.
> If the final product is not publicly accessible you are breaking TOS
> unless you have a Premier licence which has Google support.

They are allowed to keep the map private while developing. The final
product must be publicly available to meet the TOS for the free API.

That said, I'm not going to look at it without a public link.

-- Larry

[rlk27]

I am still developing.   too early to show final product pulically. Final product will be publically available. 

I just created a sample page to show the problem. 

 

I am still trying to create a temp link. 

[davie strachan]

Hi

>They are allowed to keep the map private while developing. The final
>product must be publicly available to meet the TOS for the free API.

Exactly
But if they need help they need to have a public link to the sample
page

Regards Davie

[geoco...@gmail.com]

On Nov 3, 10:39 am, davie strachan <daviestrac...@gmail.com> wrote:
> Hi
>
> >They are allowed to keep the map private while developing.  The final
> >product must be publicly available to meet the TOS for the free API.
>
> Exactly
> But if they need help they need to have a public link to the sample
> page

Some people are willing to work off of code either uploaded or posted
to the group, more power to them; my only point is that I (and
apparently you) won't do that without enough of an interesting
problem.

-- Larry

[rlk27]

I did post the whole html and attached the files. it is just a sample page that I am trying for a proof of concept for working with custom markers with our own image html.  

I am surprised that most of the forum do work with copy/paste of the code and asking question.  I guess the google TOS, does not work like that.

 

I tried tinyurl. it still give our public ip which our IT does not want.  still figuring out how to provide the link.

[Andrew Leach]

On 3 November 2011 18:37, rlk27 <ramapr...@gmail.com> wrote:
>
> I tried tinyurl. it still give our public ip which our IT does not want.
> still figuring out how to provide the link.

Create a simple sample page which doesn't show anything your IT
department doesn't want. Get some free hosting. Use that.

[rlk27]

I have the sample page that just produces the problem of multiple mouseover/outs when moving around inside the custom markers custom image. very simple which I attached in my previous posting in this thread.  How hard would it be for anyone to take a look at that html file. 

 

I am trying to get some free hosting ..it will take a day or 2. 

[Ralph]

http://www.easypagez.com/hosting.html

Takes less than 20 minutes to get going ....

Ralph

> --
> You received this message because you are subscribed to the Google
> Groups "Google Maps JavaScript API v3" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/google-maps-js-api-v3/-/qub_eHcM9HYJ.
> To post to this group, send email to
> google-map...@googlegroups.com.
> To unsubscribe from this group, send email to
> google-maps-js-a...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/google-maps-js-api-v3?hl=en.

[rlk27]

thanks Ralph.  The page is giving me error when I tried to register the free signup.  Any other. My office is seeting a paid hosting just for this purpose but it will talk a day or two.

[rlk27]

Finally...

 

here is the link

 

http://cdtestsite.com/Forum/custommarker.html

 

Move the mouse over the custom icon and you see the many mouseovers by count increase in the info window

 

Thanks

rlk27

[Rossko]

> http://cdtestsite.com/Forum/custommarker.html
>
> Move the mouse over the custom icon and you see the many mouseovers by
> count increase in the info window

Your overlay is composed of some small text label divs floating over a
bus image.
The mouseover seems okay to me if you move over the image, mouseout
fires over the text labels?
Seems to be an expected browser behaviour as shown here
http://unixpapa.com/js/testover.html

This might be useful
http://www.google.com/search?q=cross+browser+mouseenter

[rlk27]

Thank you very much Rossko.  But I tested the same html in

 

http://cdtestsite.com/Forum/testingNestedDiv.html

 

and seem to work fine. THis is exactly what I am trying in the custommarker html.  what is the difference.?

 

Thanks

rlk27

[Rossko]

> http://cdtestsite.com/Forum/testingNestedDiv.html
>
> and seem to work fine. THis is exactly what I am trying in the custommarker
> html.  what is the difference.?

What is the same about it? I think if you implement counters on that
one too, you may be suprised

[rlk27]

Oh yeah..silly me. 

[Rossko]

The easiest circumvention might be to generate custom images, with
your bus & text 'flattened' into a single image, but that might not be
possible in your eventual application.

Perhaps it would work with the text under the image, and peekaboo
transparencies in the image to see them.

Otherwise, does it look like any of those 'mousenter' techniques could
be applied?

[rlk27]

I can not generate image with text and color as it should be dynamically created based on the live information.

 

I managed to solve the problem by using the bus image with marker and mouse events on the marker and used overlayView for the custom label (text and color) with z-index one up to make it on top of the marker image and adjusted the pixel offet.

 

thanks

Rlk27

[rlk27]

I tried stopPropagation() and cancleBubble=true but did not work.