Ruby on Rails - Gmap4Rails popup for a bigger map - javascript

I'm a rails beginner and am using rails 3.2.3.
In my app I'm using the awesome Google-Maps-for-Rails by apneadiving (it's just awesome)
Everything works wonderfully but I have got an issue and didn't find any answers here and there for what I want to do.
Basically I'm displaying a small map and wanted to have a button bellow it and when users clicked it, a bigger map would be displayed of that location.
(basically it would be the same map, only with a bigger size)
Something like this:
<input type="button" onclick="myFunction()" value="Show a bigger map" />
Bu my question is what to put inside that javascript function and how do I say a bigger map with #gmaps values should be displayed?
Create a new id with bigger With and Height in the gmaps css?
How to provide the JS the data from my #gmaps?
Any tips?
Sorry if this is a naive question, I'm still getting used to RoR and the Gmaps4Rails gem.
Thanks in advance for your time.
Regards

I'm not quite sure of what you want to do, but I'd say it's really easy to copy the parameters of one map to another.
Indeed, the whole code needed to create a map is visible in your html, simply reproduce the steps.
The gmaps_helper will do the job for your little map. Basically, it follows the following steps:
Gmaps.map = new Gmaps4RailsGoogle();
//mandatory
Gmaps.map.initialize();
// then some code depending on your options
Gmaps.map.markers = some_array;
Gmaps.map.create_markers();
Whenever you want to duplicate the map, you should simply follow the same steps:
Gmaps.bigmap = new Gmaps4RailsGoogle();
//mandatory to have the map created in the proper place
Gmaps.bigmap.map_options.id = the_id_of_your_html_div;
//still mandatory
Gmaps.bigmap.initialize();
//copy the specific parameters from the other map
Gmaps.bigmap.markers = Gmaps.map.markers;
Gmaps.bigmap.create_markers();

Related

A Simple google map - wordpress custom plugin - Map No show

