Marc Ridey - Blog

Adding the AddThis share buttons to Blogger Dynamic Views template

noreply@blogger.com (Marc P.) — Thu, 19 Nov 2015 06:13:00 +0000

Following my previous post on how to modify Blogger Dynamic Views templates, here's a more complex example where I replaced Blogger default share buttons with the AddThis share widget.

The example blog is http://a1b2c3d5.blogspot.com/ and viewing a post looks like this:

To replace the share buttons, I have this code added to the template:

<script language='javascript' type='text/javascript'>
window.onload = function() {
window.addthis_config = window.addthis_config || {};
addthis_config.pubid = 'ra-55c8384bb08b3e27';
blogger.templates().compile(
'{template:ShareAddThisScript}' +
'<script async="async" ' +
'src="//s7.addthis.com/js/300/addthis_widget.js" ' +
'type="text/javascript"/>' +
'{/template:ShareAddThisScript}');
blogger.templates().compile(
blogger.templates()
.template("Main").raw()
.replace("{/template:Main}",
"{ShareAddThisScript}{/template:Main}"));
blogger.templates().compile(
'{template:ShareAddThis}' +
'<div class="addthis_sharing_toolbox"/>' +
'<script type="text/javascript">' +
'window.addthis && addthis.layers && ' +
'addthis.layers.refresh && addthis.layers.refresh();' +
'</'+'script>' +
'{/template:ShareAddThis}');
blogger.templates().compile(
'{template:Sharing}' +
'<div class="share-controls' +
' {block:defer}defer{/block:defer}' +
' {block:delay}delay{/block:delay}"' +
' data-defer="{defer}" data-delay="{delay}">' +
'{ShareAddThis}' +
'</div>' +
'{/template:Sharing}');
blogger.ui().configure().view();
};
</script>

In the onload function, the first two lines define the AddThis account number. You will need to create an AddThis account and replace the value with your own key.

Then there are four calls to blogger.templates().

The first call defines a token ShareAddThisScript to load the AddThis JavaScript library.

The second call add this new token at the end of the Main token, this ensures the library is loaded only once, instead of each time a post is rendered.

The third call defines a new token ShareAddThis that renders the AddThis widget.

The forth call replaces the content of Sharing with the new ShareAddThis token.

How to remove the views menu from Blogger Dynamic Views

noreply@blogger.com (Marc P.) — Fri, 21 Aug 2015 10:20:00 +0000

As a follow up on my first article on Dynamic Views, http://blog.mridey.com/2015/08/how-to-customize-bloggers-dynamic-views.html, here's a quick trick to remove the "views" menu in the menu bar.

Typically at the top of all Dynamic Views templates, you'll see a menu to select views other than the one you selected for your blog. It looks something like:

But what it you would prefer not to have this menu, then go to the template editor and change the view loading code from

<script language='javascript' type='text/javascript'>
window.onload = function() {
blogger.ui().configure().view();
};
</script>

to

<script language='javascript' type='text/javascript'>
window.onload = function() {
blogger.templates().compile(
blogger.templates().template("Header").raw()
.replace(/{block:HasViews[\s\S]*block:HasViews}/,""));
blogger.ui().configure().view();
};
</script>

This will remove the section of the Header conditioned on having views {block:HasViews}...{/block:HasViews} that renders the menu for the views.

The new view looks like:

How to customize Blogger's Dynamic Views templates

noreply@blogger.com (Marc P.) — Mon, 10 Aug 2015 10:38:00 +0000

Dynamic Views uses a token based template format. There isn't much documentation about it but small changes to the existing templates are not too difficult.

The base of the template is something like this:
If token A is defined as: {template:A}<div>{B}</div>{/template:A}
and token B is defined as: {template:B}Hello{/template:B}
then {A} will render as <div>Hello</div>

With this, let look at a few example of changes:

I'm using the "Magazine" template and when a post is displayed, the G+ share button is available at the top of the post while all three G+, Facebook and Twitter buttons are available at the bottom. I'd like to have all three buttons at the top.

When I look as the source code for my blog, I see the lines:

window.onload = function() {
blogger.ui().configure().view();
};

These three lines launch the rendering engine that displays the blog.
When you look at the blogger object, you will find another function called templates
So if you run in the debugger

blogger.templates()

You get back the complete definition of the template loaded:

I'm particularly interested in the list shown above. It's the definition of all the tokens the template has loaded. By scrolling through the list, I found the element I was interested in, it's called "Sharing" and the Sharing object looks like

Now I could try to update blogger.templates().o.Sharing.lg but it wouldn't work. First because the template is parsed by the engine but also because "o" and "lg" are obfuscated values that could change every time the Blogger templates are released.
Lucky for us, there is a function available to update the templates, it's called blogger.templates().compile(), so to update the "Sharing" token, I just have to compile a new value for it using

blogger.templates().compile(
'{template:Sharing}' +
'<div class="share-controls' +
' {block:defer}defer{/block:defer}' +
' {block:delay}delay{/block:delay}"' +
' data-defer="{defer}" data-delay="{delay}">' +
'{SharePlusOne}{ShareTwitter}{ShareFacebook}' +
'</div>' +
'{/template:Sharing}');

So if I place the call to compile() before the call to blogger.ui().configure().view(), I can update the template before it's used and all three buttons are displayed at the top of this post. Note that the < and > characters have to be encoded as < and > because Blogger uses XML templates.

Now the second change I would like is to add an RSS icon next to the search control in the top bar.
So first I'm going to create a new token that displays the RSS icon and navigates to the RSS address:

blogger.templates().compile(
'{template:RSSIcon}' +
'<a id="rssIcon" href="/feeds/posts/default" target="_blank">' +
'<img width="28" height="28" ' +
'src="data:image/png;base64,iVBORw0KGgoAAA...AAElFTkSuQmCC" />' +
'</a>' +
'{/template:RSSIcon}');

Note: I've cut down the data URL, it's very long.

Now I need to insert this new token next to the search control. The search control is in a token called BlogHeader but BlogHeader is very big so I would prefer to modify it rather than copying it. To do this, I'm calling the definition of BlogHeader using .template("BlogHeader").raw(), inserting the RSS token and recompiling the new token:

blogger.templates().compile(
blogger.templates().template("BlogHeader")
.raw().replace("<input", "{RSSIcon}<input"));

Now the RSS icon appears but I need to add some CSS rules to position it. Lucky me, there is a special CustomCSS reserved just for this:

blogger.templates().template(
"CustomCSS",
"#rssIcon {position:absolute;top:19px;right: 230px;}");

And I'm done, the RSS icon is in place and styled

Have fun updating your templates. If you're adventurous, you could even create a complete custom template, I'll try to publish another blog post on how to do this another time. Meanwhile, leave comments and questions below.

How to style, change or disable the Blogger EU Cookie Notice

noreply@blogger.com (Marc P.) — Mon, 03 Aug 2015 07:13:00 +0000

Recently Blogger introduced support for the European Union Cookie Notice.
The notice looks like:

Here are some instructions on how to update the EU cookie notice.

Notice Style:

To change the style of the EU Cookie notice, add a <STYLE> tag in your template <HEAD> tag. For example, this code will position the Cookie notice at the bottom of the window, make it yellow with red text:

<style type='text/css' class='singleton-element'>
#cookieChoiceInfo {
bottom: 0;
top: auto;
}
#cookieChoiceInfo .cookie-choices-inner {
background-color:yellow;
}
#cookieChoiceInfo .cookie-choices-text {
color:red;
}
</style>

The CSS style names to use are:

#cookieChoiceInfo {...}
#cookieChoiceInfo .cookie-choices-inner {...}
#cookieChoiceInfo .cookie-choices-text {...}
#cookieChoiceInfo .cookie-choices-buttons {...}
#cookieChoiceInfo .cookie-choices-button {...}

Notice Text:

To change the text of the EU Cookie notice, add a SCRIPT tag in your template <HEAD> tag.
For example, this code will change the help button text:

<script type="text/javascript">
cookieOptions = {
learn: "See more here"
};
</script>

