We Keep Coding

markerclusterer mouseover doesn't work

I just looked at the following post: markerclusterer info windows
There's a thing I need in this post, the mouseover event for the markerclusterer. I need to change the icon when the mouse is hovered over the icon.
I got the following code:
var clusterOptions = {
zoomOnClick: false,
styles: [{
url: 'images/template/cluster.png',
height: 68,
width: 57,
textColor: '#FFF'
}]
}
var markerClusterer = new MarkerClusterer(map, markers, clusterOptions);
google.maps.event.addListener(markerClusterer, "mouseover", function(cluster) {
console.log('test');
});
// Listen for a cluster to be clicked
google.maps.event.addListener(markerClusterer, 'clusterclick', function(cluster) {
var markers = cluster.getMarkers();
var content = '';
$.each(markers, function () {
content += this.get('content');
});
// Convert lat/long from cluster object to a usable MVCObject
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);
var infowindow = new google.maps.InfoWindow();
infowindow.close();
infowindow.setContent(content);
infowindow.open(map, info);
});
The clusterer works fine and also the infowindow shows up nice. It combines all the infowindows from the markers in the cluster.
What am I doing wrong in the mouseover event? I don't even see the console.log!
Thanks in advance

My solution was using markerclustererplus rather than markerclusterer.
Just replace your script src.
Here is an example.

You should use the following library:
https://github.com/googlemaps/v3-utility-library/tree/master/markerclustererplus
it has mouseover handlers
http://htmlpreview.github.io/?https://github.com/googlemaps/v3-utility-library/blob/master/markerclustererplus/docs/reference.html

Google Maps V3 JavaScript works only in Chrome?

I wrote a script that first geocodes an address and then displays a map of that address.
The trouble is, it only works in Chrome / Chromium. Other browsers (Firefox 10 & IE9) display a grey box. A problem that could be related, if I add a marker to the map, the marker does not show in Chrome.
I know that :
I connect with the API successfully with my API key.
The address is properly geocoded.
I use jQuery UI dialog to display the map. This, however, does not seem to be a problem. Removing the dialog and using a static div creates the same "grey box" result.
Below is my script, how I invoke it, and the website that I am using this on.
Here's the script:
function Map(properties)
{
var that = this;
// the HTML div
this.element = properties.element;
// address string to geocode
this.address = properties.address;
// title to use on the map and on the jQuery dialog
this.title = properties.title;
this.latlng = null;
this.map = null;
this.markers = [];
// geocode address and callback
new google.maps.Geocoder().geocode({'address': this.address}, function(data)
{
// geocoded latitude / longitude object
that.latlng = data[0].geometry.location;
// map options
var options =
{
zoom: 16,
center: that.latlng,
zoomControl: false,
streetViewControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create a map
that.map = new google.maps.Map(that.element, options);
// add a marker
that.markers.push(new google.maps.Marker({map: that.map,
position: that.latlng,
title: that.title + "\n" +
that.address}));
});
this.get_google_map = function()
{
return that.map;
}
// creates a jQuery UI dialog with a map
this.show_in_dialog = function()
{
// because the dialog can resize, we need to inform the map about this
$(that.element).dialog({ width: 400, height: 300, title: that.title,
resizeStop: function(event)
{
google.maps.event.trigger(that.map, 'resize');
},
open: function(event)
{
google.maps.event.trigger(that.map, 'resize');
}});
}
this.center = function()
{
that.map.setCenter(that.latlng);
}
}
Here's how I invoke it :
// grab the address via HTML5 attribute
var address = $("#address").attr("data-address");
// ... and the title
var title = $("#address").attr("data-title") + " Map";
var map_element = document.createElement('div');
// append the newly created element to the body
$("body").append(map_element);
// create my own map object
var map = new Map({ element : map_element,
address : address,
title : title });
// bind a link to show the map
$("#map_link").click(function()
{
map.center();
map.show_in_dialog();
return false;
});
And here's the URL of the problem (click on map):
http://testing.fordservicecoupons.com/dealer/30000/premium_coupon_page
Last but not least, I combine and obfuscate my JavaScripts, so what you see above is not exactly the same as in the source on the website.

This doesn't look good:
resizeStop: function(event) { google.maps.event.trigger(that.element, 'resize'); },
open: function(event) { google.maps.event.trigger(that.element, 'resize'); }
you trigger the resize-event on the element that contains the map(that.element), but you must trigger resize on the google.maps.Map-object (what should be that.map in this case)

Wow... Here was the issue.
The layout that I built was a fluid layout. So, one of the first CSS rules that I have written was:
img, div { max-width: 100%; }
So that divs and images can scale. Well, for whatever reason, Google maps DOES NOT like this rule with the end result being a grey box.
And so I added another rule - an exception for Google maps:
img.no_fluid, div.no_fluid { max-width: none; }
And then, in javascript:
// AFTER DIALOG CREATION
$(dialog).find('*').addClass("no_fluid");
The find('*') will get us all the descendants.
Viola!

Geolocation marker not appearing, Google Maps API V3

I'm building a mobile map using the Google Map API V3. The is a little different than a standard map in that I have categories of markers than you can turn on/off. Everything works great, but I can't seem to get geolocation working. I've tried every combination and code snippet I can find and at most I can get it to register the location request, but it will not display a marker there no matter what I do. I'm sure I'm doing something very simple wrong, but I'm very new to Javascript so the answer is evading me.
Here is a shortened version of my current code (contains an example of everything, but cuts out a lot of the repetitive variables). This example doesn't include the geolocation functions since I've tried so many in different ways I'm not sure which one I would even put on here. The toggleMarkers() function is what I'm using to turn on/off the markers and I'm guessing that's where the problem is for the geolocation marker being displayed. If you could show me how to implement geolocation within this code I would greatly appreciate it!
var markers = [];
function initialize() {
//Setting Map
var mapOptions = {
zoom: 18,
center: new google.maps.LatLng(45.73158,-122.636277),
mapTypeId: 'satellite'
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(0);
//Marker Categories
var markerBuildings = {
category: 'buildings',
}
var markerParking = {
category: 'parking',
}
// Icons
var iconBuilding = new google.maps.MarkerImage('images/building.png',
new google.maps.Size(32, 37),
new google.maps.Point(0,0),
new google.maps.Point(16,32));
var iconAmphitheater = new google.maps.MarkerImage('images/amphitheater.png',
new google.maps.Size(32, 37),
new google.maps.Point(0,0),
new google.maps.Point(16,32));
//Coordinates
//Buildings
var vmcb = new google.maps.Marker({
position: new google.maps.LatLng(45.730513,-122.638106),
map: map,
url: 'http://www.google.com/',
icon: iconBuilding,
data: markerBuildings
});
markers.push(vmcb);
var vadm = new google.maps.Marker({
position: new google.maps.LatLng(45.730899,-122.637742),
map: map,
url: 'http://www.google.com/',
icon: iconBuilding,
data: markerBuildings
});
markers.push(vadm);
}
function toggleMarkers(attr,val) {
if (markers){
for (i in markers) {
if(markers[i].data[attr] == val){
var visibility = (markers[i].getVisible() == true) ? false : true;
markers[i].setVisible(visibility);
}
}
}
}

If you could show me how to implement geolocation within this code I would greatly appreciate it!
call getGeoLocation() (below) after you create the map object
function getGeoLocation() {
// http://stackoverflow.com/questions/3397585/navigator-geolocation-getcurrentposition-sometimes-works-sometimes-doesnt
var options = null;
if (navigator.geolocation) {
if (!browserChrome) {
// By using the 'maximumAge' option, the position
// object is guaranteed to be at most 15 seconds old.
// FF and Safari seem to like these options; Chrome does not
options={enableHighAccuracy: false, maximumAge: 15000, timeout: 30000};
}
else {
// Request a position. We only accept cached positions, no matter what
// their age is. If the user agent does not have a cached position at
// all, it will immediately invoke the error callback.
// http://dev.w3.org/geo/api/spec-source.html
// Chrome will not allow this submitted via the file:// protocol
options={maximumAge:Infinity, timeout:0};
}
navigator.geolocation.getCurrentPosition(function(position) {
centerIsSet = true
canGeolocate = true;
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(pos);
},
getGeoLocationErrorCallback(true),
options);
}
else {
// browser doesn't support geolocation
getGeoLocationErrorCallback(false);
}
}

how to create a custom pin on Bing maps v7

Can someone show me how to custom the pin for Bing maps, version 7.0 please? I'm experimenting with upgrading from version 6 which has a custom icon but I cant find anywhere that shows how to do this with version 7. I have the following code so far.
Many thanks,
var map = null;
var pinInfobox = null;
function GetMap()
{
map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
credentials: "xxx",
height: 236,
width: 269,
enableClickableLogo: false,
enableSearchLogo: false,
mapTypeId: Microsoft.Maps.MapTypeId.road,
showDashboard: false});
var loc = new Microsoft.Maps.Location(47.592, -122.332);
var pin = new Microsoft.Maps.Pushpin(loc);
map.entities.push(pin);
map.setView({ center: loc, zoom: 6 });
}

