Menu
Possible Duplicate:
How to highlight a user's current location in google maps?
Is there any method to get blue circle marker in current location using javascript google maps api?
990
Introduction. A marker identifies a location on a map. By default, a marker uses a standard image. Markers can display custom images, in which case they are usually referred to as "icons." Markers and icons are objects of type Marker .
To edit the marker color, click or tap on the marker icon. When you do that, you can change both the color of the marker and its style. Go for the color or style you want to change and then click OK to see the effect. Click on the button labeled Done to save your new marker color settings.
The Google Maps pin is the inverted-drop-shaped icon that marks locations in Google Maps. The pin is protected under a U.S. design patent as "teardrop-shaped marker icon including a shadow".
Markers are objects of type Marker , and are added to the map with the GoogleMap. addMarker(markerOptions) method. Markers are designed to be interactive. They receive click events by default, and are often used with event listeners to bring up info windows.
You can use the GeolocationMarker library. It is part of the Google Maps API Utility Library.
131
Use the navigator.geolocation approach, and use a custom icon for your blue circle
https://developer.mozilla.org/en-US/docs/Using_geolocation
https://developers.google.com/maps/documentation/javascript/overlays#Icons
EDIT:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps User Location</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style>
html, body, #map_canvas{width:100%;height:100%;}
</style>
</head>
<body onload="locate()">
<div id="map_canvas"></div>
</body>
<script>
var im = 'http://www.robotwoods.com/dev/misc/bluecircle.png';
function locate(){
navigator.geolocation.getCurrentPosition(initialize,fail);
}
function initialize(position) {
var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var userMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: im
});
}
function fail(){
alert('navigator.geolocation failed, may not be supported');
}
</script>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
