We Keep Coding

Binding Google Maps API to existing business on Google

I used to use an iFrame to embed a Google Map in a web page, but have recently switched to the JavaScript API to give myself more flexibility.
I am loading the map using the co-ordinates, which is working relatively well.
However, when I view a business on Google maps or in an iFrame for that matter, I can see the business I'm trying to focus on, highlighted in red:
But I can't seem to achieve this with the API -- which sometimes doesn't show the business name at all, let alone highlight it red. I've used DHL as an example here.
How can I 'bind' the map to a business location using the JS API?
My current script looks much like the one provided by the Google walkthrough pages:
function initialize() {
var longLat = { lat: 52.8004265, lng: -1.6334708},
mapOptions = {
center: longLat,
zoom: 18,
scrollwheel: false,
};
var map = new google.maps.Map(
document.getElementById('map-canvas'),
mapOptions
);
var marker = new google.maps.Marker({
position: longLat,
map: map,
title:"DHL"
});
}
google.maps.event.addDomListener(window, 'load', initialize);

You can attach infowindow to your marker and display the business name in that way. Here is an example
And here's another example using customized label as a marker, and it can contain the business name. Example

Moving Marker on a PolyLine using Google Maps api v3

I am using Google Maps API V3. I am trying to animate a marker on the Polyline smoothly.
I have Tried this http://jsfiddle.net/bmSbU/154/
Here I have made fixed points as (30,-110) and (30,-100) so I can able to make based on the fixed points.
Now my question is how to do the same when I have multiple points (PolyLine) and the marker should move smoothly without any flicking on map.
var map;
var path;
var marker;
function initialize() {
var myLatlng = new google.maps.LatLng(35, -105);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
route = new google.maps.Polyline({
path: [
new google.maps.LatLng(30, -110),
new google.maps.LatLng(30, -100)],
map: map
});
marker = new google.maps.Marker({
position: new google.maps.LatLng(30, -110),
map: map
});
counter = 0;
interval = window.setInterval(function () {
counter++;
var pos = new google.maps.LatLng(30, -110 + counter / 100);
marker.setPosition(pos);
if (counter >= 1000) {
window.clearInterval(interval);
}
}, 10);
}
google.maps.event.addDomListener(window, 'load', initialize);
Can anybody help me out?

Your jsfiddle plays smoothly for me on the latest version of Safari on a newer macbook pro. YMMV with different hardware/platforms.
Fundamentally, CSS animations generally outperform similar animations implemented in Javascript. I think the Google Maps API is going to cause animation artifacts when you call Marker#setPosition() via timeout internals. See this answer for How to add custom animation on Google Map V3 Marker when I drop each marker one by one? for a deep dive into hacking how Google internally implements the google.maps.Marker#setAnimation method using CSS animations.
Another option is to stop using Google's Marker type, and implement a custom marker type that supports custom CSS animation. This is not as hard as it sounds. Check out a blog post by Mike Bostock on using D3 for custom markers on Google Maps.

Google Maps Api v3 - Refresh Markerclusterer after Domready

I instanciate a MarkerClusterer like this :
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles
});
After loading, I add some marker to the map.
How can I refresh my clusterer so what it takes the new marker into consideration ?
Now, if I zoom out, the new marker is not clustered.
In advance, thank you !
Note : I don't use MasterClusterer Plus

Hmm, I didn't use the markerClusterer.addMarker function...
It works fine now !
-> http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html

Google map v3 API change today?

My map redraws seem to be failing because (at the least) I have been dynamically setting the center via
var currCenter = gmap.getCenter();
Then:
var mapOptions = {
center: new google.maps.LatLng(currCenter.ob, currCenter.pb),
zoom: currZoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Appears currCenter.ob is suddenly undefined this morning. It now looks like it's pb & qb instead of ob & pb. I'm in the process of trying to fix the code, is there anything else anyone knows of that was changed?
EDIT: They're undocumented API fields I shouldn't be using, nevermind I fixed it with the info below. Thanks.

I am assuming gmap is a google map object. If that is the case, then getCenter already returns a LatLng object, so creating a new object via
new google.maps.LatLng()
Is somewhat useless, you could simply use currCenter directly.

The problem is that Api Google maps constantly changing this values (ob, .pb) to Latitude and Longitude, you must use lat() and lng() functions to have a stable version
var mapOptions = {
center: new google.maps.LatLng(currCenter.lat(), currCenter.lng()),
zoom: currZoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
greetings!

To answer you question. YES. Google Maps API did changed last night. I was doing the same thing you did (calling .ob and .pb), but found that I had to change them to .pb and .qb in my code respectively in order to get the Lat and Long.

Rewrote them as .lng() and .lat() instead of .ob, .pb, .qp. I believe that these members should be more stable if you still want to use unofficial member names.

How can I make infowindows resize for tweets in Google Maps v3 with Javascript

I'm trying to add a few tweets to an infowindow in Google Maps. I get the tweets to display in a div that is the content of my infowindow, but it's the wrong size.
I thought by calling 'content_changed' when the marker is clicked, the infowindow would resize - it doesn't.
I'm sure this is pretty straightforward, can someone help me out?
Thanks,
James
var myLatlng = new google.maps.LatLng(51.500261,-0.126793);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(document.getElementById("station"));
google.maps.event.addListener(marker, 'click', function() {
google.maps.event.trigger(infowindow, 'content_changed');
infowindow.open(map,marker);
});

Try to call infowindow.close(); before open(). I'm pretty sure that it will force it to rerender

This isn't exactly a supported solution, but after poking around in Firebug, I found an easy way to force a resize on the window:
infoWindow.b.contentSize = new google.maps.Size(w, h);
google.maps.event.trigger(infoWindow.b, 'contentsize_changed');
As far as what the real W/H should be set to on the first line, that's a matter of looking at infoWindow.b.contentNode and getting a real width/height either through the standard properties or jQuery's methods.
I'm not sure exactly what infoWindow.b is, but it seems like it's some sort of "content" object. I wish they would expose this and document it.

I ended up with:
infoWindowLinea.setContent(infoWindowLinea.getContent());