jQuery googlemaps.js Simple Demo
var map = $("#map0").googlemaps();
map.setMarker("Sky Tower, Wrocław, Polska", function(marker) {
map.setCenterAtMarker(marker, 16);
map.setInfoWindowAtMarker(marker, "Sky Tower");
});
Point, range and route
// Initialize the Map
var map = $("#map").googlemaps();
// Polygon
var deliveryArea = map.setPolygon([
"52.225808, 18.632813",
"52.051754, 18.520203",
"51.932469, 18.259277",
"51.941123, 18.143921",
"52.012027, 17.970886",
"52.301428, 17.918701",
"52.335760, 18.352661",
"52.225808, 18.632813"
]);
// Marker
map.setMarkerAtAddress("Konin, Polska", function(marker) {
map.setCenterAtMarker(marker, 9);
map.setRoute('Turek, Polska', marker);
}, undefined, {
'title' : 'Konin'
}, 'images/flower.png');
City triangle and styles
var map2 = $("#map2").googlemaps();
map2.setStyles([
{
"stylers": [
{ "gamma": 0.38 }
]
}
]);
map2.setCenterAtAddress("Polska", 6, function() {
map2.setMarkersAtAddresses([
"Warszawa",
"Kraków",
"Wrocław"
], function(markers) {
map2.setPolygon([
markers[0],
markers[1],
markers[2],
"51, 19",
markers[0]
]);
});
});
Street view
51.047492,16.962504
$("#map3").each(function() {
var address = $(this).text();
var map3 = $(this).googlemaps();
map3.setCenterAtAddress(address, 16, function() {
map3.setStreetView(function(panorama) {
panorama.addBuilding('mycompany', 'My company', 'https://google-developers.appspot.com/maps/documentation/javascript/examples/images/panoReception1024-0.jpg', -20, 180);
});
map3.setStreetViewDirection(-21);
});
$("#map3direction").click(function() {
console.log(map3.getStreetViewData());
});
});
Distances
var map4 = $("#map4").googlemaps();
map4.setMarkersAtAddresses([
"Polska",
"Niemcy",
"Holandia",
"Ukraina",
"Rosja"
], function(markers) {
var from = markers.shift();
map4.setCenterAtMarker(from, 5);
map4.getDistances(from, markers, function(results, status) {
for(var i in results) {
var result = results[i];
var info = "";
if(result.precisly) {
info = "Distance by route: " + Math.round(result.routeDistance) + " km. Distance by air: " + Math.round(result.airDistance) + " km.";
} else {
info = "Distance: " + Math.round(result.distance) + " km.";
}
map4.setInfoWindowAtMarkerOnClick(result.marker, info, undefined, true);
}
var nearest = results[0];
map4.setCenterAtMarker(nearest.marker, 5);
if(nearest.precisly) {
map4.setInfoWindowAtMarker(nearest.marker, "Nearest country from Poland. Distance by route: " + Math.round(nearest.routeDistance) + " km. Distance by air: " + Math.round(nearest.airDistance) + " km.");
} else {
map4.setInfoWindowAtMarker(nearest.marker, "Nearest country from Poland. Distance: " + Math.round(nearest.distance) + " km.");
}
map4.setRoute(from, nearest.marker);
}, 3);
}, function() {
console.log('error');
});
Search closest marker
var map5 = $("#map5").googlemaps();
map5.setCenterAtLocation(52.258071, 5.372314, 7);
var addresses = [
"Zwolle",
"Breda",
"Rotterdam",
"Amsterdam",
"Leiden",
"Arnhem",
"Utrecht",
"Groningen",
"Eindhoven",
"Den Haag"
];
/* PUT MARKERS AT ADDRESSES */
var markers = new Array();
for(var i in addresses) {
map5.setMarkerAtAddress(addresses[i], function(marker) {
markers.push(marker);
map5.setMarkerClick(marker, function() {
map5.closeAllInfoWindows();
map5.setInfoWindowAtMarker(this, "Address: " + this.options.address);
});
}, undefined, { address : addresses[i] });
}
/* ON SEARCH ADDRESS */
$("#map5_address_submit").click(function(event) {
event.preventDefault();
var searchAddress = $("#map5_address_input").val();
map5.setMarkerAtAddress(searchAddress, function(searchMarker) {
map5.getDistances(searchMarker, markers, function(d) {
map5.setCenterAtMarker(d[0].marker, 11);
}, 3);
}, function() {
// can't find address
}, { visible : false });
});
Marker clusters
var map = $("#map6").googlemaps();
var points = [
"51.1, 20.0", "51.2, 20", "51.3, 20","51.4, 20","51.5, 20","51.6, 20",
"51.7, 20","51.8, 20","51.9, 20","52.0, 20","52.1, 20","52.2, 20","52.3,20",
"52.4, 20","52.5, 20","52.6, 20","52.7, 20","52.8, 20","52.9, 20",
"51.1, 20.1","51.2, 20.1","51.3, 20.1","51.4, 20.1","51.5, 20.1",
"51.6, 20.1","51.7, 20.1","51.8, 20.1","51.9, 20.1","52.0, 20.1",
"52.1, 20.1","52.2, 20.1","52.3, 20.1","52.4, 20.1","52.5, 20.1",
"52.6, 20.1","52.7, 20.1","52.8, 20.1","52.9, 20.1","51.1, 20.2",
"51.2, 20.2","51.3, 20.2","51.4, 20.2","51.5, 20.2","51.6, 20.2",
"51.7, 20.2","51.8, 20.2","51.9, 20.2","52.0, 20.2","52.1, 20.2",
"52.2, 20.2","52.3, 20.2","52.4, 20.2","52.5, 20.2","52.6, 20.2",
"52.7, 20.2","52.8, 20.2","52.9, 20.2","51.1, 20.3","51.2, 20.3",
"51.3, 20.3","51.4, 20.3","51.5, 20.3","51.6, 20.3","51.7, 20.3",
"51.8, 20.3","51.9, 20.3","52.0, 20.3","52.1, 20.3","52.2, 20.3",
"52.3, 20.3","52.4, 20.3","52.5, 20.3","52.6, 20.3","52.7, 20.3",
"52.8, 20.3","52.9, 20.3"
];
var success = function(markers) {
for(var i in markers) {
var marker = markers[i];
map.setMarkerClick(marker, function() {
alert('marker clicked');
});
}
map.setCenter("52, 20", 7);
var mcOptions = {
gridSize : 50,
maxZoom : 15,
styles : [
{
width : 32,
height : 40,
url : 'images/flower.png'
}
]
};
var mc = new MarkerClusterer(map.map, markers, mcOptions);
};
var error = function(e1, e2) {
console.log(e1, e2);
};
var options = {
map : undefined
};
map.setMarkersAtAddresses(points, success, error, options);