Clojurescript: Problems calling Google Maps API - javascript

Trying to replicate Google's "Hello World" for Google Maps. Here is my cljs code:
(ns myapp.core)
(def *map* nil)
(def my-opts
{"zoom" 8
"mapTypeId" google.maps.MapTypeId.ROADMAP
"center" (google.maps.LatLng. -34.397, 150.644)})
(defn map-load []
(let [elem (.getElementById js/document "map-canvas")]
(set! *map* (google.maps.Map. elem my-opts))))
(google.maps.event.addDomListener js/window "load" map-load)
And the HTML:
<!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>
</head>
<body>
<div id="map-canvas" />
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script src="myapp.js" type="text/javascript"></script>
<script type="text/javascript">goog.require("myapp.core");</script>
</body>
</html>
This yields a blank, slightly brownish screen and no errors. But no map displays.
Here is the Google Hello World code, which works fine. I cannot figure out the difference between the two.
<!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>
</head>
<body>
<div id="map-canvas"/>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</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>
</body>
</html>

as you can see in Himera, when you need interoperability you have to perform some translations between js and clj, through js->clj or clj->js functions
;; ClojureScript records aren't exactly
;; compatible with pure JavaScript
;;
;; Enhance JavaScript objects to ClojureScript
;; records for additional capabilities.
;;
;; Then do something on each element.
;;
;; Then convert back to plain JavaScript.
(defn get-names [people]
(let [people (js->clj people)
names (map "name" people)]
(clj->js names)))
Then, you only have to change this line
(set! *map* (google.maps.Map. elem my-opts))
for this other
(set! *map* (google.maps.Map. elem (clj->js my-opts)))
And I've found out an interesting project about cljs and gmaps maybe it helps you

Related

How to make a javascript pop-up send me to a .cshtml page?

I'm kind of new at working with both c# and javascript and i'm not sure how can i open a .cshtml page from a javascript pop-up. So basically i have a map on which i have 2 pins ( for the moment ), which represent parking lots in my city. I want to create a "View details" button in the pop-up which will redirect me to a new page.
Here is mai .cshtml page:
#model ProiectColectiv.Models.User
#{
ViewData["Title"] = "Admin Map";
}
<!DOCTYPE html>
<style>
html, body, #map-container {
height: 100%;
}
#mapid {
height: 94vh;
}
.header {
left: 80px;
position: absolute;
top: 9vh;
z-index: 401;
}
</style>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Map</title>
<link rel="stylesheet" href="~/css/map.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin="" />
</head>
<body>
<h1 class="header">
Hello, #Model.Name!
</h1>
<div id="mapid"></div>
</body>
</html>
<script src="https://unpkg.com/leaflet#1.4.0/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>
<script>
var mymap = L.map('mapid').setView([46.776, 23.594], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
{
maxZoom: 18,
minZoom: 12,
attribution: '© OpenStreetMap contributors'
}).addTo(mymap);
var marker = L.marker([46.770, 23.592]).addTo(mymap);
marker.bindPopup("Parcarea Adminului. View Details");
L.marker([46.7825, 23.6880]).addTo(mymap).bindPopup("Parcarea lu varu!");
</script>
My question is, how can i make this connection?
And also, if anyone has any idea if there is any Google Maps API for parking lots in different cities, please let me know.

Markers issue when uploading KML file my website using API key

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>

Why my Google Maps API is not accepting API Key?

I'm implementing a map but I'm getting an error response and don't understand why it is not working.
Here is my attempt.
var map;
function loadMap(){
// Variable Definitions
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(37.9835464,23.7269264)
}
var mapid = document.getElementById('map');
// Function call
map = new google.maps.Map(mapid,mapOptions)
}
google.maps.event.addDomListener(window,'load',loadMap())
html, body, #map {
height: 100%;
margin: 0px;
padding: 0px;
}
#map {
width: 500px;
height: 400px;
}
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<link rel="stylesheet" media="screen" href="style.css">
</head>
<body>
<div id="map"></div>
<script src="https://maps.google.com/maps/api/js?v=3?key=API_KEY"></script>
<!-- Script tag -->
<script src="script.js" type="text/javascript"></script>
</body>
In order to find a solution, I checked the console which gives me the error:
"Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error"
So I checked the documentation, but my API key seems to be right.
Any suggestion?
Thanks in advance.
You have a typo in your script include:
https://maps.google.com/maps/api/js?v=3?key=KEY
Should be:
https://maps.google.com/maps/api/js?v=3&key=KEY
(Start with question mark, then separate parameters with &)

put data from jquery to google map javascript code

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>

Google maps API not loading properly

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

Categories