In version 3 of the Maps API you can simply set the scrollwheel
option to false within the MapOptions properties:
options = $.extend({
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);
If you were using version 2 of the Maps API you would have had to use the disableScrollWheelZoom() API call as follows:
map.disableScrollWheelZoom();
The scrollwheel
zooming is enabled by default in version 3 of the Maps API, but in version 2 it is disabled unless explicitly enabled with the enableScrollWheelZoom()
API call.
This is the simplest I could reduce it to:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
👨💻 Edit/fork on a Codepen →
SCREENSHOT
There is some closure magic happening when passing the callback argument to the addListener
method. This can be quite a tricky topic if you are not familiar with how closures work. I would suggest checking out the following Mozilla article for a brief introduction if it is the case:
❯ Mozilla Dev Center: Working with Closures
Best Answer
OpenSteetMap data is better in the sense that:
Tiles - depends on the application you would like to build. For a small (not a high number of http requests) web application you can use the web API which is highly documented and reliable.
The real advantage of OpeenStreetMap, is using OSM data and a number of tools to built you're own OSM server (a good article here), and to use Mapnik or Osmarender tiles render engines for generating you're own tiles that can be used on web applications. This is why the Tile limitation usage exists, because they recommend hosting and using your own server tiles.
The main difference between Mapnik and Osmrender is that the second exports SVG tiles format.
Information regarding your requirements:
A. routing
It's possible to use OSM data to build a routing web application. Here is a list of routing programs and web services on OpenStreetMap wiki
Here are two websites using routing with OpenStreetMap which can give you an idea of how it's used on web applications:
yournavigation.org
openrouteservice.org
B. search by gps coordinates
You can use reverse-geocoding and query the OSM database for GPS coordinates the Nominatim tool.
Here is a web application using this tool.
C. layers
Here is the list of webmaps libraries that you can use.
OpenLayers can work with Mapnik generated tiles and it's a commonly used library (with no server-side dependencies) with plenty of docs. It's a framework that can be used as well with Google maps, so it's worth giving it a try.
Polymaps integrates well with SVG tiles generated be Osmarender. It can generate display / diagrams / of specific areas based on marker - user location.