Found this Free webiste online that i want to customize but i cant change the default zoom lvl, i dont know javascript. I would like to know what lines of code i need to add in order to change the zoom lvl.
Thanks, :=),
also i dont know if i have to include other code/info here, just tell me if you need more info.
<!-- Footer -->
<footer>
<!-- Container -->
<div class="container">
<div class="row">
</div>
</div><!-- Container end -->
</footer><!-- Footer end -->
<!-- scroll up-->
<div class="scrollup">
<i class="fa fa-chevron-up"></i>
</div><!-- End off scroll up->
<!-- JavaScript -->
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Bootsnav js -->
<script src="js/bootsnav.js"></script>
<!-- JS Implementing Plugins -->
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/gmaps.min.js"></script>
<script type="text/javascript">
var map;
$(document).ready(function () {
map = new GMaps({
el: '#ourmaps',
lat: 15,
lng: 15,
scrollwheel: true
});
//locations request
map.getElevations({
locations: [[15, 15]],
callback: function (result, status) {
if (status == google.maps.ElevationStatus.OK) {
for (var i in result) {
map.addMarker({
lat: result[i].location.lat(),
lng: result[i].location.lng(),
infoWindow: {
content: '<address class="tooltip_address"><b>aaaa</b><br />aaa<br />aaaa<br />aaaa <br /></address>'
}
});
}
}
}
});
});
</script>
<!--main js-->
<script type="text/javascript" src="js/main.js"></script>
Try this:
zoom: 8
From documentation.
see This also
you're using Gmaps.js so you will need to find documentation about this javascript, as the webpage says you need to use setZoom that allows an integer of your desired zoom, also you will need to use setCenter to center the map on your desired marker.
Here's the GMaps.js website: GMaps.js
Here's where you cand find all the parameters that allows:
Documentation
You can also set the zoom when you create your Gmaps, so this is the main code you need to edit in your example:
map = new GMaps({
el: '#ourmaps',
lat: 15,
lng: 15,
scrollwheel: true,
zoom: 15 //Your desired zoom
});
Also I find a note on a blog that if you use more than 1 marker you may be using::
map.setZoom((map.getBoundsZoomLevel(bounds))); //To rezoom the map
map.setCenter(bounds.getCenter()); //To center the map
Reference about using more than one marker
Hope my answer helps you!!
Related
This question already has answers here:
Google Map not shown
(2 answers)
google map not displaying on my webpage
(1 answer)
Closed 1 year ago.
So maybe this mistake is pretty naïve, but I can't load a javascript map from the Google Maps API.
What I'm trying to accomplish is to make a map appear at the right side of the buttons. But...I can't.
Here's my code.
HTML
<!DOCTYPE html>
<html>
<head>
<title>salgamos</title>
<link rel="stylesheet" href="{{ url_for('static', filename= 'css/en_corto.css') }}">
<script> </script>
</head>
<body>
<div class="domainhome">
<p>salgamos.com.mx</p>
</div>
<div class="flex-container">
<div class="left-bar">
<div>
<button class="adondequieresir"><p>¿a dónde quieres ir?</p></button>
</div>
<div>
<button class="agregarubicacion">
<p style="float: left;">¡agrega tu ubicación?</p>
</button>
</div>
<div>
<button class="personasunidas">
<p style="float: left;">(n) personas unidas</p>
</button>
</div>
</div>
<div class="right-bar">
<div id="map">
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
async
></script>
</div>
</div>
</div>
JS
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
I've found similar posts, but for things far more complex, and their answers only confused me. I would kindly appreciate if someone could help me.
The script tag should not be wrapped inside the div#map tag.
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAzw5lUQhZWbnyya36w_UiP-DjcdGj6Sfw&callback=initMap&libraries=&v=weekly" async></script>
I am new using OpenLayers (an open-source JavaScript library for displaying map data in web browsers as slippy maps). I am using it with Thymeleaf (a Java XML/XHTML/HTML5 template engine that can work both in web and non-web environments).
I am trying to reproduce this example, but getting the resources from the server https://openlayers.org/en/latest/examples/reprojection-wgs84.html
I have this page:
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Title</title>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.3.1/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.3.1/css/ol.css">
<style>
.map {
width: 100%;
height:400px;
}
</style>
</head>
<body>
<div id="layout">
<div id="main">
<div class="content">
<div class="pure-g">
<div class="pure-u-1-1 pure-u-xl-10-24 pure-u-med-1">
<!-- Content right Wrap -->
<div class="content_r_wrap">
<!-- Devices Map Module -->
<div class="windowHead">
<h2>LOCATION INFO</h2>
</div>
<div class="windowContentMap">
<div id="map" class="map"></div>
<script th:inline="javascript" th:type="module">
/*<![CDATA[*/
import Map from '/css/Map';
import View from '/css/View';
import TileLayer from '/css/layer/Tile';
import OSM from '/css/source/OSM';
var map = new Map({
layers: [
new TileLayer({
source: new OSM()
})
],
target: 'map',
view: new View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 2
})
});
/*]]>*/
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
and I would like to know how to get those objects also from the server:
import Map from '/css/Map';
import View from '/css/View';
import TileLayer from '/css/layer/Tile';
import OSM from '/css/source/OSM';
Not sure what mean but if "getting from the server" means accessing the imports directly from a compiled source (be it on your server or elsewhere), this is how to do it:
const Map = window.ol.Map;
const View = window.ol.View;
const TileLayer = window.ol.layer.Tile;
const OSM = window.ol.source.OSM;
var map = new Map({
layers: [
new TileLayer({
source: new OSM()
})
],
target: 'map',
view: new View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 2
})
});
<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.3.1/css/ol.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.3.1/build/ol.js"></script>
<style>
.map {
width: 100%;
height: 400px;
}
</style>
<div id="layout">
<div id="main">
<div class="content">
<div class="pure-g">
<div class="pure-u-1-1 pure-u-xl-10-24 pure-u-med-1">
<!-- Content right Wrap -->
<div class="content_r_wrap">
<!-- Devices Map Module -->
<div class="windowHead">
<h2>LOCATION INFO</h2>
</div>
<div class="windowContentMap">
<div id="map" class="map"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
When you are calling
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.3.1/build/ol.js"></script>
you actually get the built file from CDN (I guess, "the server" you talked about).
So, in that file you can access the modules Map, View, TileLayer, OSM etc... All as a result of the import of the script from CDN.
If you want to load these files from your local project, which can be "offline", you can install them using Package Manager (like NPM) or just download the bundled (built) files (css and js), save them in a directory you could access to, and change your source to the directory.
My recommendation (and also OpenLayer's) is using npm and then use it regularly (import ol):
index.js
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: [0, 0],
zoom: 0
})
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using Parcel with OpenLayers</title>
<style>
#map {
width: 400px;
height: 250px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="./index.js"></script>
</body>
</html>
In that case, OpenLayer's files are INSTALLED in your project inside node_modules and you are no longer dependent on external network traffic to the CDN.
That's it :)
You can follow the complete guide here (they explain there how to bundle and run the program):
OpenLayers using NPM
I'm trying to use the Google Maps API to get a single map to show. I'm using Javascript.
It should be a single page with one header and one map below the header. I signed up for the Google Maps API recently, so I'm not sure if it takes a certain amount of time for the API key to be active or not. I've got other CSS files and a googlemaps.js file that doesn't have anything in it yet.
Here's my code. Any ideas why it's not working?
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, intial-scale=1.0;'>
<title>API(s)</title>
<link rel='stylesheet' href='styles/semantic.min.css'>
<link rel='stylesheet' href='styles/main.css'>
</head>
<body>
<div class="ui two column centered stackable grid container">
<div class="column">
<h1 class="goog-header">Location Based Image Search</h1>
</div>
</div>
<div class="ui one column stackable grid container js-images-container">
<div class="column">
<div id="map"></div>
</div>
</div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXTmorapOu1WquB3VlsLrckhE45Bgfrfw&callback=initMap" async defer></script>
<script src='javascript/googlemaps.js'></script>
</body>
</html>
Try to change your map DIV to:
<div id="map" style="width:800px;height:600px"></div>
I am having trouble loading a google map, while using angular routes with a template. As the code currently stands if i navigate to "#/map" the google map does not show up and inspecting the element, the map information is not there but the template loads as the h1 tag 'Map' does load. However, if I take the code from my map template and put it into my index.html it works perfectly fine. Does anyone know why this is and how to fix it?
Here is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ski</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
</head>
<body ng-app="Ski">
<ng-view></ng-view>
<!-- app and routes -->
<script src="js/app.js"></script>
<script src="js/routes.js"></script>
<!-- controllers -->
<script src="js/controllers/map.controller.js"></script>
</body>
</html>
This is my template for map.
<div>
<h1> Map </h1>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxx">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: -34.397, lng: 150.644},
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="width: 50%; height: 50%;"></div>
</div>
My angular module.
angular.module('Ski', ['ngRoute']);
My angular routes.
angular.module('Ski').config(function($routeProvider) {
'use strict';
$routeProvider
.when('/home', {
templateUrl: 'templates/home.html'
})
.when('/map', {
templateUrl: 'templates/map.html'
})
.otherwise({
redirectTo: '/'
});
});
The problem is that when map view is loaded window.load event has already occurred, so this line
google.maps.event.addDomListener(window, 'load', initialize);
won't invoke initialize function, because load event is not going to happen again.
Instead try to move map script into head section:
<head>
<meta charset="utf-8">
<title>Ski</title>
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxx"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
</head>
and then write simple directive to initialize map in map template:
<div>
<h1>Map</h1>
<map-canvas id="map" style="width: 50%; height: 50%;"></map-canvas>
</div>
The mapCanvas directive will look then something like this:
angular.module('Ski').directive('mapCanvas', function() {
return {
restrict: 'E',
link: function(scope, element) {
var mapOptions = {
center: { lat: -34.397, lng: 150.644},
zoom: 8
};
new google.maps.Map(element[0], mapOptions);
}
};
});
Demo: http://plnkr.co/edit/370NBWS3YlTrGBqK7riT?p=preview
I am working with the jQuery mobile google maps example here, focusing on the first "Basic Map Example".
http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html
I want to be able to dynamically add markers to the basic_map, but I am having some trouble. I'm new to jQuery mobile and JavaScript.
Here is my edited version of the basic-map example from the jQuery mobile UI website. If you save it in the jQuery mobile demos folder, then everything should render properly. I have added a button at the bottom of the map page and also the addMarkers function. When you load the page, the map shows up centered at the mobileDemo coordinates (-41, 87), which is close to chicago, but not quite there. When you click on the button, I want to update the map with another marker at the chicago point, but the screen goes blank.
This is just a mock example of what I really want to do. In my longer, more complicated program, I'm querying a database to find addresses that match the query, then I want to put those markers up on the map dynamically. What do I need to change about this source code to be able to plot the Chicago point (or other markers on the fly)?
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link type="text/css" rel="stylesheet" href="css/jquery-mobile-1.0/jquery.mobile.css" />
<link type="text/css" rel="stylesheet" href="css/mobile.css" />
<script type="text/javascript" src="js/modernizr-2.0.6/modernizr.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="js/jquery-1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-mobile-1.0/jquery.mobile.min.js"></script>
<script type="text/javascript" src="js/jquery.ui-1.8.15/jquery.ui.autocomplete.min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.services.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.extensions.js"></script>
<script type="text/javascript">
var mobileDemo = { 'center': '41,-87', 'zoom': 7 };
var chicago = new google.maps.LatLng(41.850033,-87.6500523);
var map
function addMarkers(){
map = new google.maps.Map(document.getElementById('map_canvas'));
var marker = new google.maps.Marker({
map: map,
position: chicago
});
}
$('#basic_map').live('pageinit', function() {
demo.add('basic_map', function() {
$('#map_canvas').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
var self = this;
self.addMarker({'position': this.get('map').getCenter() }).click(function() {
self.openInfoWindow({ 'content': 'Hello World!' }, this);
});
}});
}).load('basic_map');
});
$('#basic_map').live('pageshow', function() {
demo.add('basic_map', function() { $('#map_canvas').gmap('refresh'); }).load('basic_map');
});
</script>
</head>
<body>
<div id="basic_map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
</div>
<div data-role="content">
Add Some More Markers
</div>
</div>
</body>
</html>
Please check the below example.
In the first map load there isn't any marker. When you click the button then a marker is dynamically added without a need for page or map refresh.
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.min.js"></script>
<script type="text/javascript">
var chicago = new google.maps.LatLng(41.850033,-87.6500523),
mobileDemo = { 'center': '41,-87', 'zoom': 7 };
function initialize() {
$('#map_canvas').gmap({ 'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':false });
}
$(document).on("pageinit", "#basic-map", function() {
initialize();
});
$(document).on('click', '.add-markers', function(e) {
e.preventDefault();
$('#map_canvas').gmap('addMarker', { 'position': chicago } );
});
</script>
</head>
<body>
<div id="basic-map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
Add Some More Markers
</div>
</div>
</body>
</html>
The initial map:
The map after the button's click: