I'm trying to follow this Google Maps example, but instead of hardcoding my API KEY, I'm trying to fetch it from an API I created.
So, I created this HTML file. The KEY is properly fetched, but when I'm trying to set the script's src attribute on runtime (so I can add my own key to the URI), it's not getting added at all.
This is my HTML
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers example</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer>
$.get( "maps_api_key", function( data ) {
const API_KEY = String(data)
console.log("API_KEY: " + API_KEY)
var uri = "https://maps.googleapis.com/maps/api/js?key=" + API_KEY + "&callback=initMap"
console.log("URI is: " + uri)
$("#maps_fetcher").attr("src", uri)
});
</script>
<script id="maps_fetcher" async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
console.log("Map fetcher")
</script>
</body>
</html>
The line at console.log("Map fetcher") is never being printed either.
For what it's worth, I'm serving the HTML through Node and Express.
Any ideas on what could be happening here?
Thanks in advance
Related
I have a tiny application with three files in the same dir:
main.js
python_script.py
index.html
In main.js:
var platform = new H.service.Platform({
'apikey': {my API key}
});
var defaultLayers = platform.createDefaultLayers();
var map = new H.Map(
document.getElementById('mapContainer'),
defaultLayers.vector.normal.map,
{
zoom: 10,
center: { lng: 17.0, lat: 51.0 }
});
window.addEventListener('resize', () => map.getViewPort().resize());
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
ui.getControl('zoom').setDisabled(false)
function addWroclove() {
var markerWroclaw = new H.map.Marker({ lat: 51.0, lng: 17.0 }, { icon: icon });
map.addObject(markerWroclaw);
}
addWroclove();
In python_script.py:
import requests
URL_wro = "https://places.ls.hereapi.com/places/v1/browse?at=17.0%2C51.0&q=Wroclaw&apiKey=MY_API_KEY"
wro = requests.get(URL_wro)
print(wro.text)
index.html:
<!DOCTYPE html>
<html lang="pl">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
<meta name="description" content=""/>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<script type="text/javascript" >window.ENV_VARIABLE = 'https://developer.here.com'</script>
<script src='https://developer.here.com/javascript/src/iframeheight.js'></script>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css"/>
</head>
<body>
<div class="map" id="mapContainer"></div>
</body>
</html>
My question is:
when I am trying to send GET query (in python_script.py) I am receiving data but from HERE server and not from map which is on my own remote server.
I mean - I want to have a GET's response from map in which i have declared my own marker (markerWroclaw).
How to make it works in a proper way?
The browse endpoint will give you places from the HERE server. If you want to call locations that you add on the go, you will need to use the Custom Location API. While you add the location as a marker, you will also have to add it to your custom layer. From there you will be able to call and parse the layer of your custom locations.
As an example, below is the layer of custom POIs that I have uploaded to my map layer.
NAME WKT
POINT1 POINT(13.402449957770752 52.505308544760155)
POINT2 POINT(13.408663845393365 52.499911895880146)
This can be uploaded using the call below
curl --request -i -X POST
-H "Content-Type: multipart/form-data"
-F "zipfile=#my_folder/my_layer_content.zip"
"https://fleet.ls.hereapi.com/2/layers/upload.json
?layer_id=POIS
&apiKey={YOUR_API_KEY}"
or this web tool.
Once uploaded, you can use this call to retrieve the points in the layer:
https://fleet.ls.hereapi.com/2/search/all.json?apikey={SameAPIKeyUsedToUpload}&layer_id=POIS
You can also perform a bunch of search functions with this layer.
var map;
var service;
var index = 0;
var posArray = [];
$(document).ready(function(){
navigator.geolocation.getCurrentPosition(init);
});
function init(location) {
enable();
googleMap();
var currentLocation = {lat: location.coords.latitude, lng: location.coords.longitude};
var mapOptions = {
center: currentLocation,
zoom: 10,
mapTypeId: google.maps.MapTypeId.READMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
service = new google.maps.places.PlacesService(map);
google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch);
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Title</title>
<link rel="stylesheet" th:href="#{/style.css}"/>
<link rel="stylesheet" th:href="#{/bootstrap.css}"/>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={MY_KEY}&libraries=places"></script>
<script type="text/javascript" th:src="#{/jquery.js}"></script>
<script type="text/javascript" th:src="#{/client.js}"></script>
</head>
I am currently have trouble loading my libraries=places into my google maps api. The api will let me either use the key OR libraries=places but not both. The error shows:
"Exception parsing document: template="index", line 10 - column 134"
line 10 is
script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={MY_KEY}&libraries=places"
column 134 is the "=" between libraries and places.
Any suggestions would be welcome.
Can you try blow is updated;
<script type="text/javascript" th:src="#{https://maps.googleapis.com/maps/api/js(key='MY_KEY',libraries=places)}"></script>
I was able to get it to work with the following code:
<script type="text/javascript" th:src="#{https://maps.googleapis.com/maps/api/js(libraries=places, key=MY_KEY)}"></script>
I´m trying to put a google maps image into my HTML page. I cannot touch the <head> section as the page is dynamically loaded using PHP code (this logic is not explained here).
So, I´ve build the following HTML test code, that doesn´t work - the maps does not appear on screen.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8" />
<title>TEST PAGE</title>
</head>
<body>
<h1>Maps test page.</h1>
<script type="text/javascript">
function initialize() {
alert("Initialize");
var mapCanvas = document.getElementById("mapCanvas");
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
}
var map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addDomListener(window, "load", initialize);
}
window.onload = function() {
alert("Onload");
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js";
document.body.appendChild(script);
}
</script>
<div id="mapCanvas" style="width: 650px; height: 350px;"></div>";
<script type="text/javascript"> initialize() </script>
</body>
</html>
The alerts are coming up, but no map is shown...
Help is appreciated to make is work.
Asynchronously load the Google Maps Javascript API, use the callback parameter to run your initialize function.
working example
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8" />
<title>TEST PAGE</title>
</head>
<body>
<h1>Maps test page.</h1>
<script type="text/javascript">
function initialize() {
alert("Initialize");
var mapCanvas = document.getElementById("mapCanvas");
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
}
var map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addDomListener(window, "load", initialize);
}
window.onload = function() {
alert("Onload");
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}
</script>
<div id="mapCanvas" style="width: 650px; height: 350px;"></div>";
</body>
</html>
The problem is that initialize() is getting executed before the Google Maps Javascript has been added to the page. You aren't importing the Google Maps JS until the DOM has finished loading, in your window.onload callback. Try this instead:
<div id="mapCanvas" style="width: 650px; height: 350px;"></div>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
alert("Initialize");
var mapCanvas = document.getElementById("mapCanvas");
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
window.onload = function() {
initialize();
};
</script>
Can anyone solve this code?
i have some javascript code geolocation and here map script, i want to put geolocation coordinate in here map script..
here bellow my code..
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="http://js.api.here.com/v3/3.0.12.2/mapsjs-ui.css" />
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-pano.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button onclick="getLocation()">My Location</button><br/>
<input type="text" id="latpos" name="latpos">
<input type="text" id="longpos" name="longpos">
<div id="map" style="width: 100%; height: 400px; background: grey" />
<script type="text/javascript" charset="UTF-8" >
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
var origlat= position.coords.latitude ;
var origlong= position.coords.longitude ;
var lat=document.getElementById("latpos");
lat.value=origlat;
var lon=document.getElementById("longpos");
lon.value=origlong;
}
function addMarkerAndSetViewBounds(map) {
var latitu="-6.811408423530006";
var longitu= "110.85068956017494";
var origl= origlat;
var origlo= origlong;
var Isone = new H.map.Marker({lat:latitu, lng:longitu}),
geol = new H.map.Marker({lat:origl, lng:origlo}),
group = new H.map.Group();
group.addObjects([Isone , geol]);
map.addObject(group);
// get geo bounding box for the group and set it to the map
map.setViewBounds(group.getBounds());
}
/Step 1: initialize communication with the platform
var platform = new H.service.Platform({
app_id: 'DemoAppId01082013GAL',
app_code: 'AJKnXv84fjrb0KIHawS0Tg',
useCIT: false,
});
var defaultLayers = platform.createDefaultLayers();
//Step 2: initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map,{
center: {lat:50, lng:5},
zoom: 15
});
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Now use the map as required...
addMarkerAndSetViewBounds(map);
</script>
</body>
</html>
but, that code didn't work fine..
how to get value var origlat and var origlong in variable var origl and var origlo?
can anyone help me to fix this code run correctly
You should make origlat, origlong global variables, instead of local variable.
http://www.w3schools.com/js/js_scope.asp
I've tried all possible solutions but the map just isn't showing. My webview just shows blank.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="theme.css">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript">
var map; " +
function initialize() {
var latitude = 0;
var longitude = 0;
if (window.android){
latitude = window.android.getLatitude();
longitude = window.android.getLongitude();
}
var myOptions = {
zoom: 20,
center: myLatLng
}
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
function centerAt(latitude, longitude){
myLatlng = new google.maps.LatLng(latitude,longitude);
map.panTo(myLatLng);
}
</script>
<title>Insert title here</title>
</head>
<body>
<div id="map_canvas" style="height: 100px; width=100px;">This is the map canvas</div>
<script type="text/javascript">initialize();</script>
</body>
</html>
I've narrowed down to this line: map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
When this line is executed, it fails.
Any help is appreciated.
Thanks.
Regards,
Dexter
I can't see myLatLng definition other than in centerAt() function. You need to pass Google Maps LatLng object to the center attribute of myOptions:
var myLatlng = new google.maps.LatLng(latitude, longitude);
var myOptions = {
zoom: 20,
center: myLatLng
}
...
And there is also a strange thing which I can't understand:
var map; " +
^ ^
my bad, submitted the wrong code. Anyway, the major issue here is the connection. That took me a long time to realize it since i was just focusing on the codes.
Thanks.