This question already has answers here:
Closed 10 years ago.
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?
You can use the GeolocationMarker library. It is part of the Google Maps API Utility Library.
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>
Related
This question already has an answer here:
Google Maps Api V3 - Styling countries or cities
(1 answer)
Closed 5 years ago.
I want to show in my website only certain places using GoogleMap.It shouldn't show any small places.Only major places should be visilble in map.What is procedure to obtain this?
Set your lat/lon to the location of a post office (or other city indicator).
Then, use the zoom property to fix to the level you want to encompass.
See: https://developers.google.com/maps/documentation/javascript/examples/marker-simple
Here is the code form the example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Try that script at map.zoom = 16. Should be close to city view. London I think.
You can also set map bounds, but that is a lot harder. You would need to find your location, then plot geometry around that area, define the points, and then, zoom all points into view.
All of this is possible, but you showed me no code, so I'm not showing any back.
Hope you found something useful,
I am trying to create a map with markers.
But in the below code I can't see the markers.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps - pygmaps </title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&sensor=true_or_false"></script>
<script type="text/javascript">
function initialize() {
var centerlatlng = new google.maps.LatLng(37.427000, -122.145000);
var myOptions = {
zoom: 16,
center: centerlatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var latlng = new google.maps.LatLng(37.427000, -122.145000);
var img = new google.maps.MarkerImage('C:\Python27\lib\site-packages\gmplot\markers\D8BFD8.png');
var marker = new google.maps.Marker({
title: "no implementation",
icon: img,
position: latlng
});
marker.setMap(map);
var latlng = new google.maps.LatLng(37.428000, -122.146000);
var img = new google.maps.MarkerImage('C:\Python27\lib\site-packages\gmplot\markers\6495ED.png');
var marker = new google.maps.Marker({
title: "no implementation",
icon: img,
position: latlng
});
marker.setMap(map);
var latlng = new google.maps.LatLng(37.429000, -122.144000);
var img = new google.maps.MarkerImage('C:\Python27\lib\site-packages\gmplot\markers\000000.png');
var marker = new google.maps.Marker({
title: "no implementation",
icon: img,
position: latlng
});
marker.setMap(map);
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>
For example: C:\Python27\lib\site-packages\gmplot\markers\6495ED.png exists by the way. I can see that there are images but images dont appear on the map. Can anyone say how can I fix this situation?
Your path is incorrect. Change it with for example this URL.
https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png
and you will see markers.
You can find more about marker icons here
https://developers.google.com/maps/documentation/javascript/examples/icon-complex?hl=ru
I had an issue with something similar recently and just using forward slashes instead of back slashes fixed it
I'm updating some old code to Google Maps API v3, and I can't get the map to show anything. Dumping the map object to the console shows the map has been initialized properly and it is supposed to be loading in the proper div-- but nothing shows except a grey box.
I have set width/height and overflow for the map div, since this seems to be the most common problem.
However, I can't get this to work. Any ideas?
http://jsfiddle.net/Nbjrf/1/
Thanks
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style>
#map_canvas { height: 200px; width: 400px; overflow: visible; }
</style>
</head>
<body>
<div id="map_canvas"></div>
<script>
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
</script>
</body>
</html>
This works for me.
There is a big difference between
var maptype = 'google.maps.MapTypeId.HYBRID';
var mapInitOpts = {
mapTypeId: maptype
};
and
var mapInitOpts = {
mapTypeId: google.maps.MapTypeId.HYBRID
};
In 1 instance you are asigning to mapTypeId the text 'google.maps.MapTypeId.HYBRID' and the other you are assigning to mapTypeId the value of the variable google.maps.MapTypeId.HYBRID.
For your example to work you should at least put
var maptype = google.maps.MapTypeId.HYBRID;
not
var maptype = 'google.maps.MapTypeId.HYBRID';
Also I cannot make my example to work without zoom: and center: . Those might be required.
You had the mapTypeId constant in quotes, 'google.maps.MapTypeId.HYBRID'; it's a constant, not a string: google.maps.MapTypeId.HYBRID
Also, you need to supply a map centre, and a zoom level. This works:
var mapInitOpts = {
mapTypeId: google.maps.MapTypeId.HYBRID,
center: new google.maps.LatLng(-32.891058,151.538042),
zoom: 16
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapInitOpts);
Finally, you don't need to supply an API key any more.
The map displays 2 markers, one with geolocation coordinates and the other one with some random coordinates. I can't extend the bounds to fit both markers in the map. What's wrong? thank you in advance.
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes">
<meta charset="UTF-8">
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var geolocation = new google.maps.Marker({position: pos, map: map, title: 'Your geolocation', });
var latitude=47.03249;
var longitude=28.833747;
var pos2=new google.maps.LatLng(latitude,longitude);
var geolocation2 = new google.maps.Marker({position: pos2,map: map,title: 'Your geolocation',});
var pos3=new google.maps.LatLng((position.coords.latitude+latitude)/2,(position.coords.longitude+longitude)/2);
map.setCenter(pos3);
bounds.extend(geolocation.getPosition());
bounds.extend(geolocation2.getPosition());
map.fitBounds(bounds);
},
function() {handleNoGeolocation(true);});
}
else {handleNoGeolocation(false);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style='width:400px; height:400px;'></div>
</body>
</html>
your bounds needs to be a google.maps.LatLngBounds object.
You don't ever construct it.
Add (somewhere before you call extend on it):
var bounds = new google.maps.LatLngBounds();
BTW - you should be getting javascript errors that make this really clear.
I have embedded a Google Map in my website. I want to change its location according to user input. How can I do this?
I tried to copy the link of the location and assign it to the iframe src:
$("iframe").attr("src", "https://maps.google.co.in/maps?q=USA&hl=en&ll=37.09024,-95.712891&spn=131.016476,346.289063&sll=23.259933,77.412615&sspn=0.178842,0.338173&oq=usa&doflg=ptm&hnear=United+States&t=m&z=2");
but the iframe is not loading the map.
Try to use the GoogleMaps JavaScript API. The offer way more control (geocode, searching, custom marker, etc...) over the map then just embedding a iframe.
Take a look at this :)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// Initiate map
function initialize(data) {
// Make position for center map
var myLatLng = new google.maps.LatLng(data.lng, data.lat);
// Map options
var myOptions = {
zoom: 10,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
// Initiate map
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Info window element
infowindow = new google.maps.InfoWindow();
// Set pin
setPin(data);
}
// Show position
function setPin(data) {
var pinLatLng = new google.maps.LatLng(data.lng, data.lat);
var pinMarker = new google.maps.Marker({
position: pinLatLng,
map: map,
data: data
});
// Listen for click event
google.maps.event.addListener(pinMarker, 'click', function() {
map.setCenter(new google.maps.LatLng(pinMarker.position.lat(), pinMarker.position.lng()));
map.setZoom(18);
onItemClick(event, pinMarker);
});
}
// Info window trigger function
function onItemClick(event, pin) {
// Create content
var contentString = pin.data.text + "<br /><br /><hr />Coordinate: " + pin.data.lng +"," + pin.data.lat;
// Replace our Info Window's content and position
infowindow.setContent(contentString);
infowindow.setPosition(pin.position);
infowindow.open(map)
}
</script>
</head>
<body onload="initialize({lat:-3.19332,lng:55.952366,text:'<h2>Edinburgh</h2><i>Nice city!</i>'})">
<div id="map_canvas">
</div>
</body>
</html>