Google Map API (custom labels and tooltips)

Hello!
Just noticed a new topic in the sandbox link , about maps.
I will try to supplement it with my experience in communicating with Google Maps.

Prelude

There is a project in which the customer wants to connect Google maps while the elements of his design must be used in the map without fail. Maybe I was looking badly, but neither in the documentation, nor on the Internet, I found less worthy publications on creating custom elements on the map. Only description of how to connect the card and how to initialize the marker.

At the same time, the vast majority of Google map extensions were for the Google Map API v2 where else a key was needed to integrate the maps into your site.
')

Label

I'll start with the markers - less you have the opportunity to insert your custom marker on the map.
By a custom marker, I mean the ability to set any image text and styles for a marker.

With the picture, it's pretty simple. The first thing I came across was this service.
It's very simple - choose a picture - get the code. Having played a bit I could do: hover for the marker
For example, if the marker is gray, and when you direct it at it, it turns blue.

new google.maps.MarkerImage(
'images/bg-num.png' ,
new google.maps.Size(33,33),
new google.maps.Point(0,0),
new google.maps.Point(0,33)
);

* This source code was highlighted with Source Code Highlighter .

API

MarkerImage (url: string, size?: Size, origin?: Point, anchor?: Point, scaledSize?: Size)

In my example:
- the first parameter is the path to the picture
- size in pixels of our marker
- positioning of the marker image (let's say the square marker is 33px, and the 33x66 image is two states normal and the state: hover)
- marker center (0, 33) - lower left corner. (0, 17) bottom center, etc.

thus to do: hover for the marker - you can hang a handler on the marker

example

var myLatlng = new google.maps.LatLng(50.022451, 36.227070);
var myOptions = {
zoom: 10,
scrollwheel: false ,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
}
}
var map = new google.maps.Map( document .getElementById( "map_canvas" ), myOptions);

var markerImage = new google.maps.MarkerImage(
'images/bg-num.png' ,
new google.maps.Size(33,33),
new google.maps.Point(0,0),
new google.maps.Point(0,33)
);
var markerImageHover = new google.maps.MarkerImage(
'images/bg-num.png' ,
new google.maps.Size(33,33),
new google.maps.Point(0,33),
new google.maps.Point(0,33)
);

var marker = new google.maps.Marker({
icon: markerImage,
position: myLatlng,
map: map,
title: "Hello World!"
});

google.maps. event .addListener(marker, 'mouseover' , function () {
marker.setIcon(markerImageHover);
});

google.maps. event .addListener(marker, 'mouseout' , function () {
marker.setIcon(markerImage);
});

* This source code was highlighted with Source Code Highlighter .

First problems

All that was before that is all well and good, but there will be a dozen of such markers on the page and you need to number or sign the markers.

There are two options - the first to use a picture for a marker with already printed text
Something like this:

for ( var i = 0; i < locations.length; i++) {
var image = new google.maps.MarkerImage( 'marker' + i + '.png' ,
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34));
}

* This source code was highlighted with Source Code Highlighter .

the second method that uses another Google service Google's Chart API. in particular Dynamic Icons .

var links = [];
for ( var i = 1; i < 3; i++) {
link.push( 'https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=' + i + '|FF0000|000000' );
};

console.log(link); //[ "https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=1|FF0000|000000" , "https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=2|FF0000|000000" , "https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=1|FF0000|000000" ]

* This source code was highlighted with Source Code Highlighter .

I didn’t have time to deal with them more thoroughly, but already now I saw a problem that it’s impossible to substitute my picture there on the move, and even more so to use an active state for it.

In general, the output for me was a custom tooltip.

Tooltips in google map

The tooltips are what appear next to the marker when you point / click on it.
The Google API uses InfoWindow for this .

var infowindow = new google.maps.InfoWindow({
content: 'Hello world'
});

* This source code was highlighted with Source Code Highlighter .

Basic options:
disableAutoPan boolean - after the tooltip has appeared the map is either centered on it or not
maxWidth px window size
content content - what will be shown in tooltip. There can be anything from HTML to Javascript

var content = document .createElement( 'div' );
content.innerHTML = "<strong>Hello world</strong> + JS ^_^" ;
var infowindow = new google.maps.InfoWindow({
content: content
});

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

* This source code was highlighted with Source Code Highlighter .

But for all that, we have no opportunity to remove the “wrapper” from this tooltip - the same white rounded balloon, and the whole design of the New and cool tooltip will be wrapped in a standard one. It does not suit us.
During the search for a solution, I came across a couple of "extensions" of both InfoWindow and Marker
One of these plug-ins after finishing was attached for my needs.

I also stumbled upon a compilation of such, tyts2 plug-ins for the card.

Actually after I finished the Label plug-in, I got the opportunity to make my Google Map service with preference and girls both a custom marker and a custom tooltip for the card.

Examples:

marker buz text + normal tooltip
my custom (not to burn too much removed half the styles)

archive

The code does not claim to be good + most likely there is something to modify, but it works and therefore thanks to him.

PS article came out and so is too big so I don’t understand the code in the archive. Yes, and it's time to leave work.

PSS Begin to criticize, share your experience and kick