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
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.
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>
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 &)
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