Click button to highlight a Map Marker (Gmaps) - how? - javascript

On this page I need the "Get Directions," button to highlight one of three points/map markers already on the map. So far, I have the following wrapped around the button/img....
<img src="images/get-directions.jpg" alt="get directions"><br>
Though that code is not working. Any idea, where I went wrong with that code or know a better way?

It looks like you are using static map url but you have embed map?
https://www.google.com/maps/embed/v1/directions
?key=API_KEY
&origin=
&destination=

Related

JQVmap, show a tooltip arbitrary, triggering the event

Good day all. I'm using JQVmap, I'm trying to show a tooltip while mouseovering some elements that are not in the svg map.
This comes to solve the issue that some of the countries are really small, so I'd like to provide the user some buttons on the map to show te tooltips of Greece, and Singapore (for example).
Actually I try to trigger the same event that is triggered in the jquery.vmap.js:
jQuery(params.container).trigger(labelShowEvent, [map.label, code]);
I've done this:
$('#vmap').trigger(labelShowEvent, [tooltipMaker("gr"), "gr"]);
and this:
$('#vmap').trigger(jQuery.Event('labelShow.jqvmap'), [tooltipMaker("gr"), "gr"]);
ofcourse without any luck.
the second attempt I recieved this error:
Uncaught TypeError: label.html is not a function
so I try to solve it by assign a function to that parameter:
label.html(tooltipMaker(code));
and defined a function like:
function tooltipMaker(code){
return '<div class="map-tooltip"><h3 class="header">Country: '+code+' </h3><p class="description">'+code+'</p></div>';
}
but it does not solve anything. Is there anyone that has the same problem and solve it somehow?
in the end I could also build a tooltip similar to the one used in the map, but I'd like to use the map logic (without doing a new map with the buttons as "real" fake regions, which it would be very difficult and long).

Angular JS - Image Maps and filters

I took a bit of a break from learning Angular for a while, and I'm jumping back in and am having something of an issue controlling an image map.
Basically, I've got a map with a bunch of weirdly shaped areas, and I want the mouse rollover to control a filter in an earlier ngRepeat - I know that I can set ng-mouseEnter on standard divs to change the value of a model and update my data in real time, but I have no idea how to get that working inside a map as ng-mouseEnter won't work with standard image maps.
My thought was, I set a really simple inline script function like this:
function showThis(thing) {
return thing;
}
and have my onMouseEnter part of the image map update that function, then reference that in my filter. A quick example of what I was thinking of in code (with one of my image map areas copy-pasted, to show that it would be kind of difficult to just make invisible divs) -
...
<script>
function showThis(thing) {
console.log(thing);
return thing;
};
</script>
<div class="foobars" ng-repeat="foo in fooBar | filter:showThis():true">
<p class="foo_text">{{foo.snippet}}</p>
<img ng-src="{{foo.imagePath}}">
</div>
<div class="images">
<img src="images/map/base.png" usemap="#imagemap">
<map name='imagemap'>
<area shape='poly' alt='Area One' href='' coords='33,288,35,276,41,272,60,276,96,234,97,198,140,171,189,192,182,242,144,261,144,271,108,286,66,297,42,296' onMouseEnter='showThis(1)'/>
<area shape='poly' alt='Area Two' href='' coords='245,170,186,194,144,176,149,136,212,110,252,123' onMouseEnter='showThis(2)' />
</map>
</div>
But that doesn't work, and I can't work out how to get the idea running. I'm clearly missing something obvious, but I don't know what - I know I could create a custom filter in the controller, but I still don't know how to associate the image map's "onMouseOver" with the filters inside the controller. Angular and this particular feature of imagemaps don't seem to work too well together to my lame eyes.
I made a plunkr here to show my broken-ass code. Where am I going wrong?
I forked your plunker after making some changes that, I think, solve the problem you were trying to solve...
What #wZVanG says is correct, regarding the use of ng-mouseenter.
Additionally, I wasn't quite sure what your plan was with showThis and your second ng-repeat, so I added a function, setSnippet that is called on mouse enter and then display the correct snippet under the image through a simple div.
Hope that helps.
Use ng-mouseenter instead onMouseEnter, add # in href attribute of area element to avoid reload the page:
<area shape='poly' alt='Area One' href='#' ng-mouseenter='showThis(1)'
coords='33,288,35,276,41,272,60,276,96,234,97,198,140,171,189,192,182,242,144,261,144,271,108,286,66,297,42,296'/>

Fetch href Value from HTML File via Javascript

I have this Problem.
I am using Grid.js (http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/)
And now I want to add a Lightbox with multiple thumbnails inside the dropout.
Grid.js has an function where it puts all the content into the dropout, so I thought I may use this function.
this.$href = $('<div class="image-row"><div class="image-set"><a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" title="Click on the right side of the image to move forward."></div>');
I shortenend the code, its very long (not very pretty I admitt), now it shows on the dropout, but I need for each Dropout a new set of images.
Is there any way I can fetch the href="" data out of the HTML? Or another, more practical way to do it?
I admit I have absolutly no clue of JavaScript.... I hope someone can help me! Thanks in Advance
In jQuery you can use $('.example-image-link').attr('href');

Ruby on Rails - Gmap4Rails popup for a bigger map

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();

jQuery's load() doesn't display images

Good evening everyone,
I am using a JavaScript to load/override content from an HTML-File into specified divs.
You can watch a demo.
The javascript that does the load job looks like the following:
function loadScreenie(elementSelector, sourceURL) {
$(""+elementSelector+"").load("img/screenies/"+sourceURL+"");
}
and gets invoked by a hyperlink looking like this:
mibmib
( i have also tried the same with onclick="")
This is the content of screenie2.htm
hello world<br />
<img src="screenie2.png" />
The problem is that images are not displayed. The behaviour is like this:
- you click the link and the javascript is executed.
- the text in screenie2.htm is displayed correctly in the correct div
- the image is not displayed. there also isnt any broken image symbol or an empty space.
Do you have an idea what could cause this error?
Thanks a lot in advance,
-- benny
Ok. Let me conclude to you what is happening here.
When link is clicked, jQuery loads "img/screenies/screenie2.htm
The image-tag <img src="screenie2.png" /> is inserted into the DOM.
So, we have an image linking to a supposed image at ./screenie2.png, where you would believe it should be linking to *./**img/screenies/**screenie2.png*.
You need to use absolute URLs in your load():ed content.
If you're testing with IE, the problem might be that Jquery uses innerHTML instead of creating individual dom elements with the load command. IE can be very finicky about that.

Categories