am developing an app which uses map, and am using html, javascript for developing, i found that there is an extension for windows store app for using bing map, but its not supported in windows phone 8.1 javascript app development. so i hacked into the entension for RT and added to my project, and only error i get is Windows.ApplicationModel.Resource.core.ResourceManager has been deprecated. and i know that other scripts are loading before the map does. and still i couldnt find he solution. here is my code.
default.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>homePage</title>
<!-- WinJS references -->
<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/home/home.css" rel="stylesheet" />
<script src="/pages/home/home.js"></script>
<!-- bing map api-->
<script type="text/javascript" src="/js/bing/veapicore.js"></script>
<script type="text/javascript" src="/js/bing/veapiModules.js"></script>
<link href="/css/mapcontrol.css" rel="stylesheet" />
<!--<script type="text/javascript"
src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
</script>-->
<!-- bing map controls-->
<script src="/js/MapControls.js"></script>
</head>
<body>
<!-- The content that will be loaded and displayed. -->
<div class="fragment homepage">
<header aria-label="Header content" role="banner">
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Native</span>
</h1>
</header>
<section aria-label="Main content" role="main" style="overflow:auto;">
<div style="float:left; margin: 10px 10px 10px 10px;">
<input type="button" value="Get My Location" onclick="GetMyLocation();" />
<input type="text" id="txtStart" placeholder="Source" maxlength="50" />
<input type="text" id="txtEnd" placeholder="Destination" maxlength="50" />
<input type="button" value="Create Route" onclick="GetRoute();" />
</div>
<div id="mapcontainer" style="height:150px;width:150px;"></div>
<div id='itineraryDiv' style="position:relative; width:40%; height:90%; float: right; overflow:auto; font-family:Verdana, Arial"></div>
</section>
</div>
mapcontrol.js
(function () {
function initialize() {
Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: GetMap });
}
document.addEventListener("DOMContentLoaded", initialize, false);
})();
var map, searchManager, directionsManager, loc = null;
function GetMap() {
var mapOptions =
{
credentials: "bing map key",
mapTypeId: Microsoft.Maps.MapTypeId.road
};
map = new Microsoft.Maps.Map(document.getElementById("mapcontainer"), mapOptions);
}
function GetMyLocation() {
var geolocator = new Windows.Devices.Geolocation.Geolocator();
geolocator.getGeopositionAsync().then(function (loc) {
var mapCenter = map.getCenter();
mapCenter.latitude = loc.coordinate.latitude;
mapCenter.longitude = loc.coordinate.longitude;
map.setView({ center: mapCenter, zoom: 12 });
var loc = new Microsoft.Maps.Location(loc.coordinate.latitude, loc.coordinate.longitude);
var pushPin = new Microsoft.Maps.Pushpin(loc);
map.entities.push(pushPin);
});
}
function geocodeCallback(response, userData) {
if (response &&
response.results &&
response.results.length > 0) {
var r = response.results[0];
var l = new Microsoft.Maps.Location(r.location.latitude, r.location.longitude);
//Display result on map
var p = new Microsoft.Maps.Pushpin(l);
map.entities.push(p);
//Zoom to result
map.setView({ center: l, zoom: 15 });
} else {
ShowMessage("Geocode Response", "Not results found.");
}
}
function GetRoute() {
ClearMap();
if (directionsManager) {
directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
var startWaypoint = new Microsoft.Maps.Directions.Waypoint(
{ address: document.getElementById('txtStart').value });
var endWaypoint = new Microsoft.Maps.Directions.Waypoint(
{ address: document.getElementById('txtEnd').value });
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('itineraryDiv') });
directionsManager.calculateDirections();
} else {
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', {
callback: function () {
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
GetRoute();
}
});
}
}
function ClearMap() {
map.entities.clear();
if (directionsManager) {
directionsManager.resetDirections();
}
}
function geocodeError(request) {
ShowMessage("Geocode Error", "Unable to Geocode request.");
}
function ShowMessage(title, msg) {
var m = new Windows.UI.Popups.MessageDialog(title, msg);
m.showAsync();
}
the error which i get is.
The method Windows.ApplicationModel.Resources.Core.ResourceManager.get_DefaultContext has been deprecated. DefaultContext may be altered or unavailable for releases after Windows Phone 'OSVersion' (TBD). Instead, use ResourceContext.GetForCurrentView.
it will be so helpful if someone figure it out. thanks in advance.
Use the online URL to Bing Maps V7 or v8 and not the JS files from the Windows 8 API. Note that the Windows 8 API is deprecated in Windows 10.
Related
I have created a simple map with a drop down that allows a user to select a college campus location. Now I am trying to have the previous selection clear when a new location is selected.. any suggestions with this would be great.
I know there has to be a better way to do this instead of creating the multiple variables and functions but it just needs to be functional at this point.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="styles.css" />
<script src="https://maps.googleapis.com/maps/api/js?key=
AIzaSyDCnqMp9UXHgRIu0A9vWtn2MFiO1Ze-sq8
&callback=initMap"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<header>
<div class="ui-body ui-body-a ui-corner-all">
<h3>BCIT Campuses</h3>
<p>This app is designed to show you the various BCIT Campus locations</p>
</div>
</header>
<form>
<div class="ui-field-contain">
<label for="select-native-1">Select a campus</label>
<select id="location" name="location">
<option disabled selected> -- select a location -- </option>
<option value="DTN" onClick="downtownPin()">Downtown Campus</option>
<option id="BBY" name="burnaby" value="BBY" onClick="burnabyPin()">Burnaby Campus</option>
<option id="ANN" value="ANN" onClick="annacisPin()">Annacis Campus</option>
</select>
</div>
</form>
<div data-role="page" id="map-page" data-url="map-page">
<div data-role="header" data-theme="a">
<h1>Maps</h1>
</div>
<div role="main" class="ui-content" id="map-canvas">
<!-- map loads here... -->
</div>
</div>
<footer>
<div class="ui-body ui-body-a ui-corner-all">
<h4>Wade Barrie</h4>
</div>
</footer>
</body>
<script>
/*
* Google Maps documentation: http://code.google.com/apis/maps/documentation/javascript/basics.html
* Geolocation documentation: http://dev.w3.org/geo/api/spec-source.html
*/
var map;
function myMap() {
var mapCanvas = document.getElementById("map-canvas");
var mapOptions = {
center: new google.maps.LatLng(49.2595139, -123.1133546),
zoom: 10
};
map = new google.maps.Map(mapCanvas, mapOptions);
}
var myLatlng = new google.maps.LatLng(49.283333, -123.115556);
var downtownCampus = new google.maps.LatLng(49.283333, -123.115556);
var annacisCampus = new google.maps.LatLng(49.1636275, -122.9702631);
var burnabyCampus = new google.maps.LatLng(49.2505981, -123.0020511);
var mapOptions = {
zoom: 10,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var downtownCampus = new google.maps.Marker({
position: downtownCampus,
title: "Downtown Campus"
});
var annacisCampus = new google.maps.Marker({
position: annacisCampus,
title: "Annacis Island"
});
var burnabyCampus = new google.maps.Marker({
position: burnabyCampus,
title: "Burnaby Campus"
});
// functions that actually place the pin on the map when selected
function annacisPin(reload) {
annacisCampus.setMap(map);
}
function downtownPin() {
downtownCampus.setMap(map);
}
function burnabyPin() {
burnabyCampus.setMap(map);
}
</script>
</html>
You can use yourmarker.setMap(null) to remove a marker from the map before displaying the next one. setMap(map) adds a marker to the map. setMap(null) removes it.
I would like to display the address on dynamics CRM using MapBox API, i
have used Google API and it works perfectly, but now i would like to display it using map box.
I have looked at the forward geo-location feature of Mapbox but it's not yet clear.
So my variable my address variable will be coming from a field.
e.g var address = "6 Antares Drive, Ottawa, Ontario K2E 8A2, Canada";
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add a geocoder</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/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-geocoder/v2.1.1/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.1/mapbox-gl-geocoder.css' type='text/css' />
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibGF3aXgxMCIsImEiOiJjamJlOGE1bmcyZ2V5MzNtcmlyaWRzcDZlIn0.ZRQ73zzVxwcADIPvsqB6mg';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-79.4512, 43.6568],
zoom: 13
});
var address = "6 Antares Drive, Ottawa, Ontario K2E 8A2, Canada";
var geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken });
geocoder.query(address); // how do i search and display this address
map.addControl(geocoder);
//map.addControl(new MapboxGeocoder({
// accessToken: mapboxgl.accessToken
//}));
</script>
</body>
</html>
How can the address be displayed similar to that of google map on the Html Page.
mapbox-gl-geocoder is a geocoder control for Mapbox GL JS, it's intended to provide a the user interface, that is, an input search box for searching on top of the Mapbox Geocoding API.
If you already have your query and just want to display that location on the map you're better to use the Mapbox JavaScript SDK with geocodeForward, see https://github.com/mapbox/mapbox-sdk-js#installation.
The Console.Log was very helpful, I found out that the data.features.center returns the coordinates which was all what i needed . the full code is below
<html>
<head>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body style="word-wrap:break-word;">
<div id='map'></div>
<script src='https://unpkg.com/mapbox#1.0.0-beta9/dist/mapbox-sdk.min.js'></script>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibGF3aXgxMCIsImEiOiJjamJlOGE1bmcyZ2V5MzNtcmlyaWRzcDZlIn0.ZRQ73zzVxwcADIPvsqB6mg';
console.log(mapboxgl.accessToken);
var client = new MapboxClient(mapboxgl.accessToken);
console.log(client);
var address = 't5h 0k7'
var test = client.geocodeForward(address, function(err, data, res) {
// data is the geocoding result as parsed JSON
// res is the http response, including: status, headers and entity properties
console.log(res);
console.log(res.url);
console.log(data);
var coordinates = data.features[0].center;
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v10',
center: coordinates,
zoom: 14
});
new mapboxgl.Marker()
.setLngLat(coordinates)
.addTo(map);
});
</script>
</body>
</html>
I'm trying to customize a marker on the map but I keep getting 'google is not defined'. I've tried different things but it's still not working. I have used an API key and also included the maps script before initializing the map.
This is my html:
<html class="no-js" lang="en-US" >
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home – Algebra</title>
<link rel='dns-prefetch' href='//ajax.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js?ver=2.1.0'></script>
<link rel='https://api.w.org/' href='http://localhost/algebra/wp-json/' />
<link rel="alternate" type="application/json+oembed" href="http://localhost/algebra/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Falgebra%2Fhome%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://localhost/algebra/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Falgebra%2Fhome%2F&format=xml" />
</head>
<body class="page page-id-4 page-template page-template-page-templates page-template-page-home page-template-page-templatespage-home-php logged-in offcanvas">
<header id="masthead" class="site-header" role="banner">
<div class="top-strip"></div>
<div class="top-nav"></div>
</header>
<section class="container">
<section class="map">
<div id="map-container"></div>
<div class="contact-container">
<div class="contact">
<img src="" alt="mail-icon">
<span>You can contact us at info#algebraventures.com</span>
</div>
</div>
</section>
</section>
<div id="footer-container">
<footer id="footer">
</footer>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKX-BAa2bSAiC89C38o8ir29Q7iOWdQ94&callback=initMap"
type="text/javascript"></script>
<script type='text/javascript''>
var myCenter = new google.maps.LatLng(29.714954,32.368546);
function initMap() {
var mapProp = {
center:myCenter,
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map-container"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
title: "AZHA"
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"AZHA"
});
infowindow.open(map,marker);
}
// google.maps.event.addDomListener(window, 'load', initMap);
</script>
<script type='text/javascript' src='http://localhost/algebra/wp-includes/js/wp-embed.min.js?ver=4.6.1'></script>
</body>
</html>
I'd appreciate some help, thanks.
If you are loading the API asynchronously (with async, defer, &callback=initMap), you need to put all code that depends on the API inside the callback function (or at least somewhere where it won't execute until the API has loaded). Right now your myCenter variable is defined outside the callback function.
Change:
<script type='text/javascript''>
var myCenter = new google.maps.LatLng(29.714954,32.368546);
function initMap() {
To:
<script type='text/javascript''>
function initMap() {
var myCenter = new google.maps.LatLng(29.714954,32.368546);
proof of concept fiddle
code snippet:
html,
body,
#map-container,
.map,
.container {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<header id="masthead" class="site-header" role="banner">
<div class="top-strip"></div>
<div class="top-nav"></div>
</header>
<section class="container">
<section class="map">
<div id="map-container"></div>
<div class="contact-container">
<div class="contact">
<img src="" alt="mail-icon">
<span>You can contact us at info#algebraventures.com</span>
</div>
</div>
</section>
</section>
<div id="footer-container">
<footer id="footer">
</footer>
</div>
<script type='text/javascript'>
function initMap() {
var myCenter = new google.maps.LatLng(29.714954, 32.368546);
var mapProp = {
center: myCenter,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-container"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
title: "AZHA"
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content: "AZHA"
});
infowindow.open(map, marker);
}
// google.maps.event.addDomListener(window, 'load', initMap);
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" type="text/javascript"></script>
I have a page where I am loading google maps. I use getCurrentPosition over http and even I receive a warning from google api. The problem is that it breaks also the javascript and that ruins everything. The code was working for quite some time but the last week things broke.
Below is the html and script. You can add it in html and run it and see (tried with stackoverflow but had some issues with the script)
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
</head>
<body>
<header class="desktop">
</header>
<div id="st-container" class="st-container">
<div class="st-pusher">
<div class="st-content">
<div class="st-content-inner">
<div class="logo-mobile">
</div>
<section class="map-sections">
<div style="position: absolute; z-index: 1000; width: 100%; margin-top: 30px;">
<div class="row">
<div class="large-12 columns">
<div class="filter clearfix">
<input type="text" id="search-field" placeholder="Search place">
<span>eller...</span>
Search near you
</div>
</div>
</div>
</div>
<div id="google_canvas"></div>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script type="text/javascript">
function showMap(userPos) {
if (!!navigator.geolocation) {
var map;
if (userPos == 'true') {
var mapOptions = {
zoom: 12,
enableHighAccuracy: true,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
else {
var mapOptions = {
zoom: 5,
enableHighAccuracy: false,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
map = new google.maps.Map(document.getElementById('google_canvas'), mapOptions);
navigator.geolocation.getCurrentPosition(function (position) {
var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var sectionList = [
['Stockholm', 59.327, 18.067],
['Göteborg', 57.70889, 11.97348]
];
var mapPinUser = '/dist/img/map-pin-user.png';
var mapPinSection = '/dist/img/map-pin-section.png';
// User's position
var marker = new google.maps.Marker({
position: geolocate,
map: map,
icon: mapPinUser,
title: "ok"
});
for (var i = 0; i < sectionList.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(sectionList[i][1], sectionList[i][2]),
map: map,
icon: mapPinSection,
id: i,
animation: google.maps.Animation.DROP,
title: sectionList[i][0]
});
}
if (userPos == 'true') {
map.panTo(geolocate);
}
else {
map.setCenter({ lat: 61.58549, lng: 15.02930 });
}
});
} else {
document.getElementById('google_canvas').innerHTML = 'No Geolocation Support.';
}
}
showMap('false');
</script>
<style>
#google_canvas {
height: 65vh;
}
</style>
</section>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</body>
</html>
getCurrentLocation is only supported over https:// now on Chrome.
There has been a warning in place in the javascript console in Chrome for quite a while, and it was announced a while ago.
reference from your comment
Starting with Chrome 50, Chrome no longer supports obtaining the user’s location using the HTML5 Geolocation API from pages delivered by non-secure connections. This means that the page that’s making the Geolocation API call must be served from a secure context such as HTTPS.
I've looked at similar questions and can't quite figure this out, though I think I'm close.
The goal is to have a form which allows address input, and upon submit button click the address should be added as a marker on the already loaded map.
I've got garbled sample code all over the place, but here is what I've been working with(refactored from a Laravel 4 view):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<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="> // Placeholder API Key
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(29.428459, -98.492433), // Centered on downtown SA by default
zoom: 11
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<br>
<div id="user-input-form" style="width: 500px; height: 200px; margin-left: 20px;">
<input id="user-input" class="form-group form-control" name="user-input" type="text" value="112 E. Pecan St San Antonio TX 78205" placeholder="">
<button id="user-input-btn" class="btn btn-default" action="">Submit</button>
<p id="address-text"></p>
</div>
</div>
<div id="map-canvas" style="width: 500px; height: 400px;"></div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
function addMarker() { // Function to add markers on button click
var marker = new google.maps.Marker({
position: latlng, // set to location which corresponds with user input? Don't want to recenter map each time.
map: map,
draggable:false,
animation: google.maps.Animation.DROP,
title:"Marker #",
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
});
}
$('#user-input-btn').click(function () {
var address = $('#user-input').val(); // Grab value of input field above
console.log(address);
$('#address-text').text('You entered: ' + address);
$('#address').text(address);
// Call addMarker function?
}); // end event from button click
</script>
</body>
</html>
Can anyone help me step through this? I'm trying to do something more complicated, but being able to:
Add markers via address submit through a form/button click.
Reset the map with a reset button to clear all the overlays.
Would be an awesome step forward.
Thank you
Okay thanks to kinakuta I was able to outline the following and implement it:
<script type="text/javascript">
$('#addr-btn').click(function () {
// Set variable address equal to user input
var address = $('#addr-value').val();
// Geocode address to get lat/lng
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function(result, status) {
if (status == google.maps.GeocoderStatus.OK) {
// console.log(result);
var latLngObj = result[0]["geometry"]["location"];
console.log(latLngObj);
}
// Create new marker based on lat/lng
var marker = new google.maps.Marker({
position: latLngObj,
map: map,
title:"Hello World!"
});
// Store marker in array to keep all markers on the page, and allow easy reset
});
});
</script>
Thanks!