2 files map plugin -github
I'm above to give up please help... noob here.
Created custom style google map with generated code from googles style map wizard site thing
Followed the instructions and various tutorials, jsfiddles, and all sorts and am just so confused.
I put the code into GitHub so you can see what I'm working with. On my site the scripts.js is inside the folder, (first time on GitHub/new to JS and PHP and can't figure how to move the js file into a folder on GitHub lol)
Have confirmed that All the scripts are loading in the head - YAY
The is loading on my page
The CSS is loading #put-map {height:300px; width:300px;}
But the actual map isn't
API is working from local host (tested static html page with apu and custom style map)
No error in browser just doesn't display the actual map.
Is it the event listener - addDomListener - perhaps something there isnt right - I have no idea.
I am trying to create simple ultra lite base map plugin, that I can just replace style or location code for when I want to use maps, I am relying too much on Elementor sites getting really clunky, so trying to expand my knowledge to be less dependent on visual page builders... REALLY appreciate any offers to help with this,
This is my first js project, I'm guessing I've just missed something small, or am COMPLETELY OFF… Anyway I've only included the JS here, as I'm 95% sure the php is fine, but the link to the whole thing is above
Cheers Ness
jQuery.noConflict();
// JS for Google Map with Custom Style obtained https://mapstyle.withgoogle.com/
// Function to create the map
function initMap() {
// create variable themap and define the element id for use in html ie to be used like: <div id="put-map"></div>
var themap = document.getElementById( 'put-map' );
// create variable mapOptions and define options and information for the map to display
var mapOptions = {
// Generated long and lat from https://www.latlong.net/
center: {
lat: -37.345,
lng: 144.146
},
zoom: 12,
// Disable all the controls https://developers.google.com/maps/documentation/javascript/controls
// in this case i don't want the use to have any options to change the map position or zon in etc.
disableDefaultUI: true,
//******************************************************************************
//
// Custom map visual styling
// Styles applied from wizard https://mapstyle.withgoogle.com/
// - Cut and paste JSON Code from below //**** to above next //****
//******************************************************************************
styles: [
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
more style code is here but cut it to keep it shorter i cut and past from JSON off google between the stars
]
//******************************************************************************
//end of Style part
}; //end of Map Options
// create a new map using the information and options defined in the variables themap and mapOptions
var map = new google.maps.Map( themap, mapOptions );
} //ends function initMap
// Create a DOM event to tell the site to load the createmap function when it finds <div id="mymap"></div> on the web page
google.maps.event.addDomListener( window, 'load', initMap );
Thanks again.
OHHHH SOOO EXCITED I was way overcomplicating it... and I think I had most of the right bits but in the wrong places, I was pretty close. I also think that I might have been updating the script.js file outside my activated plugin so the changes were not actually reflecting on the page - Rookie error eh, either way I've cleaned it all up and its working.
Eventually I found this awesome video hidden amongst all the how to use Google Maps with HTML embed/iframes or how to get an API :( but this video actually shows you step by step Google Maps JavaScript API Tutorial by Traversay Media enough to get the right idea... I only needed the first few minutes as the video goes on to tutorial how to add markers and other fancy features, that i didnt need.
I have a GitHub repository (new to Git too) and in the code I have over commented to explain what (I think) is happening in the PHP/JS, what resources I used to generate bits of code from googles map wizards, where certain variables and names need to be the same and also where you need to make changes. There are no instructions on getting your JavaScript Map API there are plenty of these around.
The plug in consists of 3 very short files, so I'm sure there are different ways of presenting some parts of the code, or some ways of doing it more efficiently, please remember I'm still learning this is my first plugin, first finished bit of real PHP, and very first use of JavaScript
Really happy that I resolved from resources I found myself, was really exciting. I hope this helps others.
GitHub - Googlemap-wp by Vanessa

What type of code is this? how/can I get javascript to recognize it?

I'm new to html and javascript, learning on the go to help update a website for the company i work for. The company does it through a browser program/interface called NETKIT / Adobe Business Catalyst. You can create pages for new projects which are called webapps and you can classify them to different groups for sorting, e.g. Water projects, Civil projects. Once you create a database of webapps, you can insert this line of code in html which will produce a thumbnail list of projects for which you've filtered for:
{module_webapps id="3388" resultsPerPage="20" filter="all" rowCount="3" template="/Templates/projectspage.tpl"}
So this code will show all projects in the database in rows of 3's, 20 results per page etc. It works fine when I insert it by itself in html, but I want to use it in javascript, however when i do it doesn't recognize the code and it doesn't show on the page.
For example:
html:
<div id="demo">
</div>
Script:
document.getElementById("demo").innerHTML = '{module_webapps id="3388" resultsPerPage="20" filter="all" rowCount="3" template="/Templates/projectspage.tpl"}'
I've tried with and without ' but nothing shows up within the div. If i replace the module_webapps code with simple text like = 'demo' then text shows up.
Does anyone know if its possible to include this code in a script? Or even better is it possible to create a html select/option with javascript that can change an internal piece of the code, e.g change filter="all" to filter="waterprojects"
Thanks for the help

How to use a random HTML file in JavaScript?

I'm having problems trying to figure this out, specifically because I'm really new to javascript. So, I have this place in my page where I want to have a random html file that I will make in html and I will like to link to it. I want it to be randomized every time the page refreshes, because I will do lots of these html files.
So, is this possible? I've searched for answers but all of the randomized html questions I've found are about the whole page. I just want a little part of the page to be randomized, similar to the random image I have in the same webpage.
The page I'm using for testing is this one: http://vannapruebas.jcink.net/ , I would like to use the toggle that says "búsquedas" for this. So, any help? thanks and exuse my poor english!
All you have to do is make a list of all your html, then you pick one randomly with -> Getting a random value from a JavaScript array.
I used jQuery just for easier demo
var listOfHTML = ["sample/your.html","sample/another.html"];
$('#magic').on('click',function(e){
var randomHTML = listOfHTML[Math.floor(Math.random()*listOfHTML.length)];
$.get(randomHTML,function(response){
$('#yourDiv').html(response);
//do your animation when completed
});
});
<div id="yourDiv"></div> <button id="magic">búsquedas</button>

Adding a number to a marker in Google Maps JS API

I currently have markers displaying as below, but without the numbers that signify there is more than one item in that exact location.
I would like the markers to display as shown below:
I was able to in back-end group the items based on exact location and that is fine, but I can't seem to find a way to add the special number/count to show how many items are there without creating special images with numbers drawn in them.
Ideas on how this could be done?
One other direction if I can't doing it cleanly is use PIL to add the number to the image. Still I don't think that is ideal.
So, what you want to do is inject HTML instead of images in the custom markers. It's essentially what you are doing but google allows you to OverlayViews, even of HTML type. See fiddle
HTMLMarker.prototype.onAdd= function(){
div = document.createElement('DIV');
div.className = "htmlMarker";
div.innerHTML = '<img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View" style="width:30px;height:22px">'+ 'your number count'; //This HTML here is driven by your login to have numbers.
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
===[UPDATE]===
So, I tried checking if I could add multiple overlays on the map. I could but they somehow ended up at the same location, and I tried multiple iterations but was not very successful in separating them out.
So, since you are essentially looking for numbering on markers, I looked around for other ways to solve this issue. I found this library on google maps, markers with labels.
You can find a fiddle on how I customized the markers here.

dat.GUI user input not working

I am building a simple web application. As part of it I want to use dat.GUI since it seems to be the easiest way.
What I want to do:
I am using three.js to display an object. Over this object I want some sort of GUI (currently using dat.GUI) which allows the user to input a search term and hit a button to then call a function which uses the search term.
So far, I have created a variable called search term and the added this to the GUI. This works fine and the value of the variable is displayed. The GUI is also able to listen to the variable and updates once it changes. But I am unable to modify the value. I also added a field to adjust the intensity of the a light I added to the szene in three.js. For this part of the GUI adjusting the value by dragging the bar works but trying to input a value does not.
Code looks something like this:
var searchterm = '';
...
function init(){
....
var gui = new dat.GUI();
gui.add(light, 'intensity').min(1).max(10).listen();
gui.add(this, 'searchterm').listen();
}
Any help on why I can't edit the values or suggestions for other easy to use GUIs would be appreciated.
Not sure if this will help, but this was the problem I was having. If you have any kind of camera controls associated with your three.js canvas, this could be interfering with the GUI. You would be able to adjust sliders, for example, but not edit text. When you attach controls to the three.js camera with, for example, new THREE.OrbitControls(camera);, make sure to specify the three.js dom element as the second parameter like this:
new THREE.OrbitControls(camera, document.getElementById('threeCanvas'));
I have the some problem.
It's coming from the " .listen()" function.
It's buggy.
remove .listen() and it'll work.
The z order might be becoming wrong? I can't find anything easier to use than dat gui.
.main {
z-index: 5;
}
Would make sure this element is at the front. Other than that I'm sure what the problem might be.
I've had the same problem. In my case it was caused by the following CSS:
span {
margin: 0 10px;
}
Applying the style to a newly created class instead of span solved it.
In my case it was a z-index issue. I fixed this with the following:
.dg.ac {
z-index: 1000 !important;
}

Categories