There are four elements you can change:

msg: The main message of the notice
learn: The text of the “help” button
close: The text of the “ok” button
link: The URL of the page opened when the “help” button is clicked.

Disabling the Notice:

To tell the notice code not to insert the EU Notice, add this <SCRIPT> tag in your template <HEAD> tag:

<script type="text/javascript">
cookieChoices = {};
</script>

More information can be found at http://www.blogger.com/go/cookiechoices

How to setup your Blogger blog with GoDaddy

noreply@blogger.com (Marc P.) — Tue, 25 Jun 2013 02:32:00 +0000

We've recently launched a new feature in custom domains that lets you download a DNS file that contains all the DNS settings you need to configure your blog on a custom domain.

GoDaddy DNS service supports this feature so Let's show you how it's done:

For this demo, I assume you have an existing blog and you have already purchased a domain on GoDaddy.

Step 1: Go to the Settings Tab of your blog in the Blogger UI and click on the "Add a custom domain" link.

Step 2: Enter the URL you would like to use for your blog and press Save. I'm using "www.thisdemoblog.com" but the URL doesn't need to start with www such as "blog.mridey.com" where I published this article.

Step 3: You will get an error. It's expected as you have not configured GoDaddy with the DNS settings required. Now click on the "DNS settings file" link and save the file. Keep this window open, you'll need it later.

Step 4: In a new window, go to GoDaddy, login, go to the Domain Control Panel and click on your domain name.

Step 5: Click on the "DNS Zone File" tab.

Step 6: Click on the Edit button.

Step 7: We need to delete some of the existing records that GoDaddy adds by default. Select all the "A" records with "@" as host as well as the CNAME record "www" (if the URL you want to use starts with www) and press the Delete button.

Step 8: Press the "Save Zone File" button.

Step 9: Press Ok to confirm.

Step 10: Press Ok to confirm again. :)

Step 11: Now let's load the new records. Click the Import/Export button and select "Import".

Step 12: Click "Select File" and find the file you have saved in step 3, then click the "I understand ..." checkbox and press the Ok button.

Step 13: Press Ok to confirm.

Step 14: You should be able to see your new records loaded in GoDaddy. Four "A" records as well as two CNAME records. All good.

Step 15: Go back to the Blogger settings window we kept open in Step 3 and click "Save" again.

Step 16: If like me the GoDaddy DNS server processed the changes really quickly, it should all work fine and the settings should be accepted. You should be back to the main settings with your new custom domain accepted as the blog Address. So click on "Edit".

If Step 16 fails, be patient and retry later. It can take up to 48h for DNS settings to propagate.

Step 17: Enable the "Redirect ..." checkbox and press Save. This is to allow "naked domain" redirect i.e. when users type your domain name without the www at the beginning.

Step 18: Finally click the "View blog" button at the top of Blogger UI, it should all work fine and your blog should now be enabled with a custom domain.

How to setup your Blogger blog with a custom domain from 1and1.com - Simplified

noreply@blogger.com (Marc P.) — Sat, 23 Mar 2013 08:37:00 +0000

Good news, the domain ownership verification system has been modified to use shorter string, allowing it to work with the limited 1and1.com DNS system.

Update: If you have a domain with GoDaddy, follow these instructions: http://blog.mridey.com/2013/06/how-to-setup-your-blogger-blog-with.html

Here's how to setup your 1and1.com domain for Blogger.

Step 1: Get the Blogger settings

- Go to the basic settings of your blog in the Blogger UI.

- Click the "Add a custom domain" link

- Click the "Switch to advanced settings" link

- Enter the subdomain and domain you would like your blog to use. In my case, I purchased domain "bloggeronline.info" and choose to have my blog use "blog.bloggeronline.info". Note that you need to specify a subdomain like "blog" or "www" with your domain name. Then press "Save". It will fail with "Error 12". This is expected.

You will now see two lines displayed that need to be configured on the 1and1 website.

In my case the two lines are:

blog, ghs.goog.com

mf3relchxuxx, gv-kgyql46c766bxw.dv.googlehosted.com

The first line is always the same for everyone, the second line is specific to your own blog and your own account so don't copy my example, it won't work.

Step 2: Go to 1and1.com dashboard

- Go to the 1and1.com website, login, go to domain management

- Click the checkbox on your domain and select DNS -> Edit DNS Settings

Select DNS, Other IP address and enter 216.239.32.21 and press OK and go back to the 1and1 Overview dashboard.

- Back on the dashboard, click New->Create subdomain

Enter "blog" (or www, or any other string you want for your blog, press OK and go back to the 1and1 Overview dashboard.

- Click the checkbox on that new subdomain, select DNS->Edit DNS settings

Select CNAME, enter "ghs.google.com", press OK and go back to the 1and1 Overview dashboard.

- Back on the dashboard, click New -> Create subdomain again

Enter the first element of the second line we saved in the Blogger settings, mine was "mf3relchxuxx", yours will be different. Press OK and go back to the 1and1 Overview dashboard.

- Click the checkbox on that second new subdomain, select DNS->Edit DNS settings

Select CNAME, enter the second section of the second line. Mine is "gv-kgyql46c766bxw.dv.googlehosted.com", yours will be different. Press OK and go back to the 1and1 Overview dashboard.

- Now you should have two subdomains and one domain listed in your dashboard, something like:

Step 3: Wait and wait ...

We need the new settings entered in 1and1.com to be public and visible to Google. This can take up to 48h although usually it's more like 3h.

Step 4: Return to Blogger and apply the custom domain again.

- Go through the steps listed in Step 1. If the domain has been registered correctly, you should no longer get an "Error 12" but instead your domain should be accepted and this screen appear:

- Click the edit link

Make sure you click the "Redirect" checkbox and press Save again. This will make your naked domain (bloggeronline.info in my case) also work for your blog.

This is brand new so if you have problems, please let me know.

Please remember to +1 my post, and reshare it on Google+, Facebook or Twitter, Thanks :)

Building a blog with Google+

noreply@blogger.com (Marc P.) — Thu, 07 Feb 2013 04:20:00 +0000

Building a successful blog requires a simple element: Good content.
Write good content and readers will come.

I can’t help you with good content, but I can provide some ideas on how to get readers coming sooner rather than later.

Let’s first ignore technology and look at how a blog grows from zero readers to millions of readers. To build readership, you need to complete three steps:

First, your content must be discoverable So people that have never seen your blog can be directed to it. People discover content from search results, from reference in other content, from recommendations from friends.
Then once you have the attention of the reader, you need to ensure you retain them, you need to ensure that next time you publish more content on your blog, those readers are notified of the new content and come back to read it. You want them to subscribe to your blog.
But those two step alone will just provide slow organic growth. To achieve strong growth, you need referrals. You need your existing readers to mention your blog to their friends, to recommend your blog to others.

All social networks will help you achieve this and to be successful, you probably want to cover as many of them as possible. This post discuss how to configure your blog with Google+ to maximize readership but the same logic can be applied to Twitter or Facebook.

1. Make your posts discoverable

When you publish a post in Blogger, it will appear automatically in Google Search. That’s great but there are extra steps you can take to make your posts more visible:

- Select a good descriptive title for the post. This is critical for good search results.
- Set a search description on the post. This should be a small snippet of text that reflects the content of the post. It will be used by Google Search to better index your post and may appear in the search result instead of the first few lines of the post.

Note: Read Google SEO Starter Guide for more great ideas on effective SEO

- Link your blog to a Google+ Page and share your post to the G+ Stream. As well as providing a second entry in Google search, it will make your blog visible in Google+. When you share, make sure your share the post publicly, not just to your circles. A public share will be visible to anyone, not just people that are already subscribe to your blog.

To create a Google+ page and link it to your blog, just open the Google+ tab in the Blogger UI. Enable the "Prompt to share after posting" check box and every time you share, remember to share with the public Circle. See Socialize and grow your blog with Google+

2. Retain your readers

Now that you have your blog linked to Google+, add the Google+ Follow widget to your blog and encourage your readers to follow your blog, i.e. to add your Google+ page to their circles. Once they add your Google+ Page to their circles, they will receive notification when you share your post and see a snippet of your post in their stream.

