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
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)
[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);
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!
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.
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.