it would be good if there was another plugin library like gmaps.heatmap.js

Here is working sample of heatmap overlay on google maps. http://www.patrick-wied.at/static/heatmapjs/demo/maps_heatmap_layer/gmaps.php

When attempting to use map.setMapTypeId(...) to dynamically alter the map type, I get the following error:

Uncaught TypeError: Object [object Object] has no method 'setMapTypeId'

I'm using the latest version of gmaps.js with the gmaps api v3.

Thanks!

-phil

Is there a way to update the map, as in, redraw it when the window size changes?

I was thinking if the div is sized so it changes with the window size, something like this could work:

$.resize(function(){
    map.refresh();
});

Pasos para generar el error:

1. http://hpneo.github.com/gmaps/examples/markers.html
2. Por consola ejecutar: google.maps.event.trigger(map.markers[0], 'click');
3. Error!

Google Maps recomienda usar para los eventos funciones sin parámetros, aquí pongo un ejemplo:

// a kitten dies
google.maps.event.addListener(marker, 'click', function(e){
e['details'] = details;
...
});

// like a boss!
google.maps.event.addListener(marker, 'click', function(){
this['details'] = details;
...
});

Infobubbles.js is one that uses tabbing, but it is a bit limited.

Now I use GMaps.staticMapUrl to create a static map, but I want to add a full map link, how to create a url for dynamic full map?

Hi i tried your demo in firefox 12.0 and it didn't work:

GMaps is not defined