check out the reference documentation which has an "icon" option to set a custom icon
http://msdn.microsoft.com/en-us/library/gg427629.aspx

There is a really good site that documents how to do this exact operation.
http://www.bingmapsportal.com/isdk/ajaxv7#Pushpins2
Here is the JavaScript from that site that says how to do it:
map.entities.clear();
var pushpinOptions = {icon: virtualPath + '/Content/SpaceNeedle.jpg', width: 30, height: 50};
var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions);
map.entities.push(pushpin);

Marker on Google Map added only once

Each time I click on the map a new marker is placed on the map. The problem is that I need only one marker and if I click several times, each time a new marker is added.
How do I change the code so only one marker is placed and when the map is clicked again it changes its location?
Here is my code so far:
function clicked(overlay, latlng) {
var icon3 = new GIcon();
icon3.image = "marker.png";
icon3.iconAnchor = new GPoint(15, 40);
var marker2 = new GMarker(latlng, { icon: icon3, draggable: true, title: 'Drag me' });
map.addOverlay(marker2);
}

I would recommend keeping an instance of marker2 outside of the clicked function, then if marker2 is null, make and add a new one like you are now, otherwise call marker2.setLatLong(latlng); to update it's location.
Untested example code:
var marker2;
function clicked(overlay, latlng) {
if (marker2 == null) {
var icon3 = new GIcon();
icon3.image = "marker.png";
icon3.iconAnchor = new GPoint(15, 40);
marker2 = new GMarker(latlng, { icon: icon3, draggable: true, title: 'Drag me' });
map.addOverlay(marker2);
}
else {
marker2.setLatLong(latlng);
}
}

You will need to implement some sort of check to see if the marker has already been placed. One option would be to keep a list of markers already added and check that list for a marker at a specific point before calling the functions to add the marker to the map. If you need a code sample, let me know.

Well, dont bother, I figured it out myself. I just used map.clearOverlays(); before the marker is pplaced and that solved the problem.