See Grow your audience with the Google+ Followers gadget

3. Grow your readership

Add the +1 and +Share widgets to your template and encourage your readers to +1 and +Share your content. Each +1 will increase the quality rating of your posts, making them more likely to appear more frequently in Google+ trends and search results. Each +Share from a reader to their circles forwards your post to their friends.

See Two new gadgets to make your blog better with Google+

Four simple steps:

- Link your blog to a Google+ Page.
- Add the +1, +Share and +Follow widgets to your template.
- Share your posts publicly.
- Encourage your readers to +1, share and follow your blog.

How to setup your Blogger blog with a custom domain from 1and1.com

noreply@blogger.com (Marc P.) — Thu, 25 Oct 2012 05:50:00 +0000

Update:

The Domain ownership system has been updated and using a 1and1.com domain is now much simpler. use the new instructions here: http://blog.mridey.com/2013/03/how-to-setup-your-blogger-blog-with.html

==============================================

Recently, Blogger added extra security when configuring a blog using a custom domain.
You know need to setup two CNAME values in the DNS settings of your domain for Blogger to recognize your custom domain settings.

Personally, I purchase all my domains with godaddy.com but let's assume for now that you have purchased a domain with 1and1.com and you would like to setup that domain on Blogger.

Warning: If you are using 1and1 hosting services to display a website as well as a Blogger blog, these instructions will disable the website. Please post a comment with your website address and I'll check how these instructions must be updated. If you're using eMail, remember to complete the optional eMail step.

Step 1: Get the DNS settings for Blogger

First, go to www.blogger.com, select your blog and go to the basic settings:

Click on "Add a custom domain" and then on "Switch to advanced settings".
Enter "www." and the domain name you purchased. In my example, "www.mydomainname.com" and press "Save":

As you can see, Blogger returned back an error because of missing CNAME entries in your domain.
Let's see what we need to do to configure these settings.

Copy/paste the CNAME values displayed into a text editor (or keep the Blogger window opened), you will need them in step 2.

Step 2: Configure CloudNS

As 1and1.com DNS system is not able to be configured with the values required by Blogger. you will need an external DNS hosting service. This does not require your to transfer your domain from 1and1.com. We are simply going to stop using 1and1 DNS servers and use CloudNS free DNS service instead.

Go to www.cloudns.net and create an account. once you have verified your email address, you should be able to access the dashboard. It should look like this:

Next in "DNS zones", click "Add new", enter your domain name and press create:

You will get a new DNS zone with the NS records already set:

Now click "Add new record", select CNAME, type "www" and "ghs.google.com":

Note: If you're using a subdomain, like "blog.mydomainname.com" then enter "blog" instead of "www" for the first CNAME pointing to "ghs.google.com".

Then add a second CNAME with the values that were displayed by Blogger on the settings page.
Mine were "dqbhffrggxdu" and "gv-lca7dpm4ctjmlm3l3jhfftuepgwgzosehj7i2gqrg7y7wv37hima.domainverify.googlehosted.com." but yours will be different. They are specific to the domain name your are trying to register.

Finally add four A records with IPs 216.239.32.21, 216.239.34.21, 216.239.36.21 and 216.239.38.21. Leave the Host entry empty.

Your final dashboard should look something like this:

Optional eMail step:

If you are using email on the domain, you need to add two additional records in cloudNS to continue using 1and1 mail servers.

The two records should be of type "MX". Leave the "Host" field empty, enter "mx00.1and1.com" in the "Points to" field with a priority of 10, and a second record with "mx01.1and1.com" in the "Points to" field with a priority of 20.

Step 3: Configure 1and1.com

So now, let's go to the 1and1.com Control Panel and configure your domain to use CloudNS for DNS services.

Your control panel should look something like this:

Click the checkbox in front of the domain name and then select DNS -> Edit DNS Settings:

In the next screen, select "DNS" and "My name server" and enter the CloudNS name servers.
They are "ns1.cloudns.net", "ns2.cloudns.net", "ns3.cloudns.net" and "ns4.cloudns.net".

Now press "Ok" and it goes back to the Control Panel. The status of the domain will show "updating" and it can take up to 48h for 1and1.com to complete the update.

Step 4: Configure blogger.com

Once the update is done, go back to blogger.com, back to the Advance settings shown in step 1, enter "www." + your domain name such as "www.mydomainname.com" as the custom blog URL and press save. Blogger will verify your DNS settings and apply the new custom domain.

Note: Remember to enable the "Redirect ...." checkbox if you would like your domain name to also point to your blog like "http://mydomainname.com" without the "www" in front.

You may still need to wait about 48h for all DNS servers to have mirrored the changes and point to Blogger instead of 1and1.com.

I hope this helped. Remember to share this article on Google+ and leave comments if I missed something or some steps need more explanations. Thanks.

Custom maps styles using the "Styled Maps Wizard"

noreply@blogger.com (Unknown) — Fri, 04 May 2012 05:13:00 +0000

I've just been asked for help on how to create a map with the Terrain background and no roads, no labels.
It is very easy to do using the "Styled Maps Wizard" available here:
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

- Click on Map in the top right
- Select terrain ON

At this point you should have a map with the terrain and labels.

- Click on "All" in the top left
- Click on "Visibility" -> Off

At this point you should have a map with the terrain and no labels but no water either.

- Click on Add in the top left
- Click on Water in the top left
- Click "Geometry"
- Click on "Visibility" -> On

Now you should have a map with terrain, water and no labels.

- Click on "Show JSON"
- It should display:

[
{
stylers: [
{ visibility: "off" }
]
},{
featureType: "water",
elementType: "geometry",
stylers: [
{ visibility: "on" }
]
}
]

Use this value to style your map as follow:

var map = new google.maps.Map(
document.getElementById('map_canvas'),
{
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.TERRAIN,
styles: [
{
stylers: [
{ visibility: "off" }
]
},{
featureType: "water",
elementType: "geometry",
stylers: [
{ visibility: "on" }
]
}
]
});

Hope this helps :)

Dynamic markers in Maps API Javascript v3

noreply@blogger.com (Unknown) — Tue, 04 Oct 2011 12:46:00 +0000

Another option for labels is to use dynamic markers.
These are provided by the Google Chart tools API.
You can set the shape, color and text of each marker.

The documentation for the markers can be found at
http://code.google.com/apis/chart/infographics/docs/dynamic_icons.html.

Here's a simple example on how to display a marker and its shadow with custom text:

   
   var latLng = new google.maps.LatLng(40, -100);
   var marker = new google.maps.Marker({
      position: latLng,
      draggable: true,
      map: map,
      icon: new google.maps.MarkerImage(
        "http://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bb|Label%20123|FF8080|000000",
        null, null, new google.maps.Point(0, 42)),
      shadow: new google.maps.MarkerImage(
        "http://chart.googleapis.com/chart?chst=d_bubble_text_small_shadow&chld=bb|Label%20123",
        null, null, new google.maps.Point(0, 45))
    });

And the marker should look like this:

Label overlay example for Google Maps API v3 - Revisited

noreply@blogger.com (Unknown) — Sun, 22 May 2011 07:31:00 +0000

A while back I published a post showing how to add a label to a marker. I got a lot of comments on that post, in particular regarding adding support for visibility, zIndex and click event.

So here's a revised version.

// Define the overlay, derived from google.maps.OverlayView
function Label(opt_options) {
// Initialization
this.setValues(opt_options);

// Label specific
var span = this.span_ = document.createElement('span');
span.style.cssText = 'position: relative; left: -50%; top: -8px; ' +
'white-space: nowrap; border: 1px solid blue; ' +
'padding: 2px; background-color: white';

var div = this.div_ = document.createElement('div');
div.appendChild(span);
div.style.cssText = 'position: absolute; display: none';
};
Label.prototype = new google.maps.OverlayView;

