I'm try to get my current location on Apple Maps using MapKit JS, but I'm not sure how to do that. The following is the code I have to load the coordinates manually. But I need to be able to have the code to automatically recognize my current coordinate and show it on the Apple Map.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>
<style>
#map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapkit.init({
authorizationCallback: function(done) {
done("API KEY");
},
language: "en"
});
var map = new mapkit.Map('map', {
showsMapTypeControl: false,
showsCompass: mapkit.FeatureVisibility.Hidden
})
var coordinateRegion = new mapkit.CoordinateRegion(
new mapkit.Coordinate(40.51415196691954, -74.43808765761719),
new mapkit.CoordinateSpan(1.234, 1.23423)
);
map.region = coordinateRegion;
</script>
</body>
</html>
navigator.geolocation.getCurrentPosition(function(position){
mylat=position.coords.latitude;
mylng=position.coords.longitude;
map.setCenterAnimated(new mapkit.Coordinate(mylat, mylng), true);
});
Clarification as requested:
The code above leverages HTML5 Geolocation API. Once the user allows access to their location and it is retrieved, we pass the coordinates to the mapkit element to be set as the center.
Related
I'm using Mapbox to integrate in a javascript/php project. So far so good. Works great. Looking around their api I was wondering whether it was possible to have a mix between mapbox-gl-directions and mapbox-directions api. They don't seem to be the same thing.I really like the example from mapbox-gl-directions which gives the user options to select between driving, cycling and walking. But I already have coordinates for the origin point and coordinates for the destination point. I don't necessarily need the user to input those coordinates but I would also like to leave the user the option to enter alternative coordinates if he wanted to. How can I add starting and destination points to the mapbox-gl-directions just like the mapbox-directions-api? I've looked everywhere in their docs.
mapbox-gl-directions :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display driving directions</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; };
</style>
</head>
<body>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.js"></script>
<link
rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.css"
type="text/css"
/>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoid2ViYjI0aCIsImEiOiJjazU3a2lkbW4wNGJrM2RvNnNrNnBzbGlxIn0.GGnF34IsMQyqKNoam241tA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-79.4512, 43.6568],
zoom: 13
});
map.addControl(
new MapboxDirections({
accessToken: mapboxgl.accessToken
}),
'top-left'
);
</script>
</body>
</html>
Turn
map.addControl(
new MapboxDirections({
accessToken: mapboxgl.accessToken
}),
'top-left'
);
into
var directions = new MapboxDirections({
accessToken: mapboxgl.accessToken
});
map.addControl(directions,'top-left');
map.on('load', function() {
directions.setOrigin([12, 23]); // can be address in form setOrigin("12, Elm Street, NY")
directions.setDestinaion([11, 22]); // can be address
})
everyone, I have uploaded my google map KML file to my website then I have used google map javascript API key. if you notice once you run the map you will see all my markers in white( transparent ) is there a way to have my map exactly the same way like I had it before saving. the code below, Thank you in advance:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(35.5715, -97.66704),
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://rogerslimos.com/KML.kml',
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
am struggling the last 3 hours
am trying to update my google maps markers positions from database without refresh the page so the user can track updated movement
i used jquery to extract all the data from database from page called data.php that give me everything i need to type it directly into the javascript code to add the markers.
but when i put or inside the javascript initialization function everything is not working
so i don't know how to get the html.(output).show to div without crashing the whole code
here is the code of the page that i want to display google markers
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>GLOBAL CLEANERS</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="jquery.js"> </script>
<script type="text/javascript">
function get()
{
$.post('data.php',function(output)
{$('#age').html(output).show();}
);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(33.3146996,44.3772661);
var mapOptions = {
zoom: 11,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var image = 'zbala.png';
<?php echo '<div id="age">var myLatlng500 = new google.maps.LatLng(33.3146996,44.3772661);</div>'; ?>
}
google.maps.event.addDomListener(window, 'load', initialize);
// ??? ????? ????? ???? ???????
</script>
</head>
<body bgcolor="002022">
<form name="form"><input type="button" name="submit-button"value="submit-button"onclick="get();"></form>
<img src="logo-global.jpg" style="height: 100px;width:90%;position: absolute;left:150px;top:0%; opacity: 1.0;"/>
<div id="map-canvas" style="width:100%;height:100%px;top: 100px;left:150px"></div>
</body>
</html>
I am trying to use google maps JS API v3 in one of my projects everything was working fine until day before yesterday, then suddenly it stopped working when i tried to debug using console it showed that the url for loading map script main.js was failing
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key={API_KEY}&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
I have used a real API key in place of {API_KEY}
How can I achieve my objective?
I pasted your code into a file named test.html, inserted a valid api key and tested the following browsers in MAC OS X 10.9:
Safari
Chrome
Firefox
It works in all these browser without any error. Please check the following:
Validation period of your api key
invisible characters
I'm really stuck so any help would be appreciated. TIA!
I have a Quartz Composition in which I want to display a Streetview (from Google Maps) and be able to control the navigation (as in be able to advance forward, etc.). This would mean I need a JavaScript for it and I've got no idea on how to link the JavaScript Patch in QC with the Google Maps API.
So how could I add two strings, representing Lat and Long and display the Streetview?
Here is a sample HTML from Google doing that:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var bryantPark = new google.maps.LatLng(37.869260, -122.254811);
var panoramaOptions = {
position:bryantPark,
pov: {
heading: 90,
pitch:0,
zoom:0
}
};
var myPano = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
myPano.setVisible(true);
}
</script>
</head>
<body onload="initialize()">
<div id="pano" style="width: 1280px; height: 1024px"></div>
</body>
</html>
How could I do this in Quartz Composer JavaScript Patch or any other patch?
Thanks a lot!
P.S.: It already works partially by loading the page with CoGe Webkit Plugin for QC. But I have no idea on how to control the JavaScript inside the HTML via QC. Any other way to send variables from QC to a HTML page or anything similar?
Really easy actually, hope it will help others as well.
HTML:
function initialize(x, y) {
var pos = new google.maps.LatLng(x, y);
// whatever else you need it to do
}
QC:
initialize(x, y)
Thanks to the creator of the CoGe WebKit plugin, Tamas Nagy for the answer!