This is my code to get current location using Geolocation property of HTML5,
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="html5_init.js" id="html5_init"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function TestGeo()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition( TestMap, error ,{maximumAge: 30000, timeout: 10000, enableHighAccuracy: true} );
}
else
{
alert("Sorry, but it looks like your browser does not support geolocation.");
}
}
var map;
function TestMap(position)
{
//var latitude = position.coords.latitude;
//var longitude = position.coords.longitude;
//alert("Your coordinates are " + position.coords.latitude + ", " + position.coords.longitude);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions =
{
zoom: 10,
center: coords,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({ position: coords, map: map, title: "Your current location!" });
}
function error()
{
alert("Cannot locate user");
}
</script>
</head>
<body>
<form name="myform">
<input type="button" value="Geolocation" onclick="TestGeo()">
<div id="map_canvas" style="width:500px; height:450px; border:1px solid #666666; "></div>
</form>
</body>
</html>
I am getting output: Cannot locate user
What is the solution for this?
I have putted "html5_init.js" in my root directory of archive.
The correct validation is:
if (navigator.geolocation !== null)
Related
I have a problem with google map, we have a website where we have introduced a map using the api , the problem is that the map when it is initialized comes in gray, he is blamed for resizing , but I can not solve. The map is initially hidden , and jquery by clicking on a field in a table shown.
enter code here
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#googleMap {
width: 100%;
height: 470px;
margin-top: 6.5%;
overflow: visible;
max-width: none !important;
}
</style>
</head>
<div id="googleMap"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=[key]&signed_in=false&">
</script>
<script>
var myCenter = new google.maps.LatLng(39.287649, -0.422548);
var myCenterverd = new google.maps.LatLng(39.287413, -0.422255);
var myCenterroig = new google.maps.LatLng(39.288497, -0.423953);
var myCentergroc = new google.maps.LatLng(39.287766, -0.421604);
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(39.287413, -0.422255),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
//disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapOptions);
//var marker=new google.maps.Marker({position:myCenter,icon:'gotaico.png'});
var markerverd = new google.maps.Marker({
position: myCenterverd,
icon: '../dashboard/include/Mapa/iconosrellenos/gotaicoverd.png'
});
var markerroig = new google.maps.Marker({
position: myCenterroig,
icon: '../dashboard/include/Mapa/iconosrellenos/gotaicoroig.png'
});
var markergroc = new google.maps.Marker({
position: myCentergroc,
icon: '../dashboard/include/Mapa/iconosrellenos/gotaicogroc.png'
});
//marker.setMap(map);
markerverd.setMap(map);
markerroig.setMap(map);
markergroc.setMap(map);
}
//google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function(map) {
setTimeout('initialize()', 2000);
google.maps.event.addListener(map, "idle", function(){
google.maps.event.trigger(map, 'resize');
this.map.setZoom( this.map.getZoom() - 1 );
this.map.setZoom( this.map.getZoom() + 1 );
});
});
</script>
</html>
Probably you should set the backgroundColor to transparent in the mapOptions.
var mapOptions = {
center: new google.maps.LatLng(39.287413, -0.422255),
zoom: 10,
backgroundColor: 'transparent',
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
I am following a tutorial that can locate a friend (their mobile) and pinpoint them on a Google map. All was going well including getting my coordinates and printing them to screen and putting them inside my <div id="location"></div> but now I am trying to take those coords and mark them on a map but I cant get the map to show. I'm sure my functions are set up wrong somehow but I can't work it out. Any clues?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="scripts/jquery.ui.map.js"></script>
<script>
$(document).ready(function(){
navigator.geolocation.getCurrentPosition(useposition);
});
</script>
<script>
function useposition(position){
lat = position.coords.latitude;
lon = position.coords.longitude;
$("#location").html('Lat: ' + lat + '<br />Lon: ' + lon);
};
function deviceposition(position){
$("#map").gmap({'center': deviceposition, 'zoom': 12, 'disableDefaultUI': true, 'mapTypeId': 'terrain'}).bind('init', function(ev, map) { themap = map;});
$('#map').gmap('addMarker', { 'id': 'client', 'position': deviceposition, 'bounds': true
});
}
</script>
</head>
<body>
<div id="location"></div>
<div id="map" style="width:400px; height:400px"></div>
<!-- This is supposed to be filled with the Google Map coords -->
</body>
</html>
I have tried passing div in CreateElement() method and then assigning the values to a variable mapcanvas. This whole declaration is inside a method which is called in this particular line:
navigator.geolocation.getCurrentPosition(success);
I am sharing the whole code..
<script>
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '600px';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title:"You are here!"
});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
</script>
Hope this would help!!!
I am trying to get infoboxes and cluster markers working nicely on my Google map but I am having trouble.
I have successfully got cluster markers working but I don't know how to load the page without all the infoboxes.
Edit: I have edited the below code to Geocodezip's suggestion and it is working.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false&ext=.js">
</script>
<script type="text/javascript" src="infobox.js"></script>
<script type="text/javascript" src="markerclusterer.js"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var secheltLoc = new google.maps.LatLng(-33.8515592,151.0386416),
markers,
myMapOptions = {
zoom: 7,
center: secheltLoc,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), myMapOptions);
// Start InfoBox
function initMarkers(map, markerData) {
var newMarkers = [],
marker;
for(var i=0; i<markerData.length; i++) {
var lat = markerData[i].lat;
var lng = markerData[i].long;
marker = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(lat, lng),
visible: true
}),
boxText = document.createElement("div"),
//these are the options for all infoboxes
infoboxOptions = {
content: boxText,
disableAutoPan: false,
zIndex: null,
maxWidth: 0,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 0.85,
},
closeBoxMargin: "6px 2px 0px 0px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: true
};
newMarkers.push(marker);
//define the text and style for all infoboxes
boxText.style.cssText = "border: 1px solid #333; margin-top: 3px; background: #fff; padding: 1px; font-size: 11px; white-space:nowrap; padding-right: 20px; color: #333";
boxText.innerHTML = markerData[i].BusinessName;
//Define the infobox
newMarkers[i].infobox = new InfoBox(infoboxOptions);
//Open box when page is loaded
// newMarkers[i].infobox.open(map, marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
for ( h = 0; h < newMarkers.length; h++ ) {
newMarkers[h].infobox.close();
}
newMarkers[i].infobox.open(map, this);
map.panTo(new google.maps.LatLng(lat, lng));
}
})(marker, i));
}
var markerCluster = new MarkerClusterer(map, newMarkers);
}
//here the call to initMarkers() is made with the necessary data for each marker. All markers are then returned as an array into the markers variable
markers = initMarkers(map, [
// DON'T EDIT BELOW THIS LINE.
{ lat: -33.878301, long: 150.981126, BusinessName: 'Example<br>InfoBox1' },
{ lat: -33.7452559, long: 150.6897012, BusinessName: 'Penrith Business' },
{ lat: -33.8618472, long: 151.1834829, BusinessName: 'Sydney Business' },
{ lat: -36.5796478, long: 144.7272382, BusinessName: 'Vic Business' },
{ lat: -33.2859758, long: 149.0950847, BusinessName: 'Orange Business' },
{ lat: -33.799211, long: 150.926357, BusinessName: '<a target="_blank" href="http://example.com">Example</a>', Note: 'This is an unseen note.' }
// DON'T EDIT ABOVE THIS LINE.
]);
}
// End InfoBox
// Geocoder below
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var BlueMarker = 'images/blue-marker.png';
var marker = new google.maps.Marker({
map: map,
icon: BlueMarker,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
// End Geocoder
</script>
</head>
<body onload="initialize()">
<div class="container">
<div class="content">
<div id="panel">
<input id="address" type="textbox" value="Melbourne, VIC">
<input type="button" value="< Type location to move map (and place blue marker)" onclick="codeAddress()">
</div>
<div style="width:850px; height: 600px" id="map-canvas"></div>
</div>
</div>
</body>
</html>
Remove the infowindow.open from the code that creates the infowindow if you don't want it open by default.
Comment out or remove this line:
//Open box when page is loaded
newMarkers[i].infobox.open(map, marker);
(leave the infowindow.open in the marker click event listener)
working fiddle
I'm trying to customize a map of Mass..to show 10 districts. I've added the link to the map created in "my places", but I can't get the map to center, zoom or title.. The center LatLng is Worcester.. nothing works
Help !!
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dist-layer</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script>
function initialize() {
// var myLatlng = new google.maps.LatLng(42.268843,71.803774);
// zoomControl:false,
// zoom: 18,
// Title: "Mass Districts",
// center: myLatlng
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var mapOptions = {};
var kmlLayer = new google.maps.KmlLayer({
url: "http://mapsengine.google.com/map/kml? mid=zHTaYadv8Mrs.kHqpg6p0mrlk&lid=zHTaYadv8Mrs.khlpCJFyVigQ",
suppressInfoWindows: true,
Map:map
});
google.maps.event.addListener(kmlLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width:40%; height:472px; float:left;"> </div>
<div id="content-window" style="min-width:15%; max-width:28%; height:430px; float:left; border: #0ff 5px double;padding: 10px;"> </div>
</body>
</html>
Set preserveViewport to true, otherwise the KmlLayer will zoom to fit its contents.
var kmlLayer = new google.maps.KmlLayer({
url: "http://mapsengine.google.com/map/kml?mid=zHTaYadv8Mrs.kHqpg6p0mrlk&lid=zHTaYadv8Mrs.khlpCJFyVigQ",
suppressInfoWindows: true,
preserveViewport:true,
map: map
});
function initialize() {
var myLatlng = new google.maps.LatLng(42.2625932, -71.8022934);
// zoomControl:false,
// zoom: 18,
// Title: "Mass Districts",
// center: myLatlng
var mapOptions = {
zoomControl: false,
zoom: 11,
title: "Mass Districts",
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var kmlLayer = new google.maps.KmlLayer({
url: "http://mapsengine.google.com/map/kml?mid=zHTaYadv8Mrs.kHqpg6p0mrlk&lid=zHTaYadv8Mrs.khlpCJFyVigQ",
suppressInfoWindows: true,
preserveViewport:true,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function (kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
}
google.maps.event.addDomListener(window, 'load', initialize);
fiddle
I am having some issues with the code below in IE8 & Firefox.
For some reason IE8 Errors saying
Webpage error details
Message: 'null' is null or not an object
Line: 30
Char: 1472
Code: 0
URI: https://maps-api-ssl.google.com/intl/en_gb/mapfiles/api-3/5/4a/main.js
This is the code I am using ....
<link href="https://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-0, 0);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var address = 'ACTUAL ADDRESS GOES HERE';
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latlng = new google.maps.LatLng(results[0].geometry.location);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
//alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
<div id="map_canvas" style="height: 408px; width: 750px;"></div>
<script>
initialize();
codeAddress();
</script>
Can anyone help me? Not sure why this wont work in IE and Firefox!
initialize() is causing an error because the map canvas is null. The map canvas is null because getDocumentById can't find map_canvas. getDocumentById can't find map_canvas because IE needs the <div> to be inside a <body> tag.
This fixed your script in IE for me:
<body>
<div id="map_canvas" style="height: 408px; width: 750px;"></div>
<script>
initialize();
codeAddress();
</script>
</body>
So make sure your document is well-formed HTML with <html>, <head>, and <body> tags all arranged appropriately.