// Implement onAdd
Label.prototype.onAdd = function() {
var pane = this.getPanes().overlayImage;
pane.appendChild(this.div_);

// Ensures the label is redrawn if the text or position is changed.
var me = this;
this.listeners_ = [
google.maps.event.addListener(this, 'position_changed', function() { me.draw(); }),
google.maps.event.addListener(this, 'visible_changed', function() { me.draw(); }),
google.maps.event.addListener(this, 'clickable_changed', function() { me.draw(); }),
google.maps.event.addListener(this, 'text_changed', function() { me.draw(); }),
google.maps.event.addListener(this, 'zindex_changed', function() { me.draw(); }),
google.maps.event.addDomListener(this.div_, 'click', function() {
if (me.get('clickable')) {
google.maps.event.trigger(me, 'click');
}
})
];
};

// Implement onRemove
Label.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);

// Label is removed from the map, stop updating its position/text.
for (var i = 0, I = this.listeners_.length; i < I; ++i) {
google.maps.event.removeListener(this.listeners_[i]);
}
};

// Implement draw
Label.prototype.draw = function() {
var projection = this.getProjection();
var position = projection.fromLatLngToDivPixel(this.get('position'));

var div = this.div_;
div.style.left = position.x + 'px';
div.style.top = position.y + 'px';

var visible = this.get('visible');
div.style.display = visible ? 'block' : 'none';

var clickable = this.get('clickable');
this.span_.style.cursor = clickable ? 'pointer' : '';

var zIndex = this.get('zIndex');
div.style.zIndex = zIndex;

this.span_.innerHTML = this.get('text').toString();
};

And to use it, here's a little example:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>
Label Overlay Example
</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="label.js"></script>
<script type="text/javascript">
var marker;

function initialize() {
var latLng = new google.maps.LatLng(40, -100);

var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 5,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

  marker = new google.maps.Marker({
  position: latLng,
  draggable: true,
  zIndex: 1,
  map: map,
  optimized: false
  });

  var label = new Label({
  map: map
  });
  label.bindTo('position', marker);
  label.bindTo('text', marker, 'position');
  label.bindTo('visible', marker);
  label.bindTo('clickable', marker);
  label.bindTo('zIndex', marker);

  google.maps.event.addListener(marker, 'click', function() { alert('Marker has been clicked'); })
  google.maps.event.addListener(label, 'click', function() { alert('Label has been clicked'); })
}

function showHideMarker() {
  marker.setVisible(!marker.getVisible());
}

function pinUnpinMarker() {
  var draggable = marker.getDraggable();
  marker.setDraggable(!draggable);
  marker.setClickable(!draggable);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="height: 200px; width: 200px"></div>
<button type="button" onclick="showHideMarker();">Show/Hide Marker</button>
<button type="button" onclick="pinUnpinMarker();">Pin/Unpin Marker</button>
</body>
</html>

The label can be used on its own or bound to a marker.
It supports:

set('position', latLng);
get('position')
set('text', string);
get('text);
set('visible', boolean);
get('visible');
set('clickable', boolean);
get('clickable');
set('zIndex', index);
get('zIndex');

and provides events:

position_changed
text_changed
visible_changed
clickable_changed
zindex_changed
click

Using StreetViewService in Maps API Javascript v3

noreply@blogger.com (Unknown) — Mon, 08 Nov 2010 11:49:00 +0000

Based on my recent post, I've added code to change the content of the infowindow if the panorama we try to display doesn't exist. This needs to be done using StreetViewService as currently the StreetViewPanorama doesn't have an event or property to notify us of a failure to load a panorama.

The code that changed:

// Create a StreetViewService to be able to check
    // if a given LatLng has a corresponding panorama.
    var service = new google.maps.StreetViewService();
    
    // Set the infowindow content and display it on marker click.
    // Use a 'pin' MVCObject as the order of the domready and marker click events is not garanteed.
    function openInfoWindow(marker) {
      title.innerHTML = marker.getTitle();
      streetview.style['visibility'] = 'hidden';
      service.getPanoramaByLocation(marker.getPosition(), 50, function(result, status) {
        if (status == google.maps.StreetViewStatus.OK) {
          pin.set("position", marker.getPosition());
          streetview.style['visibility'] = '';
        }
      })
      infowindow.open(map, marker);
    }

The StreetViewService (see Reference and Example) returns a status code. If it's OK, I make the DIV that contains the StreetView panorama visible. I could have also added text.

And the full code:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Markers, Info Window and StreetView</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  function initialize() {

    // Create the map 
    // No need to specify zoom and center as we fit the map further down.
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: false
    });
 
    // Create the shared infowindow with two DIV placeholders
    // One for a text string, the other for the StreetView panorama.
    var content = document.createElement("DIV");
    var title = document.createElement("DIV");
    content.appendChild(title);
    var streetview = document.createElement("DIV");
    streetview.style.width = "200px";
    streetview.style.height = "200px";
    content.appendChild(streetview);
    var infowindow = new google.maps.InfoWindow({
      content: content
    });

    // Define the list of markers.
    // This could be generated server-side with a script creating the array.
    var markers = [
      { lat: -33.85, lng: 151.05, name: "marker 1" },
      { lat: -33.90, lng: 151.35, name: "marker 2" },
      { lat: -33.95, lng: 151.15, name: "marker 3" },
      { lat: -33.85, lng: 151.15, name: "marker 4" }
    ];

    // Create the markers
    for (index in markers) addMarker(markers[index]);
    function addMarker(data) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.lat, data.lng),
        map: map,
        title: data.name
      });
      google.maps.event.addListener(marker, "click", function() {
        openInfoWindow(marker);
      });
    }

    // Zoom and center the map to fit the markers
    // This logic could be conbined with the marker creation.
    // Just keeping it separate for code clarity.
    var bounds = new google.maps.LatLngBounds();
    for (index in markers) {
      var data = markers[index];
      bounds.extend(new google.maps.LatLng(data.lat, data.lng));
    }
    map.fitBounds(bounds);

    // Handle the DOM ready event to create the StreetView panorama
    // as it can only be created once the DIV inside the infowindow is loaded in the DOM.
    var panorama = null;
    var pin = new google.maps.MVCObject();
    google.maps.event.addListenerOnce(infowindow, "domready", function() {
      panorama = new google.maps.StreetViewPanorama(streetview, {
          navigationControl: false,
          enableCloseButton: false,
          addressControl: false,
          linksControl: false,
          visible: true
      });
      panorama.bindTo("position", pin);
    });

    // Create a StreetViewService to be able to check
    // if a given LatLng has a corresponding panorama.
    var service = new google.maps.StreetViewService();
    
    // Set the infowindow content and display it on marker click.
    // Use a 'pin' MVCObject as the order of the domready and marker click events is not garanteed.
    function openInfoWindow(marker) {
      title.innerHTML = marker.getTitle();
      streetview.style['visibility'] = 'hidden';
      service.getPanoramaByLocation(marker.getPosition(), 50, function(result, status) {
        if (status == google.maps.StreetViewStatus.OK) {
          pin.set("position", marker.getPosition());
          streetview.style['visibility'] = '';
        }
      })
      infowindow.open(map, marker);
    }
  }
</script> 
</head> 
<body onload="initialize()"> 
  <div id="map_canvas"></div> 
</body> 
</html>

Maps API Javascript v3 - Multiple Markers with multiple infowindows and StreetView

noreply@blogger.com (Unknown) — Mon, 08 Nov 2010 11:17:00 +0000

Similar to the previous post, I have a map with multiple markers but multiple InfoWindows, one per marker. When a marker is clicked, its infowindow is displayed with the marker title and the StreetView panorama at this location.

What to retain from this example:

- How to add multiple markers to the map
- How to manage one InfoWindow per marker
- How to add the StreetView panorama as well as other text in the infowindow
- How to zoom the map to include all the markers

I'll be posting another blog tomorrow showing how to use StreetViewService to detect if a panorama doesn't exist.

