Show current user location in Google Maps (JavaScript) - javascript

I want to be able to show the current user location, and to automatically put a pin where the user is located. I need this in HTML/JavaScript, full code. Please help.

You've to use the Google API (JavaScript in this case) to show current location in maps. You've to import the library with:
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap" async defer>
And use the function initMap:
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: initLat, lng: initLon},
zoom: 6
});
When you obtain lat and lon from the navigation.geolocation, you've to update the map with map.setCenter(pos);, when pos is an array with lat and lon.
Here you've a full example.
Google official doc
I hope it helps :-)

Related

HERE Maps API JavaScript for Qualtrics

I am trying to insert a HERE Map API into a Qualtrics variable using JavaScript. I have tried to insert code into the JavaScript of a short text variable to bring up my HERE map using my HERE API that is all set up with the services needed, but nothing is showing up when I preview the survey. I am trying to determine where in the Qualtrics code I can return the map so it appears in the survey variable.
If anyone has any input/advice/code, I am all ears! Thank you!
This is the code I have in the header (under general settings):
src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"
src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"
This is the code I have in the javascript:
var platform = new H.service.Platform({
'apikey': '{MYAPIKEY}'
});
// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.vector.normal.map,
{
zoom: 10,
center: { lng: 13.4, lat: 52.51 }
});
Two things you should try if you haven't already:
Put your JS code inside the Qualtrics addOnload function.
Add a div with the id mapContainer to your question text (use HTML View)

"Cachebusting" / Obtain latest KMZ from NWS with GMaps API and JS [duplicate]

[EDIT] it seems the problem comes from google maps which takes some time to update the KML link...I'm not sure, but in the end, it works...[/EDIT]
I embedded an existing public google map on this website : http://www.ridetheflavour.fr
Here is the link of the public map : https://maps.google.fr/maps/ms?msa=0&msid=211027213468691902621.0004c8616605648d245b2
As you can see, the markers of the website's embedded map don't match the public google map markers. It seems it's not a matter of browser cache...
Here is the javascript snippet i'm using (Google map API V3) :
var mapOptions = {
center: new google.maps.LatLng(24.797409,-5.449219),
zoom: 3,
mapTypeId: google.maps.MapTypeId.TERRAIN,
overviewMapControl: false,
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var georssLayer = new google.maps.KmlLayer('https://maps.google.fr/maps/ms?ie=UTF8&authuser=0&msa=0&output=kml&msid=211027213468691902621.0004c8616605648d245b2');
georssLayer.setMap(map);
Any help would be greatly appreciated.
Google's servers cache the KML content for some period of time. To force the rendered KML to update, add a cache busting parameter to the URL. I usually use a function of the date/time if I need to do it programmatically, or if it is just a one time edit a manual ?a=0 and incrementing that as I make changes works.
Something like this (if you don't have any other query parameters in the URL):
var URL = filename+"?dummy="+(new Date()).getTime();
Or you can simplify it even further and use:
var URL = '[your kml url here]&ver=' + Date.now();
var georssLayer = new google.maps.KmlLayer(URL);

Error when Calling Local GeoJSON File in Google Maps API

Since Google Fusion Tables has been shut down, I'm trying to recreate a data layer (with U.S. Counties) using a JSON file.
Here is my JS:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
//center on the US
center: {lat: 39.8283, lng: -98.5795},
zoom: 5
});
var script = document.createElement('script');
//call json file of US counties
script.src = 'assets/sheet/places.json';
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
When I run the page, the map works but I get an error that says: "Uncaught SyntaxError: Unexpected token ':'" at only the second line of the JSON file.
Does anyone know what I can do to fix this? I've looked through pages of Google and haven't been able to find a solution. FYI, I basically have no experience with JSON but haven't found another way to convey a large dataset easily with Google Maps API.
The JSON file is here, in case anyone wants to see: https://www.estherloui.se/projects/sheet/gz_2010_us_050_00_20m.json
You can add GeoJSON data to your map using loadGeoJson. See the code below:
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
//center on the US
center: { lat: 39.8283, lng: -98.5795 },
zoom: 5
});
map.data.loadGeoJson('assets/sheet/places.json');
}
</script>
Screenshot:
Hope this helps!

Google maps api weather layer and geolocating

I'm currently trying to use google maps to first display a map of United States with the weather and cloud google map layers and then zoom into the user's location using geolocation google maps api. My problem right now is I am only able to display the map without any of the weather, cloud, or geolocation information and only using the iframe basic view mode maps api. I am fairly new to javascript but have a div with an id "map-canvas" in my body tags and a javascript file mapWeather.js in my head tags.
mapWeather.js:
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(37.6,-95.665)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
});
weatherLayer.setMap(map);
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
You probably already know, but do note that this library has been deprecated and will stop working in June.

Google Maps API: Get url for current view

I have a form where users can introduce google maps urls to specify the address of some stuff.
I've been thinking in showing a map through Google Map API v3, letting user move to desired location and through a button or something automatically get the url of the place and copy it to an input.
I've been able to display the map using the tutorial, but I haven't been able to find in the documentation how I could get the url...
I think you will not need it, but this is the simple code I'm using:
var latlng = new google.maps.LatLng(-34.397, 150.644);
var options = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById('map-box'), options );
I'd suggest using map.getCenter().toUrlValue() and map.getZoom() to obtain the centre and zoom state of the current map view. That information should let you build a URI that you can then use, bare in mind that you'll need to write some code to take the values off the URI and pass them to the map API.

Categories

Resources