map = new GMaps({

Hello everyone!

There is an issue that breaks all the styling in the map. The problem is in bootstrap.css. There is a rule not working as expected:

img {
    max-width: 100%;
    vertical-align: middle;
}

The solution is simple. Reject this properties to the img tag inside the map div:

#yourmap img {
    max-width: none;
    vertical-align: baseline;
}

Hope this can be fixed in the next version of the plugin.

Cheers

Hello,
i'm try using your plugin and I get this error:
a is undefined
http://maps.gstatic.com/intl/es_ALL/mapfiles/400d/maps2.api/main.js
line 458
I'm using it like this:

GMaps.js tienes muchas funciones útiles pero para acceder a ellas tienes que pasar por el constructor que te pide crear un mapa.

Aquí hay 2 alternativas para su solución:

• Dejar como opcional la creación del mapa en el constructor y para crearlo luego con otra funcion, por ejm: buildMap();
• Convertir las funciones geocode y geolocate a funciones estáticas: this.geocode a GMaps.geocode .
  Por el momento solo he tenido la necesidad de usar esas, pero quizás haya más.

En lo personal me gusta la idea de las funciones estáticas, lo tengo parchado así.

We have implemented map and it working ok for normal page but not loading at correct position for tabbed pages.
Please suggest.

Thanks,
Vikas Kumar

There's no example for polygons, so it would be good to have one. It also doesn't seem to support the same array of arrays syntax as polyline does, which is a shame.

This isn't high priority, but I find the documentation layout to be a bit clumbersome. It would be really nice to have a layout similar to coffeescript.org:

• Single page for easy searching.
• 2 column layout comparing GMaps.js API side by side with the Google Maps API equivalent code.
• Inline examples (maybe hidden by default with a button to expand).

I don't think this would be too hard, and it would make the docs much more intuitive.

Hi All,

I have to add content like { ' , " " ,

,
} i.e quotes, double quotes, paragraph tag, break tag in the content field of infowindow inside marker.

example:

infoWindow: {
content: '

XYZ ' Adrress: anything '
postcode: 'gsh 456'

tel: 017242343

Please suggest

Many Thanks
Meenakshi

Is it possible to show a route on the map and a distance (in km) in another div when two markers are known?
I don't care about the route-directions, just the route and the total distance (and perhaps driving-time).
Is this at all possible in google maps?

Whereas you may removeMarkers();, one would expect to be able to removePolygons(); :)

It'd be nice to support a clean way of removing polygons that are drawn.

Hi there...Love your plugin. Is there any way to customize the markers in non-static maps by using a custom marker or a custom color? Perhaps something similar to how you do it in your static map with markers example?

tarek

is there anyway to do this? when i add multiple destinations (ie. multiple stops) it just picks the last destination listed.

Is there any way of using a custom infowindow such as infobox or infobubble?

thanks,

gmaps.js can take a format similar to part of GeoJSON, but it turns out the points are swapped (lon/lat rather then lat/lon) -- goofy, I know, but it's a standard format.

I'd be nice if you could support GeoJSON.

first time i open a bootstrap's modal with a map,it seems ok.
When i close the modal and open it again,the map in the modal can only show a little,with blocks of shadow.

Hi,

This is not an issue, just a query.

I am building a map with several markers (and infoWindows). Now when a marker is clicked, the corresponding infoWindow is displayed (with proper screen positioning). I want to do the same when a place is selected from a drop down list. How can I hook into the google.maps.Marker's click event?

I can call, "map.hideInfoWindows()" followed by "marker[i].infoWindow.open". This does show the info window. But the displayed widow is not centered. And also it does not have any of the events associated with it. I cannot close this window using the "close" button.

Could you please help me with this?

Siddharth

Hi,

I follow the example to get the event, but my return is undefined.

The dragend function got called, and I need the getNorthEast and getSouthWest coordinate...

Any idea?

Cheers,
Mickey

Any thoughts on adding marker clustering?

Could you help me to add marker with custom image?

The zoom property is always the same regardless of the zoom level. Which is fine I suppose, although a bit confusing. Unfortunately the workaround to get zoom looks something like map.map.getZoom() which isn't ideal. I'll see if I can't throw up a pull request later today.

Edit: Also noticed getBounds() isn't exposed in any way either so it's the same with map.map.getBounds()

I can't find a way to change a marker's custom icon on hover.

Here's my code:

map.addMarker({
lat: lat,
lng: long,
icon: '/images/gmap-icon.png',
click: function(e) {
//do something on click
},
mouseover: function(e) { this.setIcon('/images/gmap-icon-on.png'); },
mouseout: function(e) { this.setIcon('/images/gmap-icon-off.png'); }
});

If i do it on a click, the «this.setIcon('/images/gmap-icon-on.png');» code is working but I need to revert to the off state on mouseout. Can you tell why it's not working on mouseover / mouseout?

Thanks!

To be honest, your plugin is the first one that supports geocoding so effortlessly. For a ton of mapping plugins out there, they all seem to focus on the longitude and latitude, which is silly because typical users type address, not two decimal numbers.

Now, I am curious if you have plan to make gmaps even better by making the project more universal, meaning, with the same set of APIs, you can easily switch between providers, such as OpenStreetMap, BingMaps, and GMaps?

IIRC, GMaps is not free if you exceed X number of requests, so there is a need to switch easily between providers.

The examples don't seem to work in IE7-9, is anyone else having this problem?

I think you need to put a big warning on the README so people don't have to read through the whole source to find this (deal-killer) requirement.

Thanks,

Walter

Suppose I have multiple overlays on my map using map.drawOverlay(). When I zoom in/out, the overlays wouldn't adapt their location accordingly: they seem to stuck to the original zoom level positioning. I've tried using both master and framework-free branch to no avail.

I ended up using infobox (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox) to achieve the correct result, so all is good for me now.

Of course, I shouldn't forget to thank you for the wonderful library!

Your examples have not all methods i need. E.g. map.removeMarkers().

It would be awesome to be able to input a number of markers and have the system calculate the correct zoom level, so that all markers would show on the map.

Would it be possible to make the markers draggable, recalculate the long and latitude and replace the marker instead of adding a new one, like here: http://universimmedia.pagesperso-orange.fr/geo/loc.htm

Sorry for my bad English.

Is it in the scope of this project to include the Google Earth API, such as by adding support for easily switching to 3D display of map data and features?

My personal projects recently have included mapping the Google Earth API and browser plugin on top of the standard Google Maps API, with the goal of being able to choose between 2D and 3D display modes. If you think this would be helpful to add to this project, I can work on implementing it.

Add ability to style infoWindow.

With GMapsAPI i can do this with that way:
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var legs = response.routes[0].legs;
var totalDistance = legs[0].distance.value;
var METERS_TO_MILES = 0.000621371192;
alert((Math.round( totalDistance * METERS_TO_MILES * 10 ) / 10)+' miles');
}
});