Here's the code:

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Markers, Info Window and StreetView</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  function initialize() {

    // Create the map 
    // No need to specify zoom and center as we fit the map further down.
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: false
    });
 
    // Define the list of markers.
    // This could be generated server-side with a script creating the array.
    var markers = [
      { lat: -33.85, lng: 151.05, name: "marker 1" },
      { lat: -33.90, lng: 151.10, name: "marker 2" },
      { lat: -33.95, lng: 151.15, name: "marker 3" },
      { lat: -33.85, lng: 151.15, name: "marker 4" }
    ];

    // Create the markers ad infowindows.
    for (index in markers) addMarker(markers[index]);
    function addMarker(data) {
      // Create the marker
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.lat, data.lng),
        map: map,
        title: data.name
      });
    
      // Create the infowindow with two DIV placeholders
      // One for a text string, the other for the StreetView panorama.
      var content = document.createElement("DIV");
      var title = document.createElement("DIV");
      title.innerHTML = data.name;
      content.appendChild(title);
      var streetview = document.createElement("DIV");
      streetview.style.width = "200px";
      streetview.style.height = "200px";
      content.appendChild(streetview);
      var infowindow = new google.maps.InfoWindow({
        content: content
      });

      // Open the infowindow on marker click
      google.maps.event.addListener(marker, "click", function() {
        infowindow.open(map, marker);
      });
    
      // Handle the DOM ready event to create the StreetView panorama
      // as it can only be created once the DIV inside the infowindow is loaded in the DOM.
      google.maps.event.addListenerOnce(infowindow, "domready", function() {
        var panorama = new google.maps.StreetViewPanorama(streetview, {
            navigationControl: false,
            enableCloseButton: false,
            addressControl: false,
            linksControl: false,
            visible: true,
            position: marker.getPosition()
        });
      });
    }

    // Zoom and center the map to fit the markers
    // This logic could be conbined with the marker creation.
    // Just keeping it separate for code clarity.
    var bounds = new google.maps.LatLngBounds();
    for (index in markers) {
      var data = markers[index];
      bounds.extend(new google.maps.LatLng(data.lat, data.lng));
    }
    map.fitBounds(bounds);
  }
</script> 
</head> 
<body onload="initialize()"> 
  <div id="map_canvas"></div> 
</body> 
</html>

Maps API Javascript V3 - Multiple Markers, InfoWindow and StreetView

noreply@blogger.com (Unknown) — Mon, 08 Nov 2010 10:45:00 +0000

Another interesting example. For this blog, I have a map with multiple markers and a single InfoWindow shared between the markers. When a marker is clicked, the infowindow is displayed with the marker title and the StreetView panorama at this location.

What to retain from this example:

- How to add multiple markers to the map
- How to share a single InfoWindow for all the markers
- How to add the StreetView panorama as well as other text in the infowindow
- How to zoom the map to include all the markers

I'll be posting another blog tomorrow showing how to use multiple infowindows and how to use StreetViewService to detect if a panorama doesn't exist.

Here's the code:

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Markers, Info Window and StreetView</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  function initialize() {

    // Create the map 
    // No need to specify zoom and center as we fit the map further down.
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: false
    });
 
    // Create the shared infowindow with two DIV placeholders
    // One for a text string, the other for the StreetView panorama.
    var content = document.createElement("DIV");
    var title = document.createElement("DIV");
    content.appendChild(title);
    var streetview = document.createElement("DIV");
    streetview.style.width = "200px";
    streetview.style.height = "200px";
    content.appendChild(streetview);
    var infowindow = new google.maps.InfoWindow({
   content: content
    });

    // Define the list of markers.
    // This could be generated server-side with a script creating the array.
    var markers = [
      { lat: -33.85, lng: 151.05, name: "marker 1" },
      { lat: -33.90, lng: 151.10, name: "marker 2" },
      { lat: -33.95, lng: 151.15, name: "marker 3" },
      { lat: -33.85, lng: 151.15, name: "marker 4" }
    ];

    // Create the markers
    for (index in markers) addMarker(markers[index]);
    function addMarker(data) {
   var marker = new google.maps.Marker({
  position: new google.maps.LatLng(data.lat, data.lng),
  map: map,
        title: data.name
   });
   google.maps.event.addListener(marker, "click", function() {
  openInfoWindow(marker);
   });
    }

    // Zoom and center the map to fit the markers
    // This logic could be conbined with the marker creation.
    // Just keeping it separate for code clarity.
    var bounds = new google.maps.LatLngBounds();
    for (index in markers) {
   var data = markers[index];
   bounds.extend(new google.maps.LatLng(data.lat, data.lng));
 }
 map.fitBounds(bounds);

    // Handle the DOM ready event to create the StreetView panorama
    // as it can only be created once the DIV inside the infowindow is loaded in the DOM.
    var panorama = null;
    var pin = new google.maps.MVCObject();
    google.maps.event.addListenerOnce(infowindow, "domready", function() {
      panorama = new google.maps.StreetViewPanorama(streetview, {
       navigationControl: false,
       enableCloseButton: false,
       addressControl: false,
       linksControl: false,
       visible: true
      });
      panorama.bindTo("position", pin);
    });
    
    // Set the infowindow content and display it on marker click.
    // Use a 'pin' MVCObject as the order of the domready and marker click events is not garanteed.
    function openInfoWindow(marker) {
   title.innerHTML = marker.getTitle();
   pin.set("position", marker.getPosition());
   infowindow.open(map, marker);
    }
  }
</script> 
</head> 
<body onload="initialize()"> 
  <div id="map_canvas"></div> 
</body> 
</html>

How to display a map inside StreetView

noreply@blogger.com (Unknown) — Fri, 05 Nov 2010 12:11:00 +0000

It's fairly easy to display a small map in the corner of a StreetView panorama.
You just need to add a small map on top of the StreetView panorama and bind it.

Code:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<title>Google Maps JavaScript API Example: Street View with Map</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" /> 
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<script type="text/javascript"> 
 
  function initialize() {
    var panorama = new  google.maps.StreetViewPanorama(document.getElementById("pano"), {
   position: new google.maps.LatLng(42.345573,-71.098326),
   visible: true
    });
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(42.345573,-71.098326),
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: true,
      streetView: panorama
    });

    google.maps.event.addListener(panorama, "position_changed", function() {
   map.setCenter(panorama.getPosition());
    });
  }
</script> 
</head> 
<body onload="initialize()">
  <div style="position:absolute;"> 
    <div id="pano" style="z-index:0; width: 800px; height: 600px;"></div> 
    <div id="map_canvas" style="z-index:1; position:absolute; right:0px; bottom:0px; width: 200px; height: 150px"></div>
  </div> 
</body> 
</html>

How to embed StreetView in an infowindow

noreply@blogger.com (Unknown) — Fri, 05 Nov 2010 11:36:00 +0000

I've received a number of queries on how to get StreetView inside an infowindow showing the panorama of the marker bound to the infowindow.

Here's a quick example.
Click on the marker to display the infowindow.
Drag the marker to get a different panorama.

Code:

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Info Window with StreetView</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
function initialize() {
var myLatlng = new google.maps.LatLng(-33.866943,151.195512);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
}

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

var contentString = '<div id="content" style="width:200px;height:200px;"></div>';

var infowindow = new google.maps.InfoWindow({
content: contentString
});

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Click Me',
draggable: true
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});

var pano = null;
google.maps.event.addListener(infowindow, 'domready', function() {
if (pano != null) {
pano.unbind("position");
pano.setVisible(false);
}
pano = new google.maps.StreetViewPanorama(document.getElementById("content"), {
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
enableCloseButton: false,
addressControl: false,
linksControl: false
});
pano.bindTo("position", marker);
pano.setVisible(true);
});

google.maps.event.addListener(infowindow, 'closeclick', function() {
pano.unbind("position");
pano.setVisible(false);
pano = null;
});

}

</script> 
</head> 
<body onload="initialize()"> 
<div id="map_canvas"></div> 
</body> 
</html>

How to create and display a custom Street View panorama using Maps Javascript API v3

noreply@blogger.com (Unknown) — Thu, 27 May 2010 04:30:00 +0000

To display a custom panorama, first you need a tileset.

