jbdemonte / gmap3 Goto Github PK

Hi, very useful pluging,
but clusters doesn't work properly.

the cluster position is the position of one of the markers replaced by the cluster.
it should be the barycenter of replaced markers.

This is very explicit on the following demo plugin page demo/cluster%20-%20remove%20a%20marker.html

Hi,

How to use custom images for markers with “addMArkers” action? Here is my markers data array.

var villes = [
{ name: "Paris", dpts: 75, region: "Ile-de-France", lat: 48.8566667, lng: 2.3509870999999976,
icon: http://code.google.com/intl/fr/apis/maps/documentation/javascript/examples/images/beachflag.png" },
{ name: "Marseille", dpts: 13, region: "Provence-Alpes-Côte d'Azur", lat: 43.2976116, lng: 5.381042100000059,
icon: "http://code.google.com/intl/fr/apis/maps/documentation/javascript/examples/images/beachflag.png" }
];

What is the syntax to access “icon” attribute of the above array in “addMArkers” action to assign it to marker image?

I tried this way, but it is not working.

$('#test1').gmap3(
{
action:'addMarkers',
markers: data,
marker:
{

                options: { draggable: false, clickable: true,  icon: data.icon },
                events:
                {
                    click: function(marker, event, data) {
                        $(this).gmap3({ action: 'addinfowindow', anchor: marker, options: { content: data.name} });
                    }
                }
            }
    });

Really appreciate your quick response.

Thank You

Hi,
if I use the cluster, and i have 2 markers with the same location (i.e. two store on the same building) the markers never appear and also at the max zoom level gmap3 will show only the cluster icon...
Have you in program to fix it? Why not something like Google Earth functionality (if i click on a cluster with less than n markers, they appear in a circle around the cluster)?
Let we know, bye

I'm using Firefox in Mac and when you do zoomIn the context menu fail, it just work when the Zoom Value is the max zoom. This problem doesn't happen with Chrome in Mac and FF in Windows for example! Can you check it?

I don't know why error happens in example:
file:///C:/gmap3/examples/context-menu/context%20menu.html
When I click Context Menu Items:
Zoom In, Zoom Out, Cnter Here

There is error in latest Chrome, FF 18.0.2
Uncaught TypeError: Cannot read property 'full' of undefined gmap3.js:2479

Hello,

As it is my first post here I would like to thank you very much for such a great library. I was waiting for the v5 release quite some time.

Now using it, I wanted to add markers and thought about to add labels for them too.
First for me it was natural to use overlay and I was surprised there is no 'values' property (as in marker).

Wouldn't be nice to have a such a feature?

I know there is MarkerWithLabel extension but with this feature implemented we could drop it.

Regards

Jarek

I'm using the following code to fix maps after they are in tabs or hidden from view.

When there is 1 item in the map however, the map zooms in way too far. Is there any way to fix this?

function resizeMyMap() {
        var mymap = $('.gmap3').gmap3({action:'get', name:'map'});
        google.maps.event.trigger(mymap, "resize");
        $('.gmap3').gmap3({
            action: 'autofit'
        });
    }

When I try to destroy a map with gmap3({action:'destroy'}); it throws a null reference error on line 1073, saying that "todo" is null. This is the block of code:
/**

• execute callback functions
  **/
  this._callback = function(result, todo){
  if (typeof(todo.callback) === 'function') {
  todo.callback.apply($this, [result]);
  } else if (typeof(todo.callback) === 'object') {
  for(var i=0; i<todo.callback.length; i++){
  if (typeof(todo.callback[i]) === 'function') {
  todo.callback[k].apply($this, [result]);
  }
  }
  }
  }

-Scott

I noticed a problem with gmap3: Since yesterday maps that use gmap3 are not working anymore. Also all the examples of the gmap3 website itself stopped working. You get following error in chrome:

gmap3-4.1-min.js:39 Uncaught TypeError: Cannot read property 'ROADMAP' of undefined
script.js:139 Uncaught TypeError: Object [object Object] has no method 'gmap3'

When exit the 4.1 releases of gmap3 with addMarkers function that take address input?
Thanks for the answer
Umberto Collina

Hi,

I want to use action “addMArkers” with the array as shown in your examples.

var villes = [
{name:"Paris",dpts:75,region:"Ile-de-France",lat:48.8566667,lng:2.3509870999999976},
{name:"Marseille",dpts:13,region:"Provence-Alpes-Côte d'Azur",lat:43.2976116,lng:5.381042100000059},
{name:"Lyon",dpts:69,region:"Rhône-Alpes",lat:45.7673095,lng:4.834251300000005}
];

data.push({
lat: ville.lat,
lng: ville.lng,
tag: ville.region,
data: ville
});

I would like display separate icon image for each tag of markers. How can I do that?

Can I add img attribute in the above array and use it in the “addMArkers” action script?
Can you please show me how to do that?

data.push({
lat: ville.lat,
lng: ville.lng,
tag: ville.region,
data: ville,
img: myImage
});

Works great in FF however in i.e. 8 I get the following error:
Line: 354
Error: 'google.maps.MapTypeId.ROADMAP' is null or not an object

Any Ideas?

$('#map').gmap3(
{ action:'init',
options:{
unit: 'km',
center:[51.915361,-96.503906],
zoom: 3
}
},
{
action:'addMarkers',
markers: data.....

    $("#map_admin_canvas").gmap3(
        {
            action: 'init',
            options:{
                center: [46.31489464868184, 11.59980297088623],
                zoom: 5,
            },
        },
        "autofit"
    );

    $("#map_admin_canvas").gmap3({ 
        action: 'addMarker',
        latLng:[46.31489464868184, 11.59980297088623],
    });

the center appears to be top-left corner instead of viewport center

Support bounds and region parameters for GeocodeRequest
http://code.google.com/apis/maps/documentation/javascript/geocoding.html#GeocodingRequests

this.getaddress = function(todo, attempt)  ...

I suggest extending the method with optional additional object argument, so any possible future parameters may also be used

Hi,
is it possible to change default laguage somehow? Or this has to be added into the gmap3?
My problem is, that I have auto suggest for addresses, and site is multilanguage - so in every language google returns different name of country etc.
Thx for info.

Hi,

If one tries to use the following thresholds (10,20,100) for clusters of markers (version 4.1 & dev)... the 100 will never be used and all values above 20 will use the middle marker.

It is very likely because the values are considered as strings and the comparison of these strings doesn't give the expected result.

The following patch seems to solve the issue :

--- a/gmap3.js
+++ b/gmap3.js
@@ -1515,7 +1515,7 @@
// look for the cluster design to use
m = 0;
for(k in styles){

•        if ( (k > m) && (k <= cluster.idx.length) ){
  

•        if ( (1 \* k > m) && (k <= cluster.idx.length) ){
         m = k;
       }
     }
  

Regards,
François.

$.browser has been removed from jQuery > 1.9.

I'de like to ask how properly set current geoloc position after successfully getting getgeoloc ??

I have code like:

<script src="https://maps.googleapis.com/maps/api/js?key=AI____XXXX____4p9nPnWLtw&amp;sensor=false"></script>
<script src="/static/js/jquery/geo/gmap3.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery("#gmap").width("90%").height("650px").gmap3({
    map:{
        options:{
            zoom:5,
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            navigationControl: true,
            scrollwheel: true,
            streetViewControl: true
        }
    },
    getgeoloc:{
        callback : function(latLng){
            if (latLng){
                jQuery(this).gmap3({
                    marker:{
                        latLng:latLng
                    },
                    map:{
                        options:{
                            zoom: 8
                        }
                    }
                });
                jQuery(this).gmap3("get").setCenter(latLng);
            } else {
                jQuery("#gmapError").show().fadeOut(8000);
            }
        }
    }
});
</script>```
 (sorry I can't make correct code markup)

But i'm getting error:
Uncaught TypeError: Cannot read property 'full' of undefined gmap3.js:2479
for line:
.....
results.push(gmap3.get(list[0] === "get" ? "map" : list[0].get, true, list[0].get.full));
.......

How should I properly to set center position using received LatLong ?

Btw, I'm get the same error (the latest Chrome)
by running example:
file:///C:/gmap3/examples/context-menu/context%20menu.html
in browser locally

It would be nice if the official releases were tagged.

If you use

$('#map').gmap3({ action:'clear' });

maxzoom is not working anymore

I'm creating a one page application and need to be able to create and destroy maps.

You library is the only one I found that has a destroy method, which is great (the google map API itself doesn't have any method to do it).

Unfortunately, it appears that the destroy action doesn't really clean all the memory, I created a trivial jsfiddle to demonstrate it : http://jsfiddle.net/St5VX/4/

This fiddle will create a map and destroy it in a loop. With the chrome's memory timeline, you can record the memory usage and see that the memory is growing along the time (after 10 minutes, Chromes is using arround 120MB).

Thanks,
Matt

Hi I have some trouble with cluster to get the position an panTo the map to the point.

my data : https://gist.github.com/brewing/f9ef6bc50fa3aeca86fc
my cluster config : https://gist.github.com/brewing/a9ce6eda304e7e51d907#file-gistfile1-txt-L132

my console log get me this https://gist.github.com/brewing/a6763cb8df222711168d

Uncaught TypeError: Cannot call method 'panTo' of undefined

first thing i why i have to use cluster.main.getPosition();
second cluster.map has no panTo

Thank you

This is not a code issue, but I believe it should be addressed.

Your gmaps3 plugin uses GNU General Public License v.3, which makes it very much commercial user unfriendly (regardless of project size).

GNU General Public License v.3 means, that all code in project must be under GNU v.3, which means it must be open-sourced.

I can bet that some parts of commercial coding (sometimes a small part of it) is always meant to be closed-code.
E.g. some parts are third-party and it requires them to closed-code etc.

I wonder, if choice of GNU General Public License v.3 was on purpose.

Please consider GNU Lesser General Public License v.3.

This license protects plugin itself from misuse (it must be always issued with original license, even if changed) and allows to combine it with software which does not need to be open source.

Some say that GNU v.3 was purposefully designed the way it is to get users in trouble.

Dual license would be best: GNU/MIT.

Having said above, gmap3 is really good project.

Regards,

Jeff Parr

Hi there. First of all thanks for this script.

I use rails 3.1 with the standard uglifier compressor and get the following result when compressing gmap3, any version. Also jslint.org gives quite a few errors.

Not sure if this is an uglifier problem or gmap3 problem, so I post it on both projects.

throw Error("ExecJS::ProgramError: Unexpected token: punc (}) (line: 44, col: 139687, pos: 141827)\n\nTypeError: object is not a function\n at Object.CALL_NON_FUNCTION (native)\n at new JS_Parse_Error (/private/var/folders/6g/fmw_z6bs28xd5d7s0c97zy380000gn/T/execjs20110813-28946-ozry5d.js:388:20)\n at js_error (/private/var/folders/6g/fmw_z6bs28xd5d7s0c97zy380000gn/T/execjs20110813-28946-ozry5d.js:399:15)\n at croak (/private/var/folders/6g/fmw_z6bs28xd5d7s0c97zy380000gn/T/execjs20110813-28946-ozry5d.js:830:17)\n at token_error (/private/var/folders/6g/fmw_z6bs28xd5d7s0c97zy380000gn/T/execjs20110813-28946-ozry5d.js:837:17)\n at unexpected (/private/var/folders/6g/fmw_z6bs28xd5d7s0c97zy380000gn/T/execjs20110813-28946-ozry5d.js:843:17)\n at /private/var/folders/6g/fmw_z6bs28xd5d7s0c97zy380000gn/T/execjs20110813-28946-ozry5d.js:920:33\n at in_loop (/private/var/folders/6g/fmw_z6bs28xd5d7s0c97zy380000gn/T/execjs20110813-28946-ozry5d.js:1371:32)\n at /private/var/folders/6g/fmw_z6bs28xd5d7s0c97zy380000gn/T/execjs20110813-28946-ozry5d.js:976:69\n at if_ (/private/var/folders/6g/fmw_z6bs28xd5d7s0c97zy380000gn/T/execjs20110813-28946-ozry5d.js:1080:33)\n (in /Users/mwawrusch/Documents/triponadeal/app/assets/javascripts/application.js)")

HI currently I have to do this in order to zoom my map to a location

      map = @map.gmap3('get') # This gets the raw google map object
      latLng = new google.maps.LatLng(lat,lng)
      map.setCenter(latLng)
      map.setZoom(15)

(note this is coffee script)

Is there a way to do this with gmap3? For instance @map.gmap3({'center': my_coords})
?

Do you have a Example Code anywhere how to Add Markers Dynamicallty such as 'Doing Ajax Request to get Markers and then adding them'

Need help! Wanna merged two example to one. How put kml layers checkbox from kml-tag example to HomeControl container from Controls examle? In my code click destroy two kml layer not one by one? how it fix?

  $items.addClass("items");

  $items.find(".item")
    .addClass("checked")
    .hover(function(){$(this).addClass("hover");}, function(){$(this).removeClass("hover");});
  $inner.addClass("inner").html("SETUP");
  $outer.addClass("outer");
  $container.attr("id", "homeControl");

  $container.hover(function(){$container.addClass("hover");}, function(){$container.removeClass("hover");});

  $container.append( $outer.append( $inner.append( $items ) ) );

  this.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push($container.get(0));

        $("input[type=checkbox]").change(function(){
    var map = $("#map_canvas").gmap3("get"),
      kml = $("#map_canvas").gmap3({
        get:{
          name:"kmllayer", 
          tag:$(this).attr("id")
        }
      });
    kml.setMap( $(this).is(':checked') ? map : null );
  });

  function clickOn(div, name){
    checked[name] = !checked[name];
    $(div)[checked[name] ? "addClass" : "removeClass"]("checked");
    $this.gmap3({
      exec:{
        name:name, 
        all:true,
        func:function(data){
          data.object.setMap(checked[name] ? map : null);
        }
      }
    });
  }
}

Hi
Not sure if your into coffeescript but I love it. Have you considered created a version in coffeescript? I might fork and convert for maintainability reasons if you wanted to do something like that. It could clear up a lot of the code.

Hi,

I want to use action "addMarkers" with address as input parameter instead of lat and lng. But it is not working.

I have changed your example code, markers.html as shown below. but it is not working.

   $(function() 
   {
        var markerData = [
                            { address: '4829 N O Connor Rd, Irving TX 75062, USA', data: 'Lascolnas !' },
                            { address: '620 W Division St, Arlington TX 76010, USA', data: 'Arlington PD!' },
                            { address: '1519 Pebbelcreel dr, Coppell TX 75019, USA', data: 'Coppell !' }
                        ]

        $('#test1')
      .gmap3(
      { action: 'init',
          options: {
              center: [46.578498, 2.457275],
              zoom: 5
          }
      },
      { action: 'addMarkers',
          markers: markerData,
          marker: {
              options: {
                  draggable: false
              },
              events: {
                  mouseover: function(marker, event, data) {
                      $(this).gmap3({ action: 'addinfowindow', anchor: marker, options: { content: data} });
                  },
                  mouseout: function() {
                      var infowindow = $(this).gmap3({ action: 'get', name: 'infowindow' });
                      if (infowindow) {
                          infowindow.close();
                      }
                  }
              }
          }
      }
    );
    });

I'm having an issue I have not experienced before, I have included the <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> and <script src="/assets/gmap3.js" type="text/javascript"></script> within the tag, however my console reports the following:

google is not defined
mapTypeId : google.maps.MapTypeId.ROADMAP, gmap3.js (line 534)

Could you help me with resolving this issue?

Hi,

I am using “marker.setMap(null);” to hide a marker. It is not working when used with “marker” attribute in “addMArker” action.

It works fine without marker attribute. This code hides the marker.

        var hide = true;
        $('#test1').gmap3(
            { action: 'addMarker',
                latLng: [48.8620722, 2.352047]
                ,map: {
                    center: true,
                    zoom: 14
                }
                ,callback: function (marker) {
                    if (hide) { marker.setMap(null); }
                }

            }
      );

The following code does not hide the marker.

        var hide = true;
        $('#test1').gmap3(
            { action: 'addMarker',
                latLng: [48.8620722, 2.352047]
                ,map: {
                    center: true,
                    zoom: 14
                }
                ,callback: function (marker) {
                    if (hide) { marker.setMap(null); }
                }
                , marker:
                {
                    options:
                    {
                        icon: "http://code.google.com/intl/fr/apis/maps/documentation/javascript/examples/images/beachflag.png",
                        draggable: false,
                        clickable: true
                    }
                    , events:
                    {
                        click: function (marker, event, data) {
                            $(this).gmap3({ action: 'addinfowindow', anchor: marker, options: { content: "Hello World!"} });
                        }
                    }
                }

            }
      );

Can you make gmap3 AMD compliant?

API->autoFit does not work
see your own example - polygon is off the map
http://gmap3.net/api/auto-fit.html
http://goo.gl/YDxcg (screenshot)

regards,

jeff

I was not able to reproduce this bug in IE8 and lower (or any other browser for that matter), but when adding clusters via addMarkers and passing in event handlers via cluster.events, only some of the clusters would become clickable (i.e. react to mouse events) in IE9.

I can't make head or tails of the exact implementation within gmap3, but the event handlers are still called if the DOM elements are dynamically removed, so I'm guessing there is some delegation going on that somehow acts a bit wonky in IE9.

I am using gmap3 to fill a div with a google map.

Here is the div in my html file:

<div id="map_canvas" style="width:400px; height:100px; margin: 0px 0px 0px 0px;"></div>

Here is the javascript:

self.$('#map_canvas').gmap3(
 { action:'init',
options:{
center:[46.578498,2.457275],
zoom: 4
}
},
{ action: 'addMarkers',
markers:[
{lat:48.8620722, lng:2.352047, data:'Paris !'},
{lat:46.59433,lng:0.342236, data:'Poitiers : great city !'},
{lat:42.704931, lng:2.894697, data:'Perpignan ! GO USAP !'}
],
marker:{
options:{
draggable: false
},
events:{
click: function(marker, event, data){
alert(data);
}
}
}
}
);

The first time the map load it occupies the whole div. If I jump to another page then come back to where the map is supposed to be, I get this:
http://i.imgur.com/zUNJW.png

I am using backbone and jquerymobile.

Thanks,
Rafael

Hi,
I see you're work with google map and do some cool stuffs ,I'm truly appreciate it.
but i have a problem early days, I want something that allow users to draw an shape on the map and then results being any marks in that area.
How can i do this, can you help me ?
at the end I'm so sorry, I know my english language is sucks
Thank you

Thank for great jQuery plugins,
I would like to get distance of 2 location with their LatLong,
This is the code:

getdistance:{
options:{
origins:[-8.742621,115.167532],
destinations:[lincor_map,bjrcor_map], // villa position
travelMode: google.maps.TravelMode.DRIVING
},
callback: function(results, status){
var html = "";
if (results){
for (var i = 0; i < results.rows.length; i++){
var elements = results.rows[i].elements;
for(var j=0; j<elements.length; j++){
switch(elements[j].status){
case "OK":
html += "From Airport: " + elements[j].distance.text + " (" + elements[j].duration.text + " by Driving)
";
break;
case "NOT_FOUND":
html += "Distance not found";
break;
case "ZERO_RESULTS":
html += "Distance NULL";
break;
}
console.log(elements[j].status);
}
}
} else {
html = "error";
}
$("#villaDistance").html( html );
}
}

But, in my console.log appear "NOT_FOUND".
Is possible to use LatLong in origins and destinations ?

Thank you for your attentions :)

We are experiencing issue when adding and removing markers quickly after each other multiple consecutive times. (with recent gmap3 version 5.1.1)
This crash does not always happen, it seems that this depends on the timing.

Here is the stack trace.

Uncaught TypeError: Cannot call method 'lat' of null 
F.union                                             main.js:16
(anonymous function)                                gmap3.js:2260
e.extend.each                                       jquery.min.js:2
Gmap3.autofit                                       gmap3.js:2257
[...]

The crash is caused by a marker that was deleted shorty before but still seems to be present, but the marker has no position. We have extended autofit with appropriate logging, here is what the output was when the crash from above happened.

Pos N {jb: 46.53713734839792, kb: 2.803616523742676, toString: function, b: function, equals: function…}
Pos N {jb: 46.64990751621149, kb: 2.637770175933838, toString: function, b: function, equals: function…}
Pos N {jb: 46.44069599413034, kb: 2.872281074523926, toString: function, b: function, equals: function…}
Pos null 

The issue seems to be that only the existence of the getPosition function is checked, but not if the position is actually non-null:

 this.autofit = function(args){
      $.each(store.all(), function(i, obj){
        if (obj.getPosition){
          bounds.extend(obj.getPosition());
        }
[...]

It would be great if someone could confirm this bug

I have many map markers and my map used cluster function to manage those marker and then when I click the marker after will open a info window and then the info window will pan the map to fully visible, at this time the map has been paned the marker may will not visible from the map, and when the marker not visible that associated info window will close by cluster function, so how do I do can fix the problem?

Thanks

Taking a look at: http://gmap3.net/examples/clustering.html - zooming in and out results in the cluster icons sometimes disappearing. It seems to consistently disappear at zoom level 2, but sometimes also often at zoom level 0.

Hi.

I have a situation where I have over 8 waypoints so to get around that I need to add multiple routes to my map. I was able to accomplish this with straight javascript (no plugin) but I have been converting everything over to gmap3. Only my last route ends up showing up for some reason with this plugin. Here is what I got.

function update_tour_route_map(){

  // grab url from html data attribute in the tour_route_map div
  $.getJSON($("#tour_route_map").data('positions-url'), function(data){

    var previous_location = null;
    $.each(data, function(key, val){
      var current_location = new google.maps.LatLng(val.stop.location.lat, val.stop.location.lng); 

      // Add marker
      $("#tour_route_map").gmap3(
        {
          action: 'addMarker',
          latLng: current_location,
          map: {
            mapTypeId: google.maps.MapTypeId.SATELLITE,
          }
        }
      );

      // Draw routes
      if (previous_location){
        $('#tour_route_map').gmap3(
          { 
            action:'getRoute',
            options:{
              origin: previous_location,
              destination: current_location,
              travelMode: google.maps.DirectionsTravelMode.DRIVING
            },
            callback: function(results){
              if (!results) return; // don't return anything if there are no results
              $(this).gmap3(
                { 
                  action:'addDirectionsRenderer',
                  options:{
                    preserveViewport: true,
                    suppressMarkers: true,
                    directions:results
                  }
                }
              );
            }
          }
        );
      }
      previous_location = current_location;
    });

    // Fit map to view routes
    $('#tour_route_map').gmap3('autofit');
  });


  // Refresh map so tabs work.
  $('#tabs').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "stops_tab") {
      //google.maps.event.trigger(map, 'resize');
      //map.setZoom(map.getZoom());
      //map.panToBounds(map.getBounds());
    }
  });
}

I'm sorry if this is a lot of code, I just didn't want to miss anything and make sure who ever looks at this is in context. So what I'm doing is grabbing some JSON data, then looping through it adding markers, then the route from each point.

Am I doing something fundamentally wrong? Is there a work around for this?

Hi,

When testing your example for tags feature, I am getting the following error when i clicked on the marker.

Error: Microsoft JScript runtime error: Invalid value for property : [object Object]

Here is the code:
$('#test1').gmap3(
{ action:'init',
options:{
center:[46.578498,2.457275],
zoom: 5
}
},{
action:'addMarkers',
markers: data,
marker:
{
options: { draggable: false, clickable: true },
events:
{
click: function(marker, event, data) {
$(this).gmap3({ action: 'addinfowindow', anchor: marker, options: { content: data} });
}
}
}
});

Combining JS source files to reduce HTTP GET requests is a common optimization. But when gmap3 is combined with other files it causes errors, specifically when other code is placed after the gmap3 code. The reason is because the gmap3 code is not terminated with a semicolon.

It's an easy enough fix but it would be better if the semicolon was there by default.

Hello,

I am looking for a plugin that I can style. So far all the plugins I have found don't incorporate stylers. Is this something you can do?

I set a tag in a circle object during it's construction but can not clear it from the map by using that tag.
I used firebug and the tag is not passed to the object o in o = getObject('circle', todo);

The tag has to be added to o before the call to store.add
Either in addCricle() and the add functions for all the other objects not tagged
o.tag = todo.tag;
store.add('circle', c, o);
or better still change the getObject function code so that is copies the tag.

I have the following code to build an array of markers (which I'm hoping is in the right format.)

//build array of new markers to place
var markersToAdd = [];
jQuery.each(activeFloor.markers, function(indexOfItem, valueOfItem){
    markersToAdd.push({
        lat: valueOfItem.location[0],
        lng: valueOfItem.location[1],
        options: {
            draggable: false,
            icon: valueOfItem.image,
            title: valueOfItem.title
        },
        tag: "floor"
    });
});

And then I simply call

jQuery("#map_canvas").gmap3(
    { action: 'addMarkers',
        markers: markersToAdd
    }
);

Now this is when the stuff hits the fan. My console screams

Uncaught RangeError: Maximum call stack size exceeded
o.extend.o.fn.extend
o.extend.o.fn.extend
o.extend.o.fn.extend
o.extend.o.fn.extend
o.extend.o.fn.extend

and so on. I logged every line of code that got executed and determined it was the addMarkers call that made things go crazy.

Ideas?

Hi, just love your plugin it simplifies my life in a lot of ways. Ok now i am doing a project which requires a form to input a place name and then on submit it displays a map on the page with the marker on that position of the map. Can i do this with gmaps

Hi i need to add multiple markers from my DB
i can do that except data variable (for infowindow)
i use the sample for gmap3.net
where tab is array of lan & lng (i.e tab[0] = 54.55,44.33)

{ action: 'addMarkers',
markers:tab,
marker:{
options:{
draggable: false
},
events:{
mouseover: function(marker, event, data){
var map = $(this).gmap3('get'),
infowindow = $(this).gmap3({action:'get', name:'infowindow'});
if (infowindow){
infowindow.open(map, marker);
infowindow.setContent(data);
} else {
$(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data}});
}
},
mouseout: function(){
var infowindow = $(this).gmap3({action:'get', name:'infowindow'});
if (infowindow){
infowindow.close();
}
}
}
}
}

how to modify that table (or add another) to set the info window (i try with lan:xx.xx,lng:xx.xx,data:xxxxx and similiar)
i have no idea what structure that must be
THX for reply
Janusz Kobylarz

Hello,

Can you add an option to resend query after a delay when the geocoder result status is OVER_QUERY_LIMIT.

    $("#gmap_canvas").gmap3({
        marker:{
            values: locations,
            cluster:{
              radius:40,
              0: { 
                content: "<div class='cluster gmap3__grouped-orange'>CLUSTER_COUNT</div>",
                width: 45,
                height: 56
              }
            },
            options:{
                draggable: false
            }
        }
    });

The above outputs an empty value for the 'data' here:

    $("#gmap_canvas").gmap3({
      get: {
        name: "marker",
        tag: tag,
        all: true,
        callback: function(data){
          console.log(data);
          $.each(data, function(i, obj){
            obj.setIcon("http://maps.google.com/mapfiles/marker_green.png");
          });
        }
      }
    });

[The above fails even without 'tag' specified]
while if I have:

    $("#gmap_canvas").gmap3({
        marker:{
            values: locations,
            options:{
                draggable: false
            }
        }
    });

It works fine and all markers become green.

Is this a known issue?