I'm clueless as to why this won't run on my mobile browser but it will run on my PC browser, chrome to be exact.
Could any of you provide feedback.
Link to the server I'm testing this on:
54.172.35.180/chat/chatlist.php
<script type="text/javascript">
function success(position) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"You are here! (at least within a "+position.coords.accuracy+" meter radius)"
});
}
google.maps.event.addDomListener(window, 'load', navigator.geolocation.getCurrentPosition(success));
</script>
I originally just copied and pasted the code from the API site and it worked fine but as soon as I started pulling GPS data it stopped working on my mobile device's browser. Any help would be appreciated.
navigator.geolocation.getCurrentPosition doesn't return a position. So you can't use that result as a parameter of addDomListener(window, ...
What it does, is send a request. When that request is ready, a callback is triggerd. In that callback you can trigger your function success() (I named it initialize).
Just to show what's going on.
You can still choose if this is a good way to proceed.
Feel free to rename, extend, ...
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
function initialize(position, accuracy) {
var latlng = position || new google.maps.LatLng(50.45, 4.45); // set your own default location. This gets called if the parameters are left blank.
var myOptions = {
zoom: 15,
center: latlng
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
if (position) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "You are here! (at least within a " + accuracy + " meter radius)"
});
}
else {
// position of the user not found
}
}
function locationFound(position) {
initialize(
new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
position.coords.accuracy
);
}
function locationNotFound() {
initialize(null, null);
}
function page_loaded() {
// the page is loaded, we can send a request to search for the location of the user
navigator.geolocation.getCurrentPosition(locationFound, locationNotFound);
}
google.maps.event.addDomListener(window, 'load', page_loaded);
</script>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<div id="map-canvas"></div>
Probably it's a better idea to first load a map and set a default location.
When the location is found, you change the center and set the marker.
Notice now: if the location is not found, it takes quite a long time before locationNotFound is called
Related
What I want to achieve:
I want to display a search box in google map. When a user search a location, result is displayed in map box. On the map, when a user RightClick, I want to store the marker in database.
Resource I tried to implement
storing marker to database:
https://www.sanwebe.com/2013/10/google-map-v3-editing-saving-marker-in-database
displaying search box in map
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
I tried to implement these two as one: here is my minimal code
var mapCenter = new google.maps.LatLng(27.7172, 85.3240);
var map;
google.maps.event.addDomListener(window, 'load', map_initialize);
function map_initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
center: mapCenter,
zoom: 13,
mapTypeId: 'roadmap'
});
google.maps.event.addListener(map, 'rightclick', function(event) {
create_marker(event.latLng);
});
}
function create_marker(MapPos) {
var marker = new google.maps.Marker({
position: MapPos,
map: map
});
}
#map {
height: 200px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
With this code when I right click on the map, nothing happens i.e. neither the marker shows nor any error.
The map variable needs to be accessible from your create_marker function, therefore you declared it outside of your other functions. But also inside the map_initialize function. Remove the var declaration from there and it will work.
I have edited your original question to include a MCVE which means that I removed 90% of your code to keep only what you were after: adding a marker on right click.
Please take that as a suggestion for how to write your next questions.
var mapCenter = new google.maps.LatLng(27.7172, 85.3240);
google.maps.event.addDomListener(window, 'load', map_initialize);
function map_initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: mapCenter,
zoom: 13,
mapTypeId: 'roadmap'
});
google.maps.event.addListener(map, 'rightclick', function(event) {
create_marker(event.latLng);
});
}
function create_marker(MapPos) {
var marker = new google.maps.Marker({
position: MapPos,
map: map
});
}
#map {
height: 200px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
http://task4adamholt.appspot.com/?guestbook_name=Cars
For some reason every time the mouse is clicked, whether it be on the table or the actual map itself it refreshes all the maps for some reason.
Does anyone have any idea why, it's really strange. The .js file includes the following function
function getLoc(lon,lat,id) {
function initialize() {
var mapProp = {
center: new google.maps.LatLng(lat, lon),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(id), mapProp);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map,
title: 'Sent Here!'
});
}
google.maps.event.addDomListener(window, 'click', initialize);
document.getElementById(id).style.display = 'block';
}
This is the line that's causing the problem.
google.maps.event.addDomListener(window, 'click', initialize);
It listens for a click on the window, and runs the functions whenever a click happens, refreshing the map. I would definitely change the 'click' event to something else, like DOM ready.
I am working on a website that have multiple companies and employees, each company should register by entering its username,password and location on Google maps.
The location is going to appear to employees who are using an android application (Which is connected to the same website's database).
I want to know how to allow the company to specify their exact address either by typing the decimal points of the location or by using the pin to specify it on Google map or by allowing me to detect their location.
I read this: https://developers.google.com/maps/documentation/javascript/tutorial
but I do not know if it is what I need in my case.
Note that it is the first time for me to deal with maps so I am not deep into it.
I hope i understand you correctly.
One option could be something like this:
Get the user device' geolocation and put that position on a map with a draggable marker.
If the position is not correct, marker can be dragged and you will get the new coords - if the marker location has been changed.
Here is the code (with jquery):
var map;
var marker;
function initialize() {
var mapOptions = {
zoom: 11
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var marker = new google.maps.Marker({
position: pos,
map: map,
title: 'Here you are',
draggable: true
});
$('#user-info').append('Location found using HTML5<br/>');
map.setCenter(pos);
google.maps.event.addListener(marker, 'dragend', function(a) {
$('#user-info').append(a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4) +'<br/>' );
});
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
$('#user-info').append('Error: The Geolocation service failed.');
} else {
$('#user-info').append('Error: Your browser doesn\'t support geolocation.');
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
};
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
http://jsfiddle.net/iambnz/xdoc1nxm/
I hope this will help you.
In case you will need to get the exact address, you have to add geocoding functionality.
I've got an application (WebApp) that is running local (of course). However, I can suggest users might have the app downloaded, but not always have 3G/WiFi when running the app. Therefor, the Google Map would not load when a user doesn't has an internet connection, since it needs the web API.
As a fallback, I would like to show an image ('screenshot') when the map could not be loaded.
What would be the most appropriate solution? Thanks!
The whole map canvas works with help of these code pieces
HTML
<div id="map-canvas"></div>
CSS
#map-canvas {
width:100%;
height:200px;
}
Javascript
function initialize() {
var myLatlng = new google.maps.LatLng(51.81199,4.66656);
var mapOptions = {
zoom: 9,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
// END OF GOOGLE MAPS //
External Google API script
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
You wouldn't use the following line:
google.maps.event.addDomListener(window, 'load', initialize);
On window.onload you would check to see if google.maps exists and then use an if/else statement to toggle between the conditions - initialize, or load the image in the map's place. Something like:
window.onload = function () {
var foundGoogle, img;
foundGoogle = typeof google === 'object' && typeof google.maps === 'object';
if (foundGoogle) {
initialize();
} else {
img = new Image();
img.src = 'screenshot.png';
document.getElementById('map-canvas').appendChild(img);
}
}
Getting close to solving a three-day problem. I'm attempting to place markers on a Google Map using the lat, long stored in a Django model. I've never used AJAX before but am trying to do so to achieve this. Using Firebug, it's stating I have a for loop error in the JavaScript although I'm usure what it is (new at JavaScript). The source is displaying the lat, longs pulling up, although I'm usure the format is perfect (ends in a comma).
The code is below if anyone spots the error. Insight much appreciated:
<script>
function mainGeo()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition( mainMap, error, {maximumAge: 30000, timeout: 10000, enableHighAccuracy: true} );
}
else
{
alert("Sorry, but it looks like your browser does not support geolocation.");
}
}
var map;
function mainMap(position)
{
// Define the coordinates as a Google Maps LatLng Object
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Prepare the map options
var mapOptions =
{
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Create the map, and place it in the map_canvas div
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Place the initial marker
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Your current location!"
});
}
function error() {
alert("You have refused to display your location. You will not be able to submit stories.");
}
mainGeo();
var stories = [{% for story in stories %}
{latitude:{{story.latitude}},longitude:{{story.longitude}}}, {% endfor %}];
loadMarkers(stories);
function loadMarkers(stories)
for (var s in stories) {
var story = story[s];
var point = new google.maps.LatLng(story.latitude, story.longitude);
var marker = new google.maps.Marker({position: point, map: map});
}
</script>
Maybe the line saying var story = story[s]; should be var story = stories[s];.