There are no restrictions to the tileset size or aspect ratio, the tile size or aspect ratio and the number of tiles used.

Just know that StreetView uses an equirectangular projection (http://en.wikipedia.org/wiki/Equirectangular_projection)

so the panorama will be stretched to wrap exactly around a sphere horizontally and exactly half a sphere vertically. For this reason, a panorama with an aspect ratio 2:1 is best.

There are many tools on the market to create the initial panorama. Look for tile stitching. Place a digital camera on a tripod, take enough pictures to cover every point of view from top to bottom, all around. Then use the stitching software to create a cylindrical projection of you panorama. If you are not covering the panorama from top to bottom, create the panorama as if you had and fill in the missing space with a neutral color.

Once you have created your original panorama and you have decided on the tile size, you need to create each version of the panorama for successive 1/2 height 1/2 width sizes until the panorama fits into one tile.

For example, if you have a panorama of 6000 * 3000 pixels and you use a 512 * 512 tile size, you will need to create:

- panorama 6000 * 3000 (12*6 tiles)

- panorama 3000 * 1500 (6*3 tiles)

- panorama 1500 * 750 (3*2 tiles)

- panorama 750 * 375 (2*1 tiles)

- panorama 375 * 187 (1*1 tile)

When the tiles cover more area than the panorama, have the unused section of the right most tile replicate the left most tile, and the unused section of the bottom most tile filled with a neutral color.

The panorama with a single tile is zoom = 0, then 1,2,3,4 .. so in the example above, the largest panorama is zoom 4.

Once you have created the panoramas, cut them into tiles and name each tile according to its position and zoom level. The top left tile is always tile (0,0).

For the rest of this email, i'll assume that the naming convention used for the tiles is "panorama_z_x_y.jpg".

Now the minimum required to display this panorama is:


        var panorama = new google.maps.StreetViewPanorama(
            document.getElementById('streetview')
        );

        panorama.registerPanoProvider(function(pano) {
          return {
            tiles: {
              tileSize: new google.maps.Size(512, 512),
              worldSize: new google.maps.Size(6000, 3000),
              getTileUrl: function(room, zoom, x, y) {
                return "http://mydomain/somepath/" + room + '_' + zoom + '_' + x + '_' + y + '.jpg';
              }
          };
        });

        panorama.setPano('panorama');

If you want to display an address, a copyright and navigation links, the data to be returned looks like:

        var panorama = new google.maps.StreetViewPanorama(
            document.getElementById('streetview')
        );

        panorama.registerPanoProvider(function(pano) {
          return {
            location: {
              pano: pano,
              description: "My panorama"
            },
            links: links, // an array of StreetViewLink.
            copyright: 'Imagery (c) 2009 Me',
            tiles: {
              tileSize: new google.maps.Size(512, 512),
              worldSize: new google.maps.Size(6000, 3000),
              originHeading: 90, // To align the panorama with the headings in the links.
              getTileUrl: function(room, zoom, x, y) {
                return "http://mydomain/somepath/" + room + '_' + zoom + '_' + x + '_' + y + '.jpg';
              }
            }
          };
        });

        panorama.setPano('panorama');

The originHeading is the compass reading at the point where the left and right borders of the panorama join.

For example, have a look at this tile set:

Zoom 0:

http://syd-office-panos.appspot.com/p/reception_0_0_0.jpg

Zoom 1:

http://syd-office-panos.appspot.com/p/reception_1_0_0.jpg

http://syd-office-panos.appspot.com/p/reception_1_1_0.jpg

To test this tileset, add this code on your page:

function initialize() {
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('streetview'),
    {
      panoProvider: function(pano) {
        return {
          location: {
            pano: pano,
            description: 'Google Australia - Reception'
          },
          copyright: 'Imagery \xA9 2010 Google Inc.',
          links: [],
          tiles: {
            tileSize: new google.maps.Size(512, 512),
            worldSize: new google.maps.Size(8192, 4096),
            originHeading: 0,
            getTileUrl: function(room, zoom, x, y) {
              return 'http://syd-office-panos.appspot.com/p/reception_' +
                  zoom + '_' + x + '_' + y + '.jpg';
            }
          }
        };
      },
      pano: 'google'
    }
  );
}

Custom panoramas in Maps Javascript API v3 - Street View

noreply@blogger.com (Unknown) — Thu, 20 May 2010 02:17:00 +0000

How to display a custom panorama

Register a pano provider in the panorama that returns a StreetViewPanoramaData. The critical element is the 'tiles' property that defines the set of tiles required for the panorama.

panorama.registerPanoProvider(function(pano) {
return {
location: {
pano: pano,
},
tiles: {
tileSize: new google.maps.Size(256, 256),
worldSize: new google.maps.Size(256 * 64, 256 * 32),
originHeading: 110,
getTileUrl: function(pano, zoom, x, y) {
return 'http://someurl/somepath/' + pano + '/' + zoom + '_' + x + '_' + y + '.png';
}
}
};
});

How to set the address text in a custom panorama

Set the description value of the StreetViewLocation in the StreetViewPanoramaData object return by the panoProvider.

panorama.registerPanoProvider(function(pano) {
return {
location: {
...
description: 'Address Text'
},
...
};
});

How to set the copyright in a custom panorama

Set the copyright value in the StreetViewPanoramaData object return by the panoProvider.

panorama.registerPanoProvider(function(pano) {
return {
copyright: 'Copyright text',
...
};
});

How to set the links in a custom panorama

Provide a links array of StreetViewLink in the StreetViewPanoramaData object return by the panoProvider.

panorama.registerPanoProvider(function(pano) {
return {
links: [
{
'heading': 171,
'description' : 'Link Text 1',
'pano' : '5pXLKKqtDowwU0mrpx8pWw'
},
{
'heading': 351,
'description' : 'Link Text 2',
'pano' : '0682ricVXBNcNuEcpSb-rA'
}
],
...
};
});

How to set specify the color and opacity of a link in a custom panorama

Set the roadColor and roadOpacity fields in the StreetViewLink objects in the links array.

panorama.registerPanoProvider(function(pano) {
return {
links: [
{
...
'roadColor' : '#0020C0',
'roadOpacity' : 0.6
},
...
],
...
};
});

Controls in Maps Javascript API v3 - Street View

noreply@blogger.com (Unknown) — Thu, 20 May 2010 02:13:00 +0000

Controls in Street View are very similar to the Map controls.

How to show/hide the address control

panorama.set('addressControl', true/false);

panorama.setOptions({
addressControl: true/false
});

how to position the address control in the panorama

panorama.setOptions({
'addressControlOptions': {
'position': google.maps.ControlPosition.TOP_RIGHT,
...
}
});

How to show/hide the links control

panorama.set('linksControl', true/false);

panorama.setOptions({
linksControl: true/false
});

How to add a link in the links control

var links = panorama.getLinks();
links.push({
'yaw': 150,
'description' : 'For Sale',
'pano' : 'entrance',
'roadColor': 'blue',
'roadOpacity': 0.4
});

then

panorama.setLinks(links);

panorama.setOptions({
links: links
});

panorama.notify('links');

how to add a custom control in the panorama

var aLink = document.createElement('a');
aLink.innerHTML = "Hello";
aLink.href = "http://google.com";
panorama.controls[google.maps.ControlPosition.BOTTOM].push(aLink);

How to show/hide the close button

panorama.set('enableCloseButton', true/false);

panorama.setOptions({
enableCloseButton: true/false
});

How to detect the close button has been clicked

google.maps.event.addListener(panorama, 'closeclick', function() {});

How to show/hide the Navigation controls

panorama.set('navigationControl', true/false);

panorama.setOptions({
navigationControl: true/false
});

How to select the style and position of the navigation controls

panorama.set('navigationControlOptions', {
position: google.maps.ControlPosition.TOP_LEFT,
style: google.maps.NavigationControlStyle.ZOOM_PAN
});

panorama.setOptions({
navigationControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT,
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
});

Events, markers, infowindows and overlays in Maps Javascript API v3 - Street View

noreply@blogger.com (Unknown) — Thu, 20 May 2010 02:02:00 +0000

How to monitor changes to pano Id

google.maps.event.addListener(panorama, 'pano_changed', function() {});

How to monitor changes to position

google.maps.event.addListener(panorama, 'position_changed', function() {});

How to monitor changes to the point of view

google.maps.event.addListener(panorama, 'pov_changed', function() {});

How to add a marker in the panorama

Markers by default are shared between the map and the panorama. If you create a separate panorama, you can add markers into it using:

var marker = new google.maps.Marker();
marker.setMap(panorama);

How to add an infowindow in the panorama

var infowindow = new google.maps.InfoWindow();
infowindow.open(panorama);

how to add a custom overlay in the panorama

To add a custom overlay on a panorama, follow the same logic as a custom overlay in the map. Derive from OverlayView, implement draw, onAdd, onRemove ... and add it to the panorama using setMap(panorama):

function CustomOverlay() {};
CustomOverlay.prototype = new google.maps.OverlayView;
var customOverlay = new CustomOverlay();
customOverlay.setMap(panorama);

Enabling and initializing Street View in Maps Javascript API v3

noreply@blogger.com (Marc T.) — Thu, 20 May 2010 01:48:00 +0000

How to enable Street View

map.set('streetViewControl', true);

map.setOptions({
streetViewControl: true
});

How to access the panorama in the map

var panorama = map.getStreetView();

How to know if the panorama is displayed

var panoramaDisplayed = panorama.getVisible();

How to set a manual Pano Id

panorama.setPano('-gfXi6db7jFB-cwAkTbBgA');

panorama.setOptions({
pano: '-gfXi6db7jFB-cwAkTbBgA'
});

How to set a manual position

panorama.setPosition(new google.maps.LatLng(48.85969, 2.29720));

panorama.setOptions({
position: new google.maps.LatLng(48.85969, 2.29720)
});

How to set the point of view

panorama.setPov({heading:30, pitch:0, zoom:4});

panorama.setOptions({
pov: {heading:30, pitch:0, zoom:4}
});

How to create a panorama without a map

var div = document.getElementById('panoramadiv');
var panorama = new google.maps.StreetViewPanorama(div);

How to have a separate panorama next to the map

var div = document.getElementById('panoramadiv');
var panorama = new google.maps.StreetViewPanorama(div);
map.setStreetView(panorama);

var div = document.getElementById('panoramadiv');
var panorama = new google.maps.StreetViewPanorama(div);
map.setOptions({
streetView: panorama
});

Using MarkerImage in Maps Javascript API v3

noreply@blogger.com (Marc T.) — Thu, 25 Mar 2010 12:00:00 +0000

When creating custom markers, you need to supply two images, the icon and the shadow. While you can supply a simple URL for each property, using MarkerImage allows you more flexibility and improves performance.

1. Creating a simple image:

The simplest marker is one made of individual icon and shadow images, with the anchor point (The point used to position the marker) located in the middle of the bottom edge of the image, like the standard marker using by the API.
In this situation, you only need to speficy the image URL such as:

var icon = new google.maps.MarkerImage("http://domain/path/image.png");

2. Specifying an anchor point

Depending of the shape of the marker, you may not want the middle of the bottom edge to be used as the anchor point. For example, in this sample, the anchor point of the beach flag is at the bottom left corner.
In those situation, you need to specify the anchor point of the image as the fourth parameter. This is a value of type Point, relative to the top left corner of the image with positive X going right and positive Y going down.
For example, if the image "beach_flag.png" is 20*32 pixels, we would use:

var icon = new google.maps.MarkerImage("http://domain/path/beach_flag.png", null, null, new google.maps.Point(0, 32));

3. Resizing the image

If you need to display the image larger or smaller than its original size, supply the scaledImage parameter:

var icon = new google.maps.MarkerImage("http://domain/path/image.png", null, null, null, new google.maps.Size(64, 64));

Note that if you use both size and anchor, the anchor value needs to be specified after scaling.
Combining the two previous examples, we would have:

var icon = new google.maps.MarkerImage("http://domain/path/beach_flag.png", null, null, new google.maps.Point(0, 64), new google.maps.Size(40, 64));

Note the change to the anchor from 0, 32 to 0, 64.

4. Using a sprite image

One simple way to imrove the performance of your website is to use sprite images. It means using a single image that contains many of the images you need of the site then using a section of it as required. The browser only makes a single call to download the image where before it would have made many.
To create a MarkerImage from a sprite image, you need to specify the origin and size of the section of the image you want to use to create the icon.

var icon = new google.maps.MarkerImage("http://domain/path/sprite.png", new google.maps.Size(12, 20), new google.maps.Point(100, 34));

You can, if you need, also provide the anchor point. The valoue of the anchor is relative to the section of the image, not the whole image.
For example, to use the center of the sprite image above as the anchor point, we would have:

var icon = new google.maps.MarkerImage("http://domain/path/sprite.png", new google.maps.Size(12, 20), new google.maps.Point(100, 34), new google.maps.Point(6, 10));

5. Using a scaled sprite image

To combine spriting and scaling, you need to supply a scaled section size as well as the scaled image size.
For example, if we want to display the section in the previous example of size 12*20 pixels, but display it 24*40 pixels, from an image originally 200*300 in size we would have:

var icon = new google.maps.MarkerImage("http://domain/path/sprite.png", new google.maps.Size(24, 40), new google.maps.Point(200, 68), new google.maps.Point(12, 20), new google.maps.Size(400, 600));

To display a scaled image or a scaled prite image, just supply the size, origin, anchor and scaledSize parameters with the scale factor applied.

6. Improving performance

They are two ways to improve the performance of MarkerImage:

- When you know the size of the image, specify it. If the size is not supplied, we make a call to download the image and read its size. While most browsers will cache the image and not download it again, this is not true in all cases and it may trigger the download of the image earlier than required, delaying the display of the map.
- When displaying multiple markers with the same shadow or icon, reuse the MarkerImage for all the markers:

var icon = new google.maps.MarkerImage(...);
for (...) {
var marker = new google.maps.Marker({
icon: icon,
...
};
}

Maps Javascript API v3 - More about the MVCObject class

noreply@blogger.com (Marc T.) — Wed, 24 Mar 2010 10:21:00 +0000

If you’re doing development using the new Google Maps JavaScript API v3, you will have noticed that all the core classes are derived from the MVCObject class.
Knowing when and how to use the features built into the MVCObject class will make your Maps API v3 development easier.

1. Accessors

To store and retrieve values from an MVCObject, do not access the properties directly, instead use the provided accessor methods.

get(key): Retrieves a value from the MVCObject.
set(key, value): Stores a value in the MVCObject.
setValues(keyValuePairs): Sets multiple values in the MVCObject.

For example:

var a = new google.maps.MVCObject();
a.set(‘level’, 2);
alert(a.get(‘level’)); // Returns 2
var b = new google.maps.MVCObject();
b.setValues({
  level: 2,
  index: 3,
  description: ‘Hello world.’
});
alert(b.get(‘index’)); // Returns 3

2. Binding

Binding two properties between two MVCObjects allows changes to one object to be replicated in the object other.

bindTo(targetKey, source, sourceKey): Binds the sourceKey property of the source to the targetKey property of the MVCObject. Effectively, it means that calling get(targetKey) on the MVCObject calls source.get(sourceKey).

Unbind(targetKey): Removes the binding between the MVCObject and the source but retains the value of the property, so calling get(targetKey) on the MVCObject before or after unbinding returns the same value. This is not true once the sourceKey property of the source is changed.

For example:

var a = new google.maps.MVCObject();
a.set(‘level’, 2);

var b = new google.maps.MVCObject();
b.bindTo(‘index’, a, ‘level’);
alert(b.get(‘index’)); // Returns 2.

// Changes to the source are visible on the target
a.set(‘level’, 3);
alert(b.get(‘index’)); // Returns 3.

// Changes to the target are visible on the source
b.set(‘index’, 4);
alert(a.get(‘level’)); // Returns 4.

// There can be multiple values bounds to the same source
var c = new google.maps.MVCObject();
c.bindTo(‘zoom’, a, ‘level’);
alert(c.get(‘zoom’)); // Returns 4.

// Unbound properties are not changed when the source is changed
b.unbind(‘index’);
alert(b.get(‘index’)); // Returns 4. The value hasn’t changed when unbound.
c.set(‘zoom’, 5);
alert(a.get(‘level’)); // Returns 5, c.zoom is bound to a.level.
alert(b.get(‘index’)); // Returns 4, b.index is not bound to anything.

Note that when bound, the two values are not duplicated but rather the getter of the bound property calls the getter of the source property.

In this code:

var map = new google.maps.Map(div, {…});
var marker = new google.maps.Marker({…});
marker.bindTo(‘position’, map, ‘center’);

The marker LatLng position is bound to the map’s center. This causes the maker position to be updated to the center of the map, everytime the map’s center changes. Effectively, it keeps the marker at the center of the map.

3. Events

Binding ensures that values are kept in sync, but you need to be notified that the values have changed to be able to act on it. The MVCObject provides two notification mechanisms: the changed method and changed events.

The changed method is a generic handler for state changes. Override this in derived classes to handle arbitrary state changes.

For example (See http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html):

Label.changed is called from changes to its properties with the parameter ‘key’ set to the name of the property that was set.

The second method available to monitor changes to MVC properties is the ‘changed’ event. Every time a property is set, an event named ‘xxx_changed’ (where ‘xxx’ is the lowercase value of the key) is triggered. You can listen to these events using google.maps.event.addListener.

For example:

var a = new google.maps.MVCObject();
google.maps.event.addListener(a, ‘level_changed’, function() {
alert(‘a.level has changed and the new value is ‘ + a.get(‘level’));
});
a.set(‘level’, 2); // Will display the alert message.

The changed events follow bound properties. If a.X is bound to b.X and b.X is bound to c.X, setting either a.X, b.X or C.X will cause the 'x_changed' event to be triggered on a, b, and c. The order in which the events are triggered depends o the order in which the values where bound and the listeners were attached.

Note that the changed events are triggered synchronously within the call to set(). In the example above, the alert dialog is displayed before the a.set() calls returns.

Listening to map events in Google Maps API v3 OverlayView

noreply@blogger.com (Marc T.) — Wed, 30 Sep 2009 04:12:00 +0000

In my previous post, I showed how to create a simple Label overlay. In that example, the draw method was only called when the position of the overlay relative to the map needed to be recalculated or when the text for the label had changed.

But what if the look/content of the overlay you want to create depends on the map center or the map bounds. Currently, OverlayView.draw is not called if the map is dragged for example.

I've created below a 'Center' overlay to demonstrate how to listen to map events in the overlay.

first, in center.js I have:


// Define the overlay, derived from google.maps.OverlayView
function Center(opt_options) {
  // Initialization
  this.setValues(opt_options);

  // Center specific
  var div1 = document.createElement('div');
  div1.style.cssText = 'position: absolute; left: -20px; top: -20px; ' +
                       'border-right: 1px solid blue; border-bottom: 1px solid blue; width: 19px; height: 19px';
  var div2 = document.createElement('div');
  div2.style.cssText = 'position: absolute; left: 1px; top: -20px; ' +
                       'border-left: 1px solid blue; border-bottom: 1px solid blue; width: 19px; height: 19px';
  var div3 = document.createElement('div');
  div3.style.cssText = 'position: absolute; left: -20px; top: 1px; ' +
                       'border-right: 1px solid blue; border-top: 1px solid blue; width: 19px; height: 19px';
  var div4 = document.createElement('div');
  div4.style.cssText = 'position: absolute; left: 1px; top: 1px; ' +
                       'border-left: 1px solid blue; border-top: 1px solid blue; width: 19px; height: 19px';

  var div = this.div_ = document.createElement('div');
  div.appendChild(div1);
  div.appendChild(div2);
  div.appendChild(div3);
  div.appendChild(div4);
  div.style.cssText = 'position: absolute; display: none';
};
Center.prototype = new google.maps.OverlayView;

// Implement onAdd
Center.prototype.onAdd = function() {
  var pane = this.getPanes().overlayLayer;
  pane.appendChild(this.div_);

  // Ensures the center is redrawn if the map center changes
  var me = this;
  this.listeners_ = [
    google.maps.event.addListener(this.getMap(), 'center_changed',
        function() { me.draw(); }),
  ];
};

// Implement onRemove
Center.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);

  // Label is removed from the map, stop updating its position/text.
  for (var i = 0, I = this.listeners_.length; i < I; ++i) {
    maps.google.event.removeListener(this.listeners_[i]);
  }
};

