Maps- overlay div

254 views
Skip to first unread message

Reba

unread,
Jun 16, 2011, 6:49:21 PM6/16/11
to google-map...@googlegroups.com
I have a 2 divs created from as google visualization pie chart that I need to overlay and set to a specific points on a map, but I can't figure out for the life of me how to do it.  I know it's going to be some sort of custom overlay...

any ideas?

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    var center = new google.maps.LatLng(39, -120);
    var zoom = 10;
    var map;
 
function initialize() {
 
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: center,
        zoom: zoom,
        mapTypeId: 'roadmap'
    });
}
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
   
        var countText1 = encodeURIComponent("SELECT 'Fruit', 'Pieces' FROM 1008011 WHERE 'Pieces'>2");
        var countFruit1 = 'http://www.google.com/fusiontables/gvizdata?tq='  + countText1;
        google.visualization.drawChart({
            "containerId": "chart_div",
            "dataSourceUrl": countFruit1,
            "chartType": "PieChart",
            "options": {
                "width": 400,
                "height" : 400,
                "backgroundColor" : 'transparent',
                "colors" : ['red','yellow','green','orange']
            }
        });
       
        var countText2 = encodeURIComponent("SELECT 'Fruit', 'Pieces' FROM 1008011 WHERE 'Pieces'<8");
        var countFruit2 = 'http://www.google.com/fusiontables/gvizdata?tq='  + countText2;
        google.visualization.drawChart({
            "containerId": "chart_div2",
            "dataSourceUrl": countFruit2,
            "chartType": "PieChart",
            "options": {
                "width": 400,
                "height" : 400,
                "backgroundColor" : 'transparent',
                "colors" : ['red','yellow','green','orange']
            }
        });
    }
    </script>
  </head>

  <body onload="initialize();">
    <div id="map_canvas" style="width: 600; height:600;"></div>
    <div id="chart_div"></div>
    <div id="chart_div2"></div>
  </body>
</html>

Chris Broadfoot

unread,
Jun 16, 2011, 8:55:16 PM6/16/11
to google-map...@googlegroups.com
Have a look at OverlayView:

--
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/-/ra_wOWix32EJ.
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.

Reba

unread,
Jun 16, 2011, 9:29:12 PM6/16/11
to Google Maps JavaScript API v3
I keep trying to fumble my way through those and come up with a whole
lot of nothing. I'm poor with documentation and better with examples.

The example shown looks like it constructing the <div> as it's
creating the overlay. Do you know of an example that places a div
onto an overlay after it's been created?

Thanks,
Reba

On Jun 16, 5:55 pm, Chris Broadfoot <c...@google.com> wrote:
> Have a look at OverlayView:http://code.google.com/apis/maps/documentation/javascript/reference.h...http://code.google.com/apis/maps/documentation/javascript/overlays.ht...
>
> --http://twitter.com/broady

Chris Broadfoot

unread,
Jun 16, 2011, 10:11:04 PM6/16/11
to google-map...@googlegroups.com
Actually, you probably just want something like RichMarker:

You can attach arbitrary HTML to a particular LatLng.

Reba

unread,
Jul 16, 2011, 2:58:51 PM7/16/11
to Google Maps JavaScript API v3
Just wanted to follow up and say that this worked brilliantly. As
always, thanks for your help!

On Jun 16, 7:11 pm, Chris Broadfoot <c...@google.com> wrote:
> Actually, you probably just want something like RichMarker:http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richma...
>
> You can attach arbitrary HTML to a particular LatLng.
>
> Chris
>
> --http://twitter.com/broady
>
>
>
>
>
>
>
> On Fri, Jun 17, 2011 at 11:29 AM, Reba <rebeccabompi...@gmail.com> wrote:
> > I keep trying to fumble my way through those and come up with a whole
> > lot of nothing.  I'm poor with documentation and better with examples.
>
> > The example shown looks like it constructing the <div> as it's
> > creating the overlay.  Do you know of an example that places a div
> > onto an overlay after it's been created?
>
> > Thanks,
> > Reba
>
> > On Jun 16, 5:55 pm, Chris Broadfoot <c...@google.com> wrote:
> > > Have a look at OverlayView:
> >http://code.google.com/apis/maps/documentation/javascript/reference.h....
> > ..

magicrat75

unread,
Sep 29, 2011, 4:35:32 AM9/29/11
to google-map...@googlegroups.com
Hi Reba

Are you using the RichMarker library Chris suggested? Is it working properly with the new Firefox (6.x)?

I use the library and now have a weird problem with the new firefox vesion: it doesn't get the onclick event. I've posted a new thread with this problem, but no one has say anything yet:
https://groups.google.com/forum/?fromgroups#!searchin/google-maps-js-api-v3/richmarker/google-maps-js-api-v3/8H6K_G5s4zU/V7VK-7uPQewJ

Please, let me know if you don't have this problem or if you have managed to sort it out. I need to solve this problem asap.
Thanks.

Reply all
Reply to author
Forward
0 new messages