Google Maps
Interactable and customizable map.
You will need to provide a google api key to set up the map. To do so make sure the following variable is loaded before the u-googlemaps.js module.
u.gapi_key = "#GOOGLE_API_KEY_HERE";
Functions
Util.googlemaps.map
Definition
- Name
- Util.googlemaps.map
- Syntax
- Void = Util.googlemaps.map( Node node , Array coordinates [, JSON _options ] );
Description
Initialize map
Parameters
- node
-
Node The node which to inject the map into
- Coordinates
-
Array The altitude and longtitude coordinates to center the map
- _options
-
JSON Optional, JSON object to customize the map
Options
Return values
Void
Examples
Default map
map.APIloaded = function() {
// Invoked when the googlemaps API from google is loaded
}
map.loaded = function() {
// Invoked once the map has been created
}
var map = u.qs("div");
u.googlemaps.map(map, [55.700716,12.44179]);
Customized map
var map = u.qs("div");
var theme = [
{
"featureType": "all",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{
"hue": "#ff0000"
}
]
}
];
u.googlemaps.map(map, [55.700716,12.44179], {"zoom":6, "styles":theme, "disableUI":true});
Dependencies
JavaScript
- for ... in
- switch ... case
- while ...
- google.maps.LatLng (Google Maps API)
- google.maps.Map (Google Maps API)
- google.maps.event.addListener (Google Maps API)
Manipulator
- Util.appendElement
Util.googlemaps.addMarker
Definition
- Name
- Util.googlemaps.addMarker
- Syntax
- Object = Util.googlemaps.addMarker( Node map , Array coordinates [, JSON _options ] );
Description
Add marker to a map, returned object is from Google Maps.
Parameters
- map
-
Node The map which to inject the marker into
- Coordinates
-
Array The altitude and longtitude coordinates to place the marker
- _options
-
JSON Optional, JSON object to customize the marker
Options
Return values
Object
Examples
Adding a marker
var map = u.qs("div");
u.googlemaps.map(map, [55.700716,12.44179]);
map.loaded = function() {
var marker = u.googlemaps.addMarker(this, [55.720716, 12.46179]);
marker.clicked = function() {
// Called when clicked
}
marker.entered = function() {
// Called when input hovers over marker
}
marker.exited = function() {
// Called when input leaves marker
}
}
Adding a customized marker
var map = u.qs("div");
var custom_icon = "icon.png";
u.googlemaps.map(map, [55.700716,12.44179]);
map.loaded = function() {
var marker = u.googlemaps.addMarker(this,
[55.720716, 12.46179], {"icon":/img/custom_icon.png, "label":"Hello world"}
);
}
Dependencies
JavaScript
- for ... in
- switch ... case
- for ... in
- google.maps.Marker (Google Maps API)
- google.maps.LatLng (Google Maps API)
- google.maps.event.addListener (Google Maps API)
Manipulator
- None
Util.googlemaps.removeMarker
Definition
- Name
- Util.googlemaps.removeMarker
- Syntax
- Void = Util.googlemaps.removeMarker( Node map , Node marker [, JSON _options ] );
Description
Remove a marker from a map
Parameters
- map
-
Node The map which to remove the marker from
- marker
-
Node The marker to remove
- _options
-
JSON Optional, JSON object to customize the marker
Options
Return values
Void
Examples
Removing a marker on click
var map = u.qs("div");
u.googlemaps.map(map, [55.700716,12.44179]);
map.loaded = function() {
var marker = u.googlemaps.addMarker(this, [55.720716, 12.46179]);
marker.clicked = function() {
u.googlemaps.removeMarker(this.g_map, this);
}
}
Dependencies
JavaScript
- for ... in
- switch ... case
Manipulator
- Util.randomString
- Util.Timer.setTimer
Util.googlemaps.infoWindow
Definition
- Name
- Util.googlemaps.infoWindow
- Syntax
- Void = Util.googlemaps.infoWindow( Node map );
Description
Create infowindow
Parameters
- map
-
Node The map which to create infowindow on
Return values
Void
Examples
var map = u.qs("div");
u.googlemaps.map(map, [55.700716,12.44179]);
map.loaded = function() {
u.googlemaps.infoWindow(this);
}
Dependencies
JavaScript
- google.maps.InfoWindow (Google Maps API)
- google.maps.event.addListener (Google Maps API)
Manipulator
- None
Util.googlemaps.showInfoWindow
Definition
- Name
- Util.googlemaps.showInfoWindow
- Syntax
- Void = Util.googlemaps.showInfoWindow( Node map , Node marker , String content );
Description
Show infowindow above a marker. An infowindow is a box above a marker containing content.
Parameters
- map
-
Node The map which to show infowindow on
- marker
-
Node The marker which to show infowindow above
- content
-
String The content of the infowindow, you can put HTML in here
Return values
Void
Examples
Show infowindow when marker is clicked
var map = u.qs("div");
u.googlemaps.map(map, [55.700716,12.44179]);
map.loaded = function() {
var marker = u.googlemaps.addMarker(this, [55.720716, 12.46179]);
marker.clicked = function() {
u.googlemaps.showInfoWindow(this.g_map, this, "<h1>Hello world</h1><p>I'm alive!</p>");
}
}
Dependencies
JavaScript
- None
Manipulator
- None
Util.googlemaps.hideInfoWindow
Definition
- Name
- Util.googlemaps.hideInfoWindow
- Syntax
- Void = Util.googlemaps.hideInfoWindow( Node map );
Description
Hide infowindow
Parameters
- map
-
Node The map which to hide infowindow from
Return values
Void
Examples
Hide infowindow when marker is clicked
var map = u.qs("div");
u.googlemaps.map(map, [55.700716,12.44179]);
map.loaded = function() {
var marker = u.googlemaps.addMarker(this, [55.720716, 12.46179]);
marker.clicked = function() {
u.googlemaps.hideInfoWindow(this.g_map, this, "Hello world");
}
}
Dependencies
JavaScript
- None
Manipulator
- None
Files
Main file
- u-googlemaps.js
Segment support files
- none
Segment dependencies
- desktop
- u-string.js + u-timer.js + u-dom.js
- desktop_ie11
- u-string.js + u-timer.js + u-dom.js
- desktop_ie10
- u-string.js + u-timer.js + u-dom.js + u-dom_ie.js
- desktop_ie9
- Not supported
- desktop_light
- Not supported
- tablet
- u-string.js + u-timer.js + u-dom.js
- tablet_light
- Not supported
- tv
- Not tested
- smartphone
- u-string.js + u-timer.js + u-dom.js
- mobile
- Not supported
- mobile_light
- Not supported