// Implement draw
Center.prototype.draw = function() {
  var projection = this.getProjection();
  var position = projection.fromLatLngToDivPixel(this.getMap().getCenter());

  var div = this.div_;
  div.style.left = position.x + 'px';
  div.style.top = position.y + 'px';
  div.style.display = 'block';
};

and in the map initialization I just added:


  <script type="text/javascript" src="center.js"></script>

and


  var center = new Center({
    map: map
  });

Adding the Center object to the map creates a cross at the center of the map. When the map is dragged or zoomed, the overlay is redrawn, allowing it to stay centered.

The result looks like this:

Label overlay example for Google Maps API v3

noreply@blogger.com (Marc T.) — Tue, 29 Sep 2009 06:30:00 +0000

Here's a simple example of creating a custom overlay class for Google Maps API v3. This Label overlay can either be used on its own, or bound to a marker.

First, create the Label class and place it in a label.js file.


// Define the overlay, derived from google.maps.OverlayView
function Label(opt_options) {
 // Initialization
 this.setValues(opt_options);

 // Label specific
 var span = this.span_ = document.createElement('span');
 span.style.cssText = 'position: relative; left: -50%; top: -8px; ' +
                      'white-space: nowrap; border: 1px solid blue; ' +
                      'padding: 2px; background-color: white';

 var div = this.div_ = document.createElement('div');
 div.appendChild(span);
 div.style.cssText = 'position: absolute; display: none';
};
Label.prototype = new google.maps.OverlayView;