I cann't find it in examples... Any ideas?

First, I want to compliment you on a great plugin....after working with maps "the hard way" this interface is much appreciated!

I am trying to get a set of custom tile overlays to load underneath the map markers. I tried using the standard v3 API code to do this, but get nothing but errors.

Is there support built into this version of GMaps.js for overlayMapTypes? I'm trying to do something like this (see more at https://developers.google.com/maps/documentation/javascript/maptypes#OverlayMapTypes) :

function CoordMapType(tileSize) {
this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('div');
div.innerHTML = coord;
div.style.width = this.tileSize.width + 'px';
div.style.height = this.tileSize.height + 'px';
div.style.fontSize = '10';
div.style.borderStyle = 'solid';
div.style.borderWidth = '1px';
div.style.borderColor = '#AAAAAA';
return div;
};

var map;
var chicago = new google.maps.LatLng(41.850033,-87.6500523);

function initialize() {
var mapOptions = {
zoom: 10,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);

// Insert this overlay map type as the first overlay map type at
// position 0. Note that all overlay map types appear on top of
// their parent base map.
map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
}

It would be nice if a "print" option could be added...

Hi

How can disable mouse scrollwheel zoom ?

thanks in advance !

Let's say you have a map in a hidden div that you want to show only after action X, it will throw an error in IE7, at least.

Here are the two lines causing problems: https://github.com/HPNeo/gmaps/blob/master/gmaps.js#L19

To reproduce:

add a <div id="map" style="display:none;"></div>, add the map itself with gmaps and it will throw you an error in IE7.

How about more examples?
Perhaps tutorials teaching how to combine the functions?
Or how about one that showcases how to use it in conjunction with php and a MYSQL DB with locations, fences etc.?

Hi all,

I'm new in Google API and I have tried to use this library for my site. My JS code is:

    var map;
    $(document).ready(function(){
      map = new GMaps({
        div: '#gmap',
        lat: -12.043333,
        lng: -77.028333
      });
    });

I've got an error: "Uncaught ReferenceError: google is not defined on gmaps.js, line 1015". What can cause it?

https://developers.google.com/maps/terms

10. License Restrictions.

10.2 Restrictions on the Types of Applications that You are Permitted to Build with the Maps API(s).

10.2 (a) No "Wrapping."

You must not create or offer a "wrapper" for the Service, unless you obtain Google's written consent to do so. For example, you are not permitted to: [...] (ii) create a Maps API Implementation that reimplements or duplicates Google Maps/Google Earth. For clarity, you are not "re-implementing or duplicating" Google Maps/Google Earth if your Maps API Implementation provides substantial additional features or content beyond Google Maps/Google Earth, and those additional features or content constitute the primary defining characteristic of your Maps API Implementation.

Every click on map I need to create NEW route and clear other.
One point permanent, other point changing with click on map.
Test: http://pdwebstudio.com/airport/index2.php

Thanks for this library, it looks very nice !

I'm facing an issue with gmap API and all libraries I've found, there is no way to release a map (deleting the map and releasing all the memory used).

I'm working on a one page application that will use invoke a lot of maps, and I have some huge memory leaks by creating and deleting maps (I quickly raise up to 100mb or memory, the chrome/safari garbage collector doesn't do anything about that).

FYI, the gmap3 plugin has a destroy action, but in my tests there is still memory leaks : http://gmap3.net/api/destroy.html

I only found three ways to deal with this issue :

• creating only one map, and reuse it along the application
• using bing map which has a Dispose() method, I haven't look at OSM right now.
• waiting that an incredible library provides a working destroy method :-)

Thanks a lot,

Matthieu

Is there any option to remove an added marker?
I would like to have a possibillity to use a checkbox to display and hide certain markers.

Is there a procedure for this?