Is there a way to use the "My location" button that exist on Google Maps in your own webbapplication using the javascript api?
I have read about adding controls here Google Maps Javascript API V3 Controls but I haven't found anything about the "My locaton" control.
“My Location” in Google Maps javascript API
google-maps-api-3
Related Solutions
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>
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:
Related Topic
- Google-maps – Google Maps V3 – How to calculate the zoom level for a given bounds
- Google Maps API 3 – Custom marker color for default (dot) marker
- Hide local listings from google maps api
- Html – Show My Location on Google Maps API v3
- Javascript – Google Maps JavaScript API RefererNotAllowedMapError
- Java – H2: how to tell if table exists
- Css – Huge Google Maps Controls (Possible Bug?)
Best Answer
There's currently no geolocation button in Google Maps API v3. But it's not difficult to implement one yourself.
Information about implementing geolocation can be found in the Google Maps Javascript API documentation.
If you want to add a geolocation button as a map control, read the Custom Controls section of the Google Maps documentation.