// Implement onAdd
Label.prototype.onAdd = function() {
 var pane = this.getPanes().overlayLayer;
 pane.appendChild(this.div_);

 // Ensures the label is redrawn if the text or position is changed.
 var me = this;
 this.listeners_ = [
   google.maps.event.addListener(this, 'position_changed',
       function() { me.draw(); }),
   google.maps.event.addListener(this, 'text_changed',
       function() { me.draw(); })
 ];
};

// Implement onRemove
Label.prototype.onRemove = function() {
 this.div_.parentNode.removeChild(this.div_);

 // Label is removed from the map, stop updating its position/text.
 for (var i = 0, I = this.listeners_.length; i < I; ++i) {
   google.maps.event.removeListener(this.listeners_[i]);
 }
};

// Implement draw
Label.prototype.draw = function() {
 var projection = this.getProjection();
 var position = projection.fromLatLngToDivPixel(this.get('position'));

 var div = this.div_;
 div.style.left = position.x + 'px';
 div.style.top = position.y + 'px';
 div.style.display = 'block';

 this.span_.innerHTML = this.get('text').toString();
};

Then use label.js in the map initialization:


<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 <title>Label Overlay Example</title>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript" src="label.js"></script>
 <script type="text/javascript">
   function initialize() {
     var latLng = new google.maps.LatLng(40, -100);

     var map = new google.maps.Map(document.getElementById('map_canvas'), {
       zoom: 5,
       center: latLng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     var marker = new google.maps.Marker({
       position: latLng,
       draggable: true,
       map: map
     });

     var label = new Label({
       map: map
     });
     label.bindTo('position', marker, 'position');
     label.bindTo('text', marker, 'position');
   };
 </script>
</head>
<body onload="initialize()">
 <div id="map_canvas" style="height: 100%; width: 100%"></div>
</body>
</html>

When run, it looks like this:

Drag the marker around and the text of the label with update with the LatLng of the marker.