$("#test1").gmap3();
$("#test1-destroy").click(function(){
$("#test1").gmap3("destroy");
});
$("#test2").gmap3({
map:{
options:{
mapTypeId : google.maps.MapTypeId.SATELLITE,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.ROADMAP]
},
center:[48.859667, 2.350874],
zoom: 5,
disableDefaultUI: false
},
events:{
mouseover: function(map){
$("#test2-result .result").html($(this).attr("id") + " : over");
},
mouseout: function(map){
$("#test2-result .result").html($(this).attr("id") + " : out");
}
}
}
});
Mouse :
$("#test3").gmap3();
//
// ...
//
var map = $("#test3").gmap3("get")
map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
map.setZoom(7);
$("#test4").gmap3();
$("#test4-result .result-1").html(
$("#test4").gmap3("get").getZoom()
);
$("#test4").gmap3("get").setZoom(5);
$("#test4-result .result-2").html(
$("#test4").gmap3("get").getZoom()
);
Result #1 :
Result #2 :
$("#test5").gmap3({
map:{
options:{
zoom: 18,
center: new google.maps.LatLng(40.729884, -73.990988)
}
}
});
function toggleStreetView(){
var map = $("#test5").gmap3("get"),
panorama = map.getStreetView();
if (panorama.getVisible()){
panorama.setVisible(false);
} else {
panorama.setPosition(map.getCenter());
panorama.setPov({
heading: 265,
zoom:1,
pitch:0
});
panorama.setVisible(true);
}
}
$("#test6").gmap3(); // not needed to use getlatLng
$("#test6").gmap3({
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("get").setCenter(result[0].geometry.location);
} else {
alert("Bad address 2 !");
}
}
}
});
Latitude :
Longitude :
var address = "place de l'étoile, paris";
$("#test7").gmap3({
map:{
address:address,
options:{
zoom: 14
}
},
marker:{
address: address // address resolution got from cache from previous call
}
});
var position = new google.maps.LatLng(-33, 151);
$("#test8").gmap3({
map:{
options:{
center: position,
zoom: 8
}
},
marker:{
latLng: position,
options:{
draggable: true,
icon: "http://code.google.com/intl/fr/apis/maps/documentation/javascript/examples/images/beachflag.png"
},
events:{
dragend: function(marker){
$("#test8-result .result-1").html( marker.position.lat() );
$("#test8-result .result-2").html( marker.position.lng() );
}
}
}
});
Drag & drop the flag :
Latitude :
Longitude :
var address = "place de l'étoile, paris";
$("#test9").gmap3({
map:{
address:address,
options:{
zoom: 14
}
},
infowindow:{
address:address,
options:{
size: new google.maps.Size(50,50),
content: "Hello World !"
},
events:{
closeclick: function(infowindow){
alert("closing : " + $(this).attr("id") + " : " + infowindow.getContent());
}
}
}
});
var address = "place de l'étoile, paris";
$("#test10").gmap3({
map:{
address:address,
options:{
zoom: 14
}
},
marker:{
address:address,
options:{
draggable: true
}
},
infowindow:{
options:{
size: new google.maps.Size(50,20),
content: "Hello World !"
}
}
});
$("#test11").gmap3({
map:{
options:{
center:[0, -180],
zoom:2,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
},
polyline:{
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({
map:{
options:{
center:[24.886436490787712, -70.2685546875],
zoom:3,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
},
polygon:{
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(),
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({
infowindow:{
latLng:event.latLng,
options:{
content: contentString
}
}
});
}
}
}
});
var fenway = new google.maps.LatLng(42.345573,-71.098326);
$("#test13").gmap3({
map:{
options:{
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true,
center: fenway
}
},
streetviewpanorama:{
divId: "test13-view",
options:{
opts:{
position: fenway,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
}
}
}
});
$("#test14").gmap3({
map:{
options:{
mapTypeId : google.maps.MapTypeId.ROADMAP,
center:[40.65, -73.95],
zoom: 12
}
},
kmllayer:{
options:{
url: "http://www.searcharoo.net/SearchKml/newyork.kml",
suppressInfoWindows: true
},
events:{
click: function(kml, event){
$("#test14-text").html(event.featureData.description);
}
}
}
});
$("#test15").gmap3(
{ map:{
options:{
mapTypeId : google.maps.MapTypeId.ROADMAP,
center:[42.3726399, -71.1096528],
zoom: 14
}
}
},
"bicyclinglayer"
);
$("#test16").gmap3(
{ map:{
options:{
mapTypeId : google.maps.MapTypeId.ROADMAP,
center:[34.04924594193164, -118.24104309082031],
zoom: 13
}
}
},
"trafficlayer"
);
$("#test17").gmap3({
map:{
options:{
mapTypeId : google.maps.MapTypeId.ROADMAP,
center:[40.740, -74.18],
zoom: 12
}
},
groundoverlay:{
options:{
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({
getgeoloc:{
callback : function(latLng){
if (latLng){
$("#test18-result").html("localised !");
$(this).gmap3({
map:{
latLng: latLng
},
marker:{
latLng: latLng
}
});
} else {
$("#test18-result").html("not localised !");
}
}
}
});
$("#test19").gmap3({
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({
map:{
options:{
zoom: 13,
center: [-33.879, 151.235]
}
},
directionsrenderer:{
options:{
directions:results
}
}
});
}
}
});
$("#test20").gmap3({
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({
map:{
options:{
zoom: 13,
center: [-33.879, 151.235]
}
},
directionsrenderer:{
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({
map:{
options:{
zoom: 13,
center: [-33.879, 151.235]
}
},
directionsrenderer:{
options:{
preserveViewport: true,
draggable: true
}
}
});
$("#test21-add-button").click(function(){
$("#test21").gmap3({
getroute:{
options:{
origin:"48 Pirrama Road, Pyrmont NSW",
destination:"Bondi Beach, NSW",
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
callback: function(results){
if (results){
$(this).gmap3({get:"directionrenderer"}).setDirections(results);
}
}
}
});
});
$("#test22").gmap3({
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({
map:{
options:{
zoom: 13,
center: [-33.879, 151.235]
}
},
directionsrenderer:{
// divId: "test22-panel", // set this div as panel
options:{
preserveViewport: true,
draggable: true,
directions:results
}
}
});
}
}
});
$("#test22-add-button").click(function(){
$("#test22-panel").css("overflow", "auto");
$("#test22").gmap3({get:"directionrenderer"}).setPanel( $("#test22-panel").get(0) );
});
$("#test23").gmap3(
{ map:{
options:{
center:[41.850033, -87.650052],
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, "style1", "style2"]
}
}
},
styledmaptype:{
id: "style1",
options:{
name: "Style 1"
},
styles : [ // use embedded style
{
featureType: "road.highway",
elementType: "geometry",
stylers: [
{ hue: "#ff0022" },
{ saturation: 60 },
{ lightness: -20 }
]
}
]
}
},
{ styledmaptype:{
id: "style2",
options:{
name: "Style 2"
},
styles:[
{
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" }
]
}
]
}
}
);
// activate a style by code
$(".test23-button").click(function(){
var id = $(this).data("styleId");
$("#test23").gmap3("get").setMapTypeId(id);
});