$('#test1').gmap3();
$('#test1-destroy').click(function(){
$('#test1').gmap3({action:'destroy'});
});
$('#test2').gmap3({
action : 'init',
mapTypeId : google.maps.MapTypeId.SATELLITE,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.ROADMAP]
},
center:{
lat: 48.859667,
lng: 2.350874
},
zoom: 5,
disableDefaultUI: false,
events:{
mouseover: function(map, event){
$('#test2-result .result').html($(this).attr('id') + ' : over');
},
mouseout: function(map, event){
$('#test2-result .result').html($(this).attr('id') + ' : out');
}
}
});
Mouse :
$('#test3').gmap3({action:"setZoom", args:[11]});
//
// ...
//
$('#test3').gmap3(
{action:"setMapTypeId", args:[google.maps.MapTypeId.SATELLITE]},
{action:"setZoom", args:[7]}
);
// example 1
$('#test4').gmap3({
action: 'getZoom',
callback:function(value){
$('#test4-result .result-1').html( value );
}
});
// modify property
$('#test4').gmap3({action:"setZoom", args:[5]});
// example 2
$('#test4').gmap3({
action: 'getZoom',
callback:function(value){
$('#test4-result .result-2').html( value );
}
});
Result #1 :
Result #2 :
$('#test5').gmap3({
action:'init',
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
center: new google.maps.LatLng(40.729884, -73.990988)
});
function toggleStreetView(){
$('#test5').gmap3({
action:'getStreetView',
callback:function(panorama){
var visible = panorama.getVisible();
if (visible) {
panorama.setVisible(false);
} else {
var map = $(this).gmap3('get');
panorama.setPosition(map.getCenter());
panorama.setPov({
heading: 265,
zoom:1,
pitch:0}
);
panorama.setVisible(true);
}
}
});
}
$('#test6').gmap3(
{ action: 'getLatLng',
address: '2 bis rue saint antoine, eguilles',
callback: function(result){
if (result){
$('#test6-result .result-1').html( result[0]['geometry']['location'].lat() );
$('#test6-result .result-2').html( result[0]['geometry']['location'].lng() );
$(this).gmap3({action: 'setCenter', args:[ result[0].geometry.location ]});
} else {
alert('Bad address 2 !');
}
}
}
);
Latitude :
Longitude :
$('#test7').gmap3(
{
action: 'addMarker',
address: "place de l'étoile, paris",
map:{
center: true,
zoom: 14
}
},
{action: 'setOptions', args:[{scrollwheel:true}]}
);
var position = new google.maps.LatLng(-33, 151);
$('#test8').gmap3(
{
action: 'addMarker',
latLng: position,
map:{
center: position,
zoom: 8
},
marker:{
options:{
draggable: true,
icon: 'http://code.google.com/intl/fr/apis/maps/documentation/javascript/examples/images/beachflag.png'
},
events:{
dragend: function(marker, event){
$('#test8-result .result-1').html( marker.position.lat() );
$('#test8-result .result-2').html( marker.position.lng() );
}
}
}
},
{action: 'setOptions', args:[{scrollwheel:true}]}
);
Latitude :
Longitude :
$('#test9').gmap3(
{
action: 'addInfoWindow',
address: "place de l'étoile, paris",
map:{
center: true,
zoom: 14
},
infowindow:{
options:{
size: new google.maps.Size(50,50),
content: 'Hello World !'
},
events:{
closeclick: function(infowindow, event){
alert('closing : ' + $(this).attr('id') + ' : ' + infowindow.getContent());
}
},
apply:[
{action:'setContent', args:['Here is a new content !']}
]
}
},
{action: 'setOptions', args:[{scrollwheel:true}]}
);
$('#test10').gmap3(
{
action: 'addMarker',
address: "place de l'étoile, paris",
map:{
center: true,
zoom: 14
},
marker:{
options:{
draggable: true
}
},
infowindow:{
options:{
size: new google.maps.Size(50,20),
content: 'Hello World !'
}
}
},
{action: 'setOptions', args:[{scrollwheel:true}]}
);
$('#test11').gmap3(
{action: 'init', center:{lat:0, lng:-180}, zoom:2, mapTypeId: google.maps.MapTypeId.TERRAIN},
{ action: 'addPolyline',
options:{
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
},
path:[
[37.772323, -122.214897],
[21.291982, -157.821856],
[-18.142599, 178.431],
[-27.46758, 153.027892]
]
}
);
$('#test12').gmap3(
{ action: 'init', center:{lat:24.886436490787712,lng:-70.2685546875}, zoom:3, mapTypeId: google.maps.MapTypeId.TERRAIN },
{ action: 'addPolygon',
options:{
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
},
paths:[
[25.774252, -80.190262],
[18.466465, -66.118292],
[32.321384, -64.75737],
[25.774252, -80.190262]
],
events:{
click: function(polygon, event){
var vertices = polygon.getPath();
var contentString = 'Bermuda Triangle Polygon<br />';
contentString += 'Clicked Location: ' + event.latLng.lat() + ',' + event.latLng.lng() + '<br />';
for(var i=0; i<vertices.length; i++){
var xy = vertices.getAt(i);
contentString += '<br />Coordinate ' + i + ' : ' + xy.lat() +', ' + xy.lng();
}
$(this).gmap3({
action:'addInfoWindow',
latLng:event.latLng,
infowindow:{
options:{
content: contentString
}
}
});
}
}
}
);
var fenway = new google.maps.LatLng(42.345573,-71.098326);
$('#test13').gmap3(
{ action:'init', zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: true, center: fenway },
{ action:'setStreetView',
id: 'test13-view',
options:{
position: fenway,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
}
}
);
$('#test14').gmap3(
{ action : 'init', mapTypeId : google.maps.MapTypeId.ROADMAP, center:{lat: 40.65,lng: -73.95}, zoom: 12},
{ action: 'addKmlLayer',
url: 'http://www.searcharoo.net/SearchKml/newyork.kml',
options:{
suppressInfoWindows: true
},
events:{
click: function(kml, event){
$("#test14-text").html(event.featureData.description);
}
}}
);
$('#test15').gmap3(
{ action: 'init', mapTypeId : google.maps.MapTypeId.ROADMAP, center:{lat: 42.3726399,lng: -71.1096528}, zoom: 14},
{ action: 'addBicyclingLayer'}
);
$('#test16').gmap3(
{ action: 'init', mapTypeId : google.maps.MapTypeId.ROADMAP, center:{lat: 34.04924594193164,lng: -118.24104309082031}, zoom: 13 },
{ action: 'addTrafficLayer'}
);
$('#test17').gmap3(
{ action: 'init', mapTypeId : google.maps.MapTypeId.ROADMAP, center:{lat: 40.740,lng: -74.18}, zoom: 12},
{ action: 'addGroundOverlay',
url: "http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg",
bounds: [
[40.765641, -74.139235],
[40.716216, -74.213393]
],
events: {
click: function(overlay, event){
alert('clicked on '+ overlay.url);
}
}}
);
$('#test18').gmap3(
{ action : 'geoLatLng',
callback : function(latLng){
if (latLng){
$('#test18-result').html('localised !');
$(this).gmap3({action: 'setCenter', args:[ latLng ]});
} else {
$('#test18-result').html('not localised !');
}
}
});
$('#test19').gmap3({
action:'getRoute',
options:{
origin:'48 Pirrama Road, Pyrmont NSW',
destination:'Bondi Beach, NSW',
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
callback: function(results){
if (!results) return;
$(this).gmap3(
{ action: 'init', zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: true, center: {lat:-33.879,lng:151.235} },
{ action: 'addDirectionsRenderer', options:{directions:results} }
);
}
});
$('#test20').gmap3(
{ action:'getRoute',
options:{
origin:'48 Pirrama Road, Pyrmont NSW',
destination:'Bondi Beach, NSW',
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
callback: function(results){
if (!results) return;
$(this).gmap3(
{ action:'init', zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: true, center: {lat:-33.879,lng:151.235} },
{ action:'addDirectionsRenderer',
options:{
preserveViewport: true,
draggable: true,
directions:results
},
events: {
directions_changed: function(display, event){
$('#test20-updated span').html( parseInt($('#test20-updated span').html()) + 1 );
}
}
}
);
}
}
);
Updated : 0 (move the directions using your mouse)
$('#test21').gmap3(
{ action:'init', zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: true, center: {lat:-33.879,lng:151.235} },
{ action:'addDirectionsRenderer',
options:{
preserveViewport: true,
draggable: true
}
}
);
$('#test21-add-button').click(function(){
$('#test21').gmap3({
action:'getRoute',
options:{
origin:'48 Pirrama Road, Pyrmont NSW',
destination:'Bondi Beach, NSW',
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
callback: function(results){
$(this).gmap3({action:'setDirections', directions: results});
}
});
});
$('#test22').gmap3({
action:'getRoute',
options:{
origin:'48 Pirrama Road, Pyrmont NSW',
destination:'Bondi Beach, NSW',
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
callback: function(results){
if (!results) return;
$(this).gmap3(
{ action:'init', zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: true, center: {lat:-33.879,lng:151.235} },
{ action:'addDirectionsRenderer',
options:{
//panelId: 'test21-panel'
preserveViewport: true,
draggable: true,
directions:results
}
});
}
});
$('#test22-add-button').click(function(){
$('#test22-panel').css('overflow', 'auto');
$('#test22').gmap3({action:'setDirectionsPanel', id: 'test22-panel'});
});
// Example #1 : Style is stored in a variable
var roadAtlasStyles = [
{
featureType: "road.highway",
elementType: "geometry",
stylers: [
{ hue: "#ff0022" },
{ saturation: 60 },
{ lightness: -20 }
]
},{
featureType: "road.arterial",
elementType: "all",
stylers: [
{ hue: "#2200ff" },
{ lightness: -40 },
{ visibility: "simplified" },
{ saturation: 30 }
]
},{
featureType: "road.local",
elementType: "all",
stylers: [
{ hue: "#f6ff00" },
{ saturation: 50 },
{ gamma: 0.7 },
{ visibility: "simplified" }
]
}
];
$('#test23').gmap3(
{ action: 'init',
center:{
lat:41.850033,
lng:-87.650052
},
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'style1', 'style2']
}
},
{ action: 'addStyledMap',
id: 'style1',
options:{
name: 'Style 1'
},
style : [ // use embedded style
{
featureType: "road.highway",
elementType: "geometry",
stylers: [
{ hue: "#ff0022" },
{ saturation: 60 },
{ lightness: -20 }
]
}
]
},
{ action: 'addStyledMap',
id: 'style2',
style: roadAtlasStyles, // use the style in variable
options:{
name: 'Style 2'
}
}
);
// Example #1 : Style is stored in a variable
var roadAtlasStyles2 = [
{
featureType: "road.highway",
elementType: "geometry",
stylers: [
{ hue: "#ff0022" },
{ saturation: 60 },
{ lightness: -20 }
]
},{
featureType: "road.arterial",
elementType: "all",
stylers: [
{ hue: "#2200ff" },
{ lightness: -40 },
{ visibility: "simplified" },
{ saturation: 30 }
]
},{
featureType: "road.local",
elementType: "all",
stylers: [
{ hue: "#f6ff00" },
{ saturation: 50 },
{ gamma: 0.7 },
{ visibility: "simplified" }
]
}
];
$('#test24').gmap3(
// Add a style without create the map
{ action: 'addStyledMap',
id: 'style1',
options:{
name: 'Style 1'
},
style : [ // use embedded style
{
featureType: "road.highway",
elementType: "geometry",
stylers: [
{ hue: "#ff0022" },
{ saturation: 60 },
{ lightness: -20 }
]
}
]
},
// create a new style and active it after having created the map
{ action: 'setStyledMap',
// implicit init - - - - -
map:{
center:{
lat:41.850033,
lng:-87.650052
},
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'style1', 'style2']
}
},
// - - - - - - - - - - - -
id: 'style2',
style: roadAtlasStyles2,
options:{
name: 'Style 2'
}
}
);
// Active an existing style
$("#test24-button").click(function(){
$('#test24').gmap3({ action: 'setStyledMap', id: 'style1'});
});