I would like to modify my google map in the following way:
so I would like to have 2 (or more) couples of buttons (with custom icon) on the bottom left of the map BUT on the top of the standard buttons of google that is streetview and zoom..
Do you think is possible?
So far i was only able to move my custom buttom on the BOTTOM_LEFT, BOTTOM_RIGHT, BOTTOM and so on..
Also as you can see I would like to have a VERTICAL Drawing Manager and not a horizontal one.
This is what I did: example
In particular when I do this
map.controls[google.maps.ControlPosition.BOTTOM].push(customControlDiv);
i would like to add instead some coordinate or pixel positions..
You can't define coordinates or pixel positions, but you may control the position via CSS.
e.g. for controls placed at the BOTTOM use margin-bottom to move them upwards from the position that has been set by the API
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 0,
lng: 0
},
noClear: true,
disableDefaultUI:true
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('ctrl1'));
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('ctrl2'));
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
#ctrls {
display: none;
}
#ctrl1 {
margin: 10px;
margin-bottom: 20px;
background: red;
}
#ctrl1::before {
content: '#ctrl1';
display: block;
}
#ctrl2 {
margin: 10px;
margin-bottom: 5px;
background: yellow;
}
#ctrl2::before {
content: '#ctrl2';
display: block;
}
.ctrl {
border: 1px solid #818181;
border-radius: 5px;
}
.ctrl strong{
border: 1px solid #818181;
border-radius: 3px;
background:#fff;
display:block;
}
<div id="map">
<div id="ctrls">
<div id="ctrl1" class="ctrl">
<strong>Button 1-1</strong>
<strong>Button 1-2</strong>
</div>
<div id="ctrl2" class="ctrl">
<strong>Button 2-1</strong>
<strong>Button 2-2</strong>
</div>
</div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
Related
I created a grid of items using this library and it works flawlessly. In my items, i have a very simple bootstrap grid with some forms, inputs and other content, the problem is that a lot of times while using the content inside of the bootstrap grid, i move the entire item.
I was wondering if there is a way to disable dragging only inside of the so that when i use what's inside of the container, the item is not moved, but if i want to move the item i can drag it by grabbing it outside the container.
Here is my code:
<template>
<grid-layout :layout.sync="layout"
:col-num="1"
:row-height="30"
:is-draggable="draggable"
:is-resizable="resizable"
:vertical-compact="true"
:use-css-transforms="true"
>
<grid-item v-for="item in layout"
:static="item.static"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
>
<div class="container">
<div class="row">
<div class="col-sm-7">Here is some content...</div>
<div class="col-sm-5">Here is some other content.. </div>
</div>
</div>
</grid-item>
</grid-layout>
</template>
<script>
import { GridLayout, GridItem } from "vue-grid-layout"
export default {
components: {
GridLayout,
GridItem
},
data() {
return {
layout: [
{"x":0,"y":0,"w":6,"h":4,"i":"0", static: false},
],
draggable: true,
resizable: true,
index: 0
}
},
methods: {
itemTitle(item) {
let result = item.i;
if (item.static) {
result += " - Static";
}
return result;
}
}
}
</script>
<style scoped>
.vue-grid-layout {
background: #eee;
}
.vue-grid-item:not(.vue-grid-placeholder) {
background: #ccc;
border: 1px solid black;
}
.vue-grid-item .resizing {
opacity: 0.9;
}
.vue-grid-item .static {
background: #cce;
}
.vue-grid-item .text {
font-size: 24px;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 100%;
width: 100%;
}
.vue-grid-item .no-drag {
height: 100%;
width: 100%;
}
.vue-grid-item .minMax {
font-size: 12px;
}
.vue-grid-item .add {
cursor: pointer;
}
.vue-draggable-handle {
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
background-position: bottom right;
padding: 0 8px 8px 0;
background-repeat: no-repeat;
background-origin: content-box;
box-sizing: border-box;
cursor: pointer;
}
</style>
So basically i should not be able to drag or move the item from inside the container. Any kind of advice is appreciated. Thanks in advance!
Since you asked you probably already solved your problem, but the easy way to avoid moving the entire item is to declare an attribute of grid-item where dragging is not allowed.
<grid-item class=""
drag-allow-from=".vue-draggable-handle"
drag-ignore-from=".no-drag"
:autoSize="true" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i">
<div class="vue-draggable-handle"></div>
<div class="no-drag"></div>
</grid-item>
Thoses two attributes are in fact css class reference.
.vue-grid-item .no-drag {height: 100%;width: 100%;}
.vue-draggable-handle { position: initial; width: 5px;height: 5px;top: 0;right: 0;padding: 0 8px 8px 0;background-origin: content-box;box-sizing: border-box;border-radius: 10px;cursor: pointer;color: #005B60 !important;}
You can either set static to true which would not allow you to drag/resize the grid or add an element draggable in your layout and set it to false where you will be able to only resize the grid.
layout: [
{"x":0,"y":0,"w":6,"h":4,"i":"0", static: true},
] // If you want to lock the grid (no resize/no dragging)
or
layout: [
{"x":0,"y":0,"w":6,"h":4,"i":"0", draggable: false},
] // you will be able to resize but drag
<grid-item
:key="item.i"
v-for="item in layout"
:is-draggable="item.draggable"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
>
Specifically, I'm trying to make a drop down menu filled with links that will direct to the specified locations in google maps when clicked. I managed to get google maps embedded into my page, but for some reason I cannot seem to get the drop down to occur and cannot find the problem in my code. I also am struggling to understand how to actually create the links in the dropdown menu to direct to the selected location on the google map. Any help would be appreciated. The code I have so far...
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show')
}
}
}
}
function initMap() {
var Columbia = {
lat: 34.006140,
lng: -81.037532
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: Columbia
});
var marker = new google.maps.Marker({
position: Columbia,
map: map
});
}
.dropbtn {
background-color: #4caf50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #f1f1f1
}
#map {
height: 400px;
width: 100%;
}
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5cD8oVYji2MWCAj8JzrAzQtpBy12W30o&callback=initMap">
</script>
<h3>Google Maps/Form Assignment</h3>
<div id="map"></div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Select a location</button>
<div id="myDropdown" class="dropdown-content">
London, England
Tokyo, Japan
New York City, USA
</div>
</div>
I see you have added 2 different functions for the same process, you only need 1 so i will show the code with the fixes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.dropbtn {
background-color: #4caf50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus{
background-color: #3e8e41;
}
.dropdown{
position: relative;
display: inline-block;
}
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/*Add this rule so the dropdown can be shown*/
.dropdown-content.show{
display: block;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #f1f1f1
}
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>Google Maps/Form Assignment</h3>
<div id="map"></div>
<div class="dropdown">
<button class="dropbtn">Select a location</button>
<div id="myDropdown" class="dropdown-content">
London, England
Tokyo, Japan
New York City, USA
</div>
</div>
<script>
window.onclick = function(event){
var target = event.target;
if(target.matches('.dropbtn')){
var dropdowns = document.getElementsByClassName("dropdown-content"); //This returns a HTMLCollection
for(i=0; i < dropdowns.length; i++){
// Since dropdowns is a HTMLCollection, extract the node from the collection
var dropdown = dropdowns.item(i);
// Toggle the dropdown whenever the button is clicked
dropdown.classList.toggle("show");
}
}
if(target.matches(".dropdown-content > a")){
// Get the location name from the hash
var location = target.hash.slice(1);
// Extract the location map and set it as center
map.setCenter(positions[location]);
}
};
</script>
<script>
function initMap() {
// Set all locations map
window.positions = {
london: {
lat: 51.5013616,
lng: -0.1965444
},
southCarolina: {
lat: 34.006140,
lng: -81.037532
}
};
window.map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: positions.southCarolina
});
// Add marker positions in the map
var markers = {
london: new google.maps.Marker({
position: positions.london,
map: map
}),
southCarolina: new google.maps.Marker({
position: positions.southCarolina,
map: map
})
};
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5cD8oVYji2MWCAj8JzrAzQtpBy12W30o&callback=initMap">
</script>
</body>
</html>
i have added in the comments what should have been done as difference from your code.
You need to know that document.getElementsByClassName returns a HTMLCollection object which only has length as property and 2 methods which are item and namedItem, you can see the docs for HTMLCollection and docs for getElementsByClassName
EDIT: I have also added a section code for handling the map position view when a dropdown item is clicked, note i just added an example for london so you could continue doing the rest for other locations
Using ArcGis Javascript 3.17 API from this example, I'm trying to set up a "hideable" web map from the bottom, but it is behaving far from expected, it won't load properly and keeps expanding non stop
Jsfiddle : https://jsfiddle.net/ppgab/83jdovv6/7
Libs :
https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js
https://js.arcgis.com/3.17
Html :
<div>
<h1 class="big-text">
Test Application
</h1>
</div>
<div id="map" class="down">
<i><img id="up_button" src="https://upload.wikimedia.org/wikipedia/commons/0/01/Arrow-up-navmenu.png"></i>
</div>
Javascript :
var map;
require(["esri/map", "dojo/domReady!"], function(Map) {
map = new Map("map", {
basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
});
$('#row').click(function() {
if ($("#row").hasClass("down")) {
$("#row").removeClass("down");
$("#row").animate({
height: "50%"
}, 600);
} else {
$("#row").animate({
height: 28
}, 350);
$("#row").addClass("down");
}
});
CSS :
body {
margin: 0;
background: url(https://pcbx.us/beoh.jpg);
background-attachment: fixed;
background-size: cover;
}
.big-text {
text-align: center;
color: #2C2C2C;
font-family: pt sans narrow;
font-weight: 100;
font-size: 4em;
}
h2 {
font-family: pt sans narrow;
text-transform: uppercase;
text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.85);
}
#container {
background: #303030;
text-align: center;
color: #FFF;
font-size: 2em;
height: 50%;
width: 100%;
bottom: 0;
}
.hidden {
display: none;
}
#map {
background: #303030;
width: 100%;
text-align: center;
height: 28;
bottom: 0;
position: fixed;
}
It's worth nothing that I'm a begginer web developer, most of this code I found online
Or alternatively, if someone could recommend a JQuery sliding sidebar plugin that would work in this situation
Well, I figured out few things in your jsfiddle...
Esri CSS was not added because of that map was not loading properly
Id and classes were not used properly.
Below is the proper working solution:
JSFiddle: https://jsfiddle.net/vikash2402/83jdovv6/11/
Hoping this will help you :)
I'm using a jQuery plugin called bPopup , which receives a jQuery object and creates a popup element.
it is constructed using an options element that looks like this:
{
modalClose: false,
modalColor: "#ffffff",
follow: [false, false] // Follow x, follow y
}
I want to change the "follow" property within the popup dynamically, without re-creating the popup or cloning it, but actually changing the existing popup.
in other words: I want the popup to follow when scrolling, and be able to pause that following when desired.
A fiddle displaying the problem:
https://jsfiddle.net/syoels/9tqcaq7m/11/
Thanks a lot in advance!
Ok. It was much simpler than I thought...
just find the popped up div, address it's 'bPopup' data attribute and change the follow property.
Working fiddle with the solution: https://jsfiddle.net/syoels/ydu5s9zu/
$(document).ready(function() {
$('#popupBtn').click(function() {
var popup_div = $('<div id="popup"><p>Holy guacamole! what a gorgeous popup!<br><br>scroll down and see if it follows you</p> <button id="stopFollowingBtn">Toggle follow</button></div>');
popup_div.bPopup({
follow: [true, true], //x, y
opacity: 0.6,
modalColor: 'greenYellow',
});
$('#stopFollowingBtn').click(function() {
var follow_x = $('#popup').data('bPopup').follow[0];
var follow_y = $('#popup').data('bPopup').follow[1];
$('#popup').data('bPopup').follow = [!follow_x, !follow_y];
});
});
});
body {
background: black;
height: 1000px;
}
#popup {
display: none;
position: absolute;
width: 140px;
height: 200px;
background: #ccc;
text-align: center;
border: 2px solid white;
border-radius: 3px;
box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
}
#popupBtn {
display: block;
margin: 10px auto;
}
#stopFollowingBtn {
background: red;
color: white;
font-weight: bold;
cursor: pointer;
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bPopup/0.11.0/jquery.bpopup.js"></script>
<body>
<button id="popupBtn">show popup</button>
</body>
Google Maps doesn't show in a nav-tab.
It doesn't show the place, but when I click on the map; it's correct in google.
the problem
HTML:
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade" id="locatie"><?php if ($object->hasLocation): ?>
<div>
<h2>Kaart</h2>
<div id="google-map"></div>
<h2>Street View</h2>
<div id="google-streetview"></div>
</div>
<?php endif; ?></div>
</div>
JS
(function($, exports) {
'use strict';
var GoogleMap = exports.GoogleMap = function(options) {
this.map = null;
this.markers = [];
this.bounds = null;
this.info = null;
this.options = $.extend({
container: '#google-map',
mapContainer: null,
map: {}
}, options || {});
this.$container = null;
};
CSS
.single-post-tst {
.entry-content {
width: 100%;
margin: 2% 0 10%;
display: inline-block;
p {
font-size: 16px;
}
}
.container-content-single {
ul, ol {
margin: 0 0 1.5em 0;
}
.nav-tabs {
border: 1px solid #ddd;
li {
margin-bottom: 0;
border-right: 1px solid #ddd;
}
li:last-child {
border-right: none;
}
li a {
border-radius: 0;
line-height: 2em;
margin-right: 0;
}
li a:hover {
background-color: #F29902;
color: #fff;
}
li.active > a {
padding-bottom: 12px;
}
a.nav-link.active {
background-color: #F29902;
color: #fff;
}
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
border: none;
background-color: #F29902;
color: #fff;
}
}
}
#google-map,
#google-streetview {width:100%; height:500px;}
I think the problem is with this line in JS:
container: '#google-map',
When I put the map out off the tab, it works correct.
But I can't find any solution to show the map correct in the tab.
It shows now but not full width, I add this to CSS:
.tab-content.tab-pane,
.tab-pane {
/* display: none; */
display: block;
visibility: hidden;
position: absolute;
}
.tab-content.active,
.tab-content .tab-pane.active,
.tab-pane.active {
/* display: block; */
visibility: visible;
position: static;
}
It look like this now
When I say width: 100%; it doesn't make full width
If the map is on a secondary tab it wont get the proper sizing, if you can place him on the active tab the problem will be solved.
If you want to maintain the map on an hidden tab, please check how to force the refresh / resize of the map when it becomes visible.
How do I resize a Google Map with JavaScript after it has loaded?
Sample code:
google.maps.event.trigger(map, "resize");
EDIT, another option:
You can also set a fixed size for the map, you can check the code sample here ;)
how to deal with google map inside of a hidden div (Updated picture)
I found a solution:
.tab-content > .tab-pane {
display: block;
height:0;
overflow:hidden;
}
.tab-content > .active {
display: block;
height:auto;
}