I am making an html file that basically prints out the coordinates given by the user in a map. Whenever I click the submit button, it returns me an error of "UncaughtReferenceError: NewMap is not defined" i tried using an external javascript and inline javascript but it does not seem to solve the problem. Can you tell me what is wrong with the code?
<!DOCTYPE html>
<html>
<head>
<title>Find My Phone</title>
</head>
<body bgcolor="#2196F3">
<p style="font-size:150%; text-align:center">This is the extension for the app FindMyPhone. In this site, you can view the coordinates where your phone was traced on a map</p>
Latitude:
<input type="number" step="any" id="Lat"/> <br>
Longitude:
<input type="number" step="any" id="Lng"/> <br>
<button onclick="NewMap()">Submit</button>
<div id="map" style="height:500px;width:500px; color:#9E9E9E">
</div>
<script>
function NewMap() {
var mapCanvas = document.getElementById("map").value;
var Latitude = document.getElementById("Lat").value;
var Longitude = document.getElementById("Lng").value;
var mapOptions = {
center: document.getElementById("Lat, Lng")
zoom:15
}
var map = new.google.maps.Map (mapCanvas, mapOptions)
}
</script>
</body>
</html>
P.S: Supposing this code works, will it output the map correctly? Please also show me if it is right or wrong.
Include Google Map Library
You have missed out a comma after center property.
var mapOptions = {
center: document.getElementById("Lat, Lng"),
zoom:15
}
Related
I have a java client which receive from the server longitude and latitude and i need to send these coordinates as a parameter to an html file which is google map to locate these coordinates i need a way to open html file with passing parameters.
Thanks :)
here's the html code
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850), //coordinates
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>
So I feel I'm almost there to the solution but I'm really in need of help here. What I'm trying to do is to create an array using .getValues() to get a range that contains four columns (Name, Address, Latitude, and Longitude). After that I want to return the variable back into a global variable and then call that variable from the HTML side. I tried linking the google script with the HTML and then calling the variable there but having quite a bit of trouble with that. Thank you guys for all of your help!
Below is the google script:
var id = 'Spreadsheet Key';
function doGet(e) {
var html = HtmlService.createTemplateFromFile('Sample');
return html.evaluate().setTitle('Directory Map');
}
function entries() {
var blop =
SpreadsheetApp.openById(id).getSheetByName('Sheet1').getRange('A1:D').getValues();
return blop;
}
This is the HTML in Google Script.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<script>
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 39.8283, lng: -98.5795},
zoom: 5,
mapTypeId: 'roadmap',
gestureHandling: 'greedy'
});
var locations = [blop];
for (var i = 0; i < locations.length; i++) {
var sites = locations[i];
var myLatLng = new google.maps.LatLng(sites[2],sites[3]);
var sites = new google.maps.Marker({
position: myLatLng,
map: map,
title: sites[0],
});
};
}
</script>
<script> google.script.run.entries(); </script>
<script src="https://maps.googleapis.com/maps/api/js?key=MyAPIKey&libraries=places&callback=initAutocomplete"async defer></script>
<script src="https://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="SampleCode.gs"></script>
</body>
</html>
The starting point is:
<script> google.script.run.entries(); </script>
The above code runs when the page is loaded in the browser. You need a "success handler", and then the success handler can store the data somewhere. You could put the data into a window variable, or local browser storage.
<script>
window.storeSheetValues = function(theReturnedData) {
console.log('theReturnedData: ' + theReturnedData)
console.log('typeof theReturnedData: ' + typeof theReturnedData)
window.mySheetData = theReturnedData;//Put the data into a window variable
}
google.script.run
.withSuccessHandler(storeSheetValues)
.entries();
</script>
Check the data type of the return value coming back from the server. If it's a string, you may want to turn it back into an array.
including leaflet and jQuery in the head, I have this code:
<form name="formone"> ...
<div id="clickmap">
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map').setView([34.00, 8.00, 6);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map);
function onMapClick(e) {
var lat = (e.latlng.lat);
var lng = (e.latlng.lng);
var marker = L.marker([lat, lng], {draggable:true}).addTo(map).bindPopup($('Remove ME').click(function() { map.removeLayer(marker); })[0]);
// latnew = marker._latlng.lat; // test
// latold = document.formone.GPSLatitude.value; // test
}
map.on('click', onMapClick);
// function simply() {} // test
</script>
</div><!-- end clickmap -->
...
<input type="text" name="GPSLatitude" onclick="javascript:simply();" value="<?php echo $GPSLatitudeDec; ?>" size="25" maxlength="20" />
...
... </form>
With a click, I set a marker on the map.
In this procedure I would like to update the input-field,
before submitting. Also, if I drag the marker on the map,
the input-field should become updated.
And the last marker can become deleted too,
so that I've to deal only with one marker.
Can someone give me an overview, how to do that?
I'm not to exercised in the jQuery- or Leaflet-libaries.
Are there any functions workarounds prepared?
Thank you,
Rob
If you have two textboxes on your page, how about updating their values from inside the onMapClick(e) function?
...
<p>Latitude: <input id="latInput"> :: Longitude: <input id="lngInput"></p>
<script>
...
function onMapClick(e) {
... //whatever code you've already put
document.getElementById('latInput').value = lat;
document.getElementById('lngInput').value = lng;
}
...
</script>
Edit: Similar answer shared here as well: https://stackoverflow.com/a/27272673/4355695, with working example : http://plnkr.co/edit/iyMhaoAyllr2uNSOHhS9?p=preview
Edit: worked out a full solution with both drag and click, and having reverse functionality too (user-entered values in form fields can move the marker). It also remembers the previous location marked by the user. See
working example: http://plnkr.co/edit/PTFlun?p=preview
I have my page so that it allows the user to see their latitude and longitude. I've embedded a google map so that the user can click physically see where they're at. This is a project for my computer science class, so I don't want you to physically write the code for me. I just want suggestions on how to solve this. Here's what I have right now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- This page will allow the suer to track their location through means of the HTML5 Geolocation feature -->
<title>Assignment 4:Track My Location</title>
<meta name="author" content="Alan Sylvestre" />
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function myLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(locationReveal);
} else {
alert("Please use a different browser that supports geolocation.");
}
}
window.onload = myLocation;
function locationReveal(position) {
showMap(position.coords);
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var div = document.getElementById("location");
div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
}
var map;
function showMap(coords) {
var googleLatAndLong = new google.maps.LatLng(coords.latitude, coords.longitude);
var mapOptions = {
zoom : 18,
center : googleLatAndLong,
mapTypeId : google.maps.MapTypeId.SATELLITE
};
var mapDiv = document.getElementById("map");
map = new google.maps.Map(mapDiv, mapOptions);
addMarker(googleLatAndLong);
}
google.maps.Map(mapDiv, mapOptions);
var marker;
function addMarker(latlong) {
var markerOptions = {
position : latlong,
map : map
};
marker = new google.maps.Marker(markerOptions);
}
var center;
function calculateCenter() {
center = map.getCenter();
}
</script>
</head>
<body style="background-color:yellow;" text="blue;">
<div align="center">
<h1>Reveal My Location</h1>
<p>
You know what's pretty cool? Tracking your location using a simple internet connection. By clicking this button, you're browser will track a global database and reveal your location in terms of latitude and longitude. Enjoy!
</p>
<div id="location"></div>
<br>
<div id="map" style="width:400px; height:400px;"></div>
<br>
<input type="button" id="centerOfMap" value="Center" onclick="calculateCenter()">
<footer>
<p>
© Copyright by Alan Sylvestre
</p>
</footer>
</div>
</body>
First you need to make sure that the DOM is loaded before you run your JavaScript.
That is why 'mapDiv' is 'undefined'.
Either wrap your script in a window.onload anonymous function or push it to just before the closing body tag.
I have some jquery (below) with creates multiple maps on window load. However there is some strange behaviour with the maps, but no errors.
The problem is when the maps load they all have the same location on the map, even when multiple different lng and lats are set.
Below is the the code that create the map and some sample html of one of the maps's boxes.
The strange thing is that the maps have the same locations but there are not errors. Has anyone experienced this before or know why it's happening.
Cheers.
Js: (assume this is called onloand and some blank global arrays are set.)
var maps_boxes = {
initialise: function() {
$('.a_map').each(function(index) {
var map_box = $(this);
var map_id = map_box.find('.the_map').attr('id');
var lat = map_box.find('.lat').val();
var lng = map_box.find('.lat').val();
lat_lngs[index] = new google.maps.LatLng(lat,lng);
options[index] = {
zoom: 4,
center: lat_lngs[index],
mapTypeId: google.maps.MapTypeId.ROADMAP
};
maps[index] = new google.maps.Map(document.getElementById(map_id), options[index]);
});
}
};
Sample html of one map:
<div class="a_map">
<form class="map_data" >
lng:<input class="lng" type="text" value="0" /><br />
lat:<input class="lat" type="text" value="10" />
</form>
<div id="map_xxxxx" class="the_map" ></div>
</div>
If you are using the same code you posted, you are getting same value for both the latitude and longitude:
var lat = map_box.find('.lat').val();
var lng = map_box.find('.lat').val();
I tried initializing 2 different maps on same page it is working fine.