Re: why can't it be global variable, var map = new google.maps.Map ?

1,526 views
Skip to first unread message
Message has been deleted

Chad Killingsworth

unread,
Mar 21, 2010, 7:27:50 PM3/21/10
to Google Maps JavaScript API v3
Please post a link to your site. Looking at code in the group
interface makes me go cross-eyed. I also can't use any handy debugging
tools . . .

If I had to guess to your problem though, with the map as a global
variable the constructor is trying to create the map before the DOM
node is ready so it can't be accessed yet.

Chad Killingsworth

On Mar 21, 6:02 pm, Erwin Dicker <dickersch...@gmail.com> wrote:
> well i'm doing something wrong..
>
> i traid to make this a global variable: var map = new
> google.maps.Map(document.getElementById("map_canvas"),
>
> if i don't put that line in the
> google.maps.event.addDomListener(bermudaTriangle, 'click', function()
> {
> i get a error...
>
> what happend when i click on the polygoon it make's a new map...
> what i wanna do is... click polygoon it goes away and you get the
> other polygoon...
> the final version is.. when you zoom in the redpolygoon goes away and
> you get the yello polygoon
>
> <script type="text/javascript">
>     var myLatLng = new google.maps.LatLng(24.886436490787712,
> -70.2685546875);
>     var myOptions = {
>       zoom: 5,
>       center: myLatLng,
>       mapTypeId: google.maps.MapTypeId.ROADMAP
>     };
>
>     var map;
>     var bermudaTriangle;
>
>     var bb2 = new google.maps.LatLng(22.886436490787712,
> -68.2685546875);
>
>     var triangleCoords = [
>         new google.maps.LatLng(25.774252, -80.190262),
>         new google.maps.LatLng(18.466465, -66.118292),
>         new google.maps.LatLng(32.321384, -64.75737),
>         new google.maps.LatLng(25.774252, -80.190262)
>     ];
>
>     // Construct the polygon
>     bermudaTriangle = new google.maps.Polygon({
>       paths: triangleCoords,
>       strokeColor: "#FF0000",
>       strokeOpacity: 0.8,
>       strokeWeight: 2,
>       fillColor: "#FF0000",
>       fillOpacity: 0.35
>     });
>
> google.maps.event.addDomListener(bermudaTriangle, 'click', function()
> {
>
> // if i don't do this i get a error :S i have to make a new map :s...
> some how it won't get the info out of var
> //
>     var map = new
> google.maps.Map(document.getElementById("map_canvas"),
>         myOptions);
>
>     var triangleCoords = [
>         new google.maps.LatLng(22.774252, -78.190262),
>         new google.maps.LatLng(16.466465, -64.118292),
>         new google.maps.LatLng(30.321384, -62.75737),
>         new google.maps.LatLng(22.774252, -78.190262)
>     ];
>
>     // Construct the polygon
>     bermudaTriangle = new google.maps.Polygon({
>       paths: triangleCoords,
>       strokeColor: "#FFFF00",
>       strokeOpacity: 0.8,
>       strokeWeight: 2,
>       fillColor: "#FFFF00",
>       fillOpacity: 0.35
>     });
>
> //here i get the error when i don't put google.maps.map in it
>    bermudaTriangle.setMap(map);
>   map.setCenter(bb2)
>
> });
>
>   function initialize() {
>
>     var map = new
> google.maps.Map(document.getElementById("map_canvas"),
>         myOptions);
>
>    bermudaTriangle.setMap(map);
>   }
>
> </script>

kashey

unread,
Mar 22, 2010, 3:20:30 AM3/22/10
to Google Maps JavaScript API v3
first

> function initialize() {
> var map = new
here you define LOCAL variable for function "initialize"
use "var window.map" or just remove "var" from here and define var map
somethere in the top of script

and then toy create NEW MAP( again - NEW MAP ) in click event.
remove that lines where.

Message has been deleted
Message has been deleted
Message has been deleted

Brak

unread,
Mar 22, 2010, 1:05:34 PM3/22/10
to Google Maps JavaScript API v3
From your description of what you want to do, it doesn't sound like
what you want to do is create a new map every time someone clicks your
polygon. That would not only be unintuitive but you'd have load time
concerns and you wouldn't be able to carry much over from map to map.
What I'd do if I understand you correctly is create an array with all
of your polygons in it, then create one map. Apply/draw the first
polygon during your Initialize function and set a global index
variable to "0". Then in your polygon click event function, un-draw
(set map: to null) your current polygon, increment your index
variable, then draw your next polygon. This will be much faster for
the user and the code. -- That is of course, if I understood what you
wanted to do initially properly.

On Mar 22, 11:46 am, Erwin Dicker <dickersch...@gmail.com> wrote:
> but one thing....
>
> var map;
>
> google.maps.event.addDomListener(bermudaORANJE, 'click', function() {
>
>   bermudaYELLO1.setMap(null);
>   bermudaORANJE.setMap(null);
>   bermudaGREEN.setMap(map);
>   map.setCenter(bermudaGREENcenter)
>   map.setZoom(6);
>
> });
>
> //constructor
>   function initialize() {


>
>         map = new
> google.maps.Map(document.getElementById("map_canvas"),
>              myOptions);
>

>    bermudaRED.setMap(map);
>   }
>
> in the click event i call function() the map, it make new one again...
>
> if i remove new i don't see anything..
> global variable.. triad:
> (1)var map;
> (2)var window.map;
> (3)    var map= new
> google.maps.Map(document.getElementById("map_canvas"),
>              myOptions);
>
> nothing works..
>
> gr.


>
> On 22 mrt, 08:20, kashey <thekas...@gmail.com> wrote:
>
>
>
> > first>  function initialize() {
> > >    var map = new
>
> > here you define LOCAL variable for function "initialize"
> > use "var window.map" or just remove "var" from here and define var map
> > somethere in the top of script
>
> > and then toy create NEW MAP( again - NEW MAP ) in click event.
> > remove that lines where.
>

> > On 22 ÍÁÒ, 02:02, Erwin Dicker <dickersch...@gmail.com> wrote:
>
> > > well i'm doing something wrong..
>
> > > i traid to make this a global variable: var map = new
> > > google.maps.Map(document.getElementById("map_canvas"),
>
> > > if i don't put that line in the
> > > google.maps.event.addDomListener(bermudaTriangle, 'click', function()
> > > {
> > > i get a error...
>
> > > what happend when i click on the polygoon it make's a new map...
> > > what i wanna do is... click polygoon it goes away and you get the
> > > other polygoon...
> > > the final version is.. when you zoom in the redpolygoon goes away and
> > > you get the yello polygoon
>
> > > <script type="text/javascript">

> > > š š var myLatLng = new google.maps.LatLng(24.886436490787712,
> > > -70.2685546875);
> > > š š var myOptions = {
> > > š š š zoom: 5,
> > > š š š center: myLatLng,
> > > š š š mapTypeId: google.maps.MapTypeId.ROADMAP
> > > š š };
>
> > > š š var map;
> > > š š var bermudaTriangle;
>
> > > š š var bb2 = new google.maps.LatLng(22.886436490787712,
> > > -68.2685546875);
>
> > > š š var triangleCoords = [
> > > š š š š new google.maps.LatLng(25.774252, -80.190262),
> > > š š š š new google.maps.LatLng(18.466465, -66.118292),
> > > š š š š new google.maps.LatLng(32.321384, -64.75737),
> > > š š š š new google.maps.LatLng(25.774252, -80.190262)
> > > š š ];
>
> > > š š // Construct the polygon
> > > š š bermudaTriangle = new google.maps.Polygon({
> > > š š š paths: triangleCoords,
> > > š š š strokeColor: "#FF0000",
> > > š š š strokeOpacity: 0.8,
> > > š š š strokeWeight: 2,
> > > š š š fillColor: "#FF0000",
> > > š š š fillOpacity: 0.35
> > > š š });


>
> > > google.maps.event.addDomListener(bermudaTriangle, 'click', function()
> > > {
>
> > > // if i don't do this i get a error :S i have to make a new map :s...
> > > some how it won't get the info out of var
> > > //

> > > š š var map = new
> > > google.maps.Map(document.getElementById("map_canvas"),
> > > š š š š myOptions);
>
> > > š š var triangleCoords = [
> > > š š š š new google.maps.LatLng(22.774252, -78.190262),
> > > š š š š new google.maps.LatLng(16.466465, -64.118292),
> > > š š š š new google.maps.LatLng(30.321384, -62.75737),
> > > š š š š new google.maps.LatLng(22.774252, -78.190262)
> > > š š ];
>
> > > š š // Construct the polygon
> > > š š bermudaTriangle = new google.maps.Polygon({
> > > š š š paths: triangleCoords,
> > > š š š strokeColor: "#FFFF00",
> > > š š š strokeOpacity: 0.8,
> > > š š š strokeWeight: 2,
> > > š š š fillColor: "#FFFF00",
> > > š š š fillOpacity: 0.35
> > > š š });


>
> > > //here i get the error when i don't put google.maps.map in it

> > > š šbermudaTriangle.setMap(map);
> > > š map.setCenter(bb2)
>
> > > });
>
> > > š function initialize() {
>
> > > š š var map = new
> > > google.maps.Map(document.getElementById("map_canvas"),
> > > š š š š myOptions);
>
> > > š šbermudaTriangle.setMap(map);
> > > š }
>
> > > </script>

Reply all
Reply to author
Forward
Message has been deleted
Message has been deleted
Message has been deleted
0 new messages