I'm having trouble figuring out how to use the gmaps plugin. I've followed the example given and even looked at the page source and copied it, yet I still have no progress.
This is my chunk of html with js files included.
<!DOCTYPE html>
<html>
<head>
<title>testss</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/javascripts/maps.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link href='//fonts.googleapis.com/css?family=Convergence|Bitter|Droid+Sans|Ubuntu+Mono' rel='stylesheet' type='text/css' />
<script>
$(document).ready(function(){
var map = new GMaps({
div: '#map', lat: -12, lng: -77
});
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I'm getting these errors:
Uncaught Google Maps API is required. Please register the following JavaScript library
http://maps.google.com/maps/api/js?sensor=true. maps.js:22
Uncaught ReferenceError: GMaps is not defined
Not sure why this issue is appearing since I've included the file. Any ideas are much appreciated!
If this helps, I'm using node.js and express on localhost.
That's a dependency error. Include http://maps.google.com/maps/api/js before your call to /javascript/gmaps.js
The error is in the registration url of google maps api. Please use https instead of http.
Include this url:
https://maps.google.com/maps/api/js?sensor=true
I'm not sure, who was using the wrong documentation your or I, but this seems to be working quite fine:
<!DOCTYPE html>
<html>
<head>
<title>testss</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/javascripts/maps.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link href='//fonts.googleapis.com/css?family=Convergence|Bitter|Droid+Sans|Ubuntu+Mono' rel='stylesheet' type='text/css' />
<script>
$(document).ready(function(){
var map = new google.maps.Map(
document.getElementById('map'),
{
zoom: 15,
center: new google.maps.LatLng(-12, -77)
}
);
});
</script>
</head>
<body>
<div id="map" style="height: 20em;"></div>
</body>
</html>
edit: I just realized you were trying to use gmaps.js - but in that case you're missing the gmaps.js file unless that is what your maps.js was for.
You can download the current version at: https://raw.githubusercontent.com/HPNeo/gmaps/master/gmaps.js
Related
I have a heck of a time getting plugins to load in leaflet. Not sure what I'm doing wrong. The files are on my local machine and are included in the html file but I still receive these two errors.
Loading failed for the with source
“.../Plugins/cluster/leaflet.markercluster-src.js”.
TypeError: L.markerClusterGroup is not a function index.js:15:17
Im assuming the type error is from the plugin not loading...
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Template</title>
<meta charset="utf-8" />
<!--LOADS leaflet.js FROM CDN-->
<script
src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin="">
</script>
<!--LOADS leaflet.css FROM CDN-->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!--LOADS style_blank.css FOR LEAFLET-->
<link href="style_blank.css" type="text/css" rel="stylesheet">
<!--LOADS jquery-3.4.1.js FROM CDN-->
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
<!--LOADS markercluster css-->
<link href="Plugins/cluster/MarkerCluster.css" type="text/css" rel="stylesheet">
<link href="Plugins/cluster/MarkerCluster.Default.css" type="text/css" rel="stylesheet">
<!--LOADS markercluster plugin-->
<script src="Plugins/cluster/leaflet.markercluster-src.js"></script>
</head>
<body>
<div id="map"></div>
<!--CONTAINS GEOJSON DATA-->
<script src="Data/activeShops.js"></script>
<!--LOADS LEAFLET MAP DATA/CUSTIMIZATION-->
<script src="index.js"></script>
</body>
</html>
Javascript:
// starting location
var map = L.map('map',{
center: [41.05, -77.5],
zoom: 8,
minZoom: 2,
maxZoom: 18,
});
// tile layer
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: ""
}).addTo(map);
// markercluster plugin
var markers = L.markerClusterGroup();
var activeShops = L.geoJSON(activeShops);
markers.addLayer(activeShops);
map.addLayer(markers);
Are there any problems with my HTML or Javascript file that would prevent this plugin from loading? I have both .css files and javascript src file indluded in HTML as per the directions on github. Thank you.
I have the same problem..
the reason is that you load the leafletjs files from the leatflet repo, and this sends Content-Type: text/html for this files.
And this server sends a X-Content-Type-Options: nosniff header too.
The result is that your browser discovers that you try to load JavaScript and Css, but the content-type of the files behind the Url is not matching what makes your browser blocking this files from loading.
#see Mozilla developer docs - X-Content-Type-Options
The problem is, you must be on the server side of the loaded files to change the output headers.
The only "hack" to handle this behavoir I found in the question css-file-blocked-mime-type-mismatch-x-content-type-options-nosniff
But removing the rel attribute is a very dirty trick and there is no garanty that this will work in the future.
The only "clean" solution would be to download leaflet.js and leaflet.css and host them on your own webspace.
Plugins/cluster/leaflet.markercluster-src.js
Is this file exist in your project?
I have this page that uses Google Maps Javascript API (extPage.php):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var cord = new google.maps.LatLng(28.545078,-81.377196);
var mapOptions = {
zoom: 15,
center: cord,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
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"style="width:600px; height:500px"></div>
</body>
</html>
That page loads fine as is but I am trying to load into a div on another page. I am doing it like this (test.php):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#LoadBut").click(function() {
$("#extDiv").load('extPage.php');
});
});
</script>
</head>
<body>
<input type="button" id="LoadBut" value="Load">
<div id="extDiv"></div>
</body>
</html>
When I run it just like this I get an error ReferenceError: google is not defined. I've tried moving the <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> to the test.php page. The error message goes away but the map does not load.
I've never been to sure about the best way to handle Javascript on a page inside of a div like this.
Any help with this would be great.
Thanks!
From what I understand of your requirements, you can use the
Google Static Maps API, whcih does not require any JavaScript.
You just place an img tag with a reference to a static map url into your page with the appropriate parameters. For your example:
<div id="extDiv">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=28.545078,-81.377196&zoom=15&size=600x500&maptype=roadmap&sensor=false" />
</div>
See the note at the top of the documentation to see if the inclusion of API keys are applicable to your project.
I've been trying to use this really cool JVector Interactive map plugin with my Rails 3 app but I must be doing something wrong because the map is not rendering. I haven't used JQuery much with Rails so am kind of new at this. I created a controller called Maps and a view called Intro.html.erb, which included my html from this tutorial: http://developer.practicalecommerce.com/articles/2988-Create-an-Interactive-Map-with-jVectorMap
I also split up my .js functions by putting them in application.js. Since that didn't work I found some other code that I tried to put in my Intro.html.erb file:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="public/javascripts/jquery.vector-map.css" type="text/css" media="screen" />
<script src="public/javascripts/jquery.min.js"></script>
<script src="public/javascripts/jquery.vector-map.js"></script>
<script src="public/javascripts/world-en.js"></script>
<script>
$(function(){
$('#map').vectorMap();
});
</script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
</body>
</html>
It's still not rendering. I'm trying to run this in my development environment and am pointing locally to the files. For example: public/javascripts/world-en.js"
Any help would be greatly appreciated.
You want to use "world map" but in your finction you are defining the"#map". Here is the correct code you may try:
<!DOCTYPE html>
<html>
<head>
<title>jVectorMap demo</title>
<link rel="stylesheet" href="scripts/jquery-jvectormap-1.2.2.css" type="text/css" media="screen"/>
<script src="scripts/jquery-1.8.2.js"></script>
<script src="scripts/jquery-jvectormap-1.2.2.min.js"></script>
<script src="scripts/jquery-jvectormap-world-mill-en.js"></script>
</head>
<body>
<div id="world-map" style="width: 600px; height: 400px"></div>
<script>
$(function(){
$('#world-map').vectorMap();
});
</script>
</body>
</html>
Here is the folder with docs you need. Download and unzip the following folder to you htdocs on your local host
Same problem, fixed by specifing the imported map into the js initialization
$('#world-map').vectorMap(
{
map: 'world-en',
}
I am running Mac OSX Lion and Xcode 4.1.1. I created a new Phonegap project and in the index.html, I added the following code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js">
</script>
<!-- Tried setting sensor=true, didn't work too -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" charset="utf-8" >
function display(position){
var initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var myOptions = {
zoom: 12,
center: initialLocation,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function error()
{
alert('Not working');
}
function init()
{
navigator.geolocation.getCurrentPosition(display,error);
}
</script>
</head>
<body onload="init()">
<div id="map_canvas"></div>
</body>
</html>
The code however, refuses to work. I even enabled the key "EnableLocation" in my Phonegap.plist. I don't get any sort of warning saying "Testapp would like to know your location, Allow?". All I get is this error on the console
navigator.geolocation.setError({ 'code': 1, 'message': 'Location Services Not Enabled' });
Can someone please help me out?
I wish I knew what to tell you, but I hope this helps. I think your code is fine. I just ran it on the iOS 4.3 simulator from Dreamweaver on Snow Leopard and it worked fine. However, I had to make some adjustments because the DIV was completely collapsed. The map was in there, but it was not showing.
Just to prove it to yourself, try adding this to your map_canvas div
style="height: 400px"
When I did that, I could see the map fine.
I am not CSS expert, so I do not know how to make the stupid div expand to the size of the map. Maybe you'll have to do it with CSS. Height 100% didn't work. Sometimes CSS really blows.
Hope someone can help me out. I found this nice jQuery plugin to display vector maps in our intranet but I'm not able to create the HTML code to make it work.
http://jvectormap.owl-hollow.net/
I would appreciate your assistance or guidance.
Thank you,
Tony
Probably you forgot to set size of container inside of which you want to place the map. This should work:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="jquery.vector-map.css" type="text/css" media="screen" />
<script src="jquery-1.6.min.js"></script>
<script src="jquery.vector-map.js"></script>
<script src="world-en.js"></script>
<script>
$(function(){
$('#map').vectorMap();
});
</script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
</body>
</html>
I will add width and height parameters in the next version
You must set your map. which name is on top of map.js. Probably you forgot
$('#map').vectorMap({map: 'europe_en'});