I am attempting to search for places within an area around a lat/lon coordinate using the Google Maps embed API. The code below displays the map correctly, but the search results it displays are for a different location. On one browser it thinks I'm in Rome Italy, and another near my actual location.
Is there a way to get the search results for the displayed area in the map?
<iframe
width="600"
height="450"
style="border:0"
allowfullscreen
src="https://www.google.com/maps/embed/v1/search?key=APIKEY&q=Restaurant¢er=43.98444444,-88.55694444&zoom=14"> </iframe>
From the documentation:
search mode
Search mode displays results for a search across the visible map region. It's recommended that a location for the search be defined, either by including a location in the search term (record+stores+in+Seattle) or by including a center and zoom parameter to bound the search.
If I convert the center point of your map to an address (2982 Eide Rd, Oshkosh, WI 54902) and add that to the query, I get results showing on the map.
proof of concept fiddle
code snippet:
<iframe
width="600"
height="450"
style="border:0"
allowfullscreen
src="https://www.google.com/maps/embed/v1/search?q=Restaurants near 2982 Eide Rd, Oshkosh, WI 54902¢er=43.98444444,-88.55694444&zoom=12&key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg"> </iframe>
Google map allow you to specify a region to avoid this kind of problem. Set the region of your map like this (UK in my exemple):
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY®ion=UK&callback=initMap" async defer></script>
Add region=YOUR_REGION_CODE just after you're API key when you initialize the google map script.
In you're exemple you can try something like :
https://www.google.com/maps/embed/v1/search?key=APIKEY®ion=IT&q=Restaurant¢er=43.98444444,-88.55694444&zoom=14"
Related
Hy
How i can add a default image for my site to display in the google search results when i type the name of the site to search for?
Currently every few weeks a different image/picture is displaying, current one picture from my news.
Google Search result =
https://www.may_site.com [ logo ]
Currently I added a logo to my first link at the top of the page..
<img src="/images/logo.png" width="70" height="70" alt="Sitename Logo">
Sometimes no picture is visible :/
Google reads meta tags in your page <head></head> to understand what you want to show in search results.
As far as I know there is not an official "logo" or "image" tag that Google support, but is smart enough to understand that "og:image" is the page image.
<head>
<meta name="og:image" content="http://ia.media-imdb.com/rock.jpg">
</head>
You can read more here: https://developers.google.com/search/docs/advanced/crawling/special-tags
And you can find a comprehensive list of meta here
https://gist.github.com/lancejpollard/1978404
Google supports defining your logo in structured data. Here is their documentation on it:
https://developers.google.com/search/docs/advanced/structured-data/logo
However, I think you are talking more about a general image related to a page.
Using the og:image meta tag mentioned by #supermod can be a hint. Google also understands images in certain structured data types like recipes, products, articles etc. Their gallery shows what structured data can cause rich snippets like an image:
https://developers.google.com/search/docs/advanced/structured-data/search-gallery
But it is not necessary to provide metadata or structured data to get images in the search results. Sometimes Google just picks one from the page.
I have a Google Partner Badge on my site, based on code that Google provides. They provide the code, and it creates a dynamic image on my site, that is clickable and a live link. However, the cursor does not change to a hand when over the image or indicate it is a live link in any way. In my opinion, this is bad UX.
I want to simply make the cursor change to a hand when hovering over the image.
But again, the original code is provided by an external site. Can this be done?
Try This:
<span style="cursor:pointer">
// external code here
</span>
inspect elements then find the container of that image, then add style on it.
.containerOfGoogleBadge {
cursor:pointer;
}
Reading mode in Spartan/Edge seems to choose, somehow, which div on the site to display in reading mode. In many pages, it does not find the appropriate div (like bbc.co.uk).
However, on our site, it enables reading mode, but then displays the completely wrong part of the page.
So - how can I tell it to take the right part or at least how to disable it on those pages
You can find information on how to optimize reading view, as well as how to opt-out, here: http://dev.modern.ie/testdrive/demos/readingview/
07/10: Edit to include specific information
Specifically, you may be interested in optimizing your title, body, and image markup to ensure a good reading mode experience.
Title
Your page should include a <title> element in the header. In addition, you should include a <meta title=""> tag that matches your main heading in your content section.
Body text
Ensure your main content does not include a lot of deeply nested elements and that font-sizes and other styles are uniform. Style variations for things like pull quotes, etc. should still be fine.
Images
The first eligible image becomes the dominant image of the article. The dominant image is rendered as the first piece of content and given full column width. All following images are rendered as inline images within the article.
Images are recommended to be wrapped in <figure> tags with no more than two <figcaption> tags.
Opting out
Including this meta tag will disable reading mode in IE11 and, currently, Microsoft Edge.
<meta name="IE_RM_OFF" content="true">
Add the following Tag
<meta name="IE_RM_OFF" content="true">
Check the Below for more details
http://dev.modern.ie/testdrive/demos/readingview/
This question regards website programming. My primary languages are c++/c# and I don't know much about web development, except that say I understand html and css. That's why I'm looking for a relatively simple solution, preferably something out of the box. I don't have any experience with JavaScript, but for the sake of this project I'm willing to learn it if necessary.
Let's say I have a database, where each entry is about a book. It contains the fields: title, author(s) and publication date.
I would like to create a simple website with a search box that has this dynamic result feature, so that you get suggestions after you type in a few letters. All those suggestions, as well as search results, need to be based purely on the database.
This could be a static website or based on any Content Management System, I'm familiar with Joomla, but was unable to find an out-of-the box component that would do just that. All those search modules search the entire website and I only need to search the database.
Probably I can help you with how to implement this feature. We used to call this feature as autocomplete menu.
First you decide minimum characters to populate autocomplete menu. For example 2
By using javascript you write keyup event. Once the characters count reaches to the minimum character count. You send AJAX request to the server.
The server should process this request and do the database search and form a json or xml response or plain text to the client.
The client parses that response into javascript object and construct a dynamic html for autocomplete menu with the data and render it into the DOM hence display's just below the search text box.
Now if you want to display the first result inside the textbox as you type. Here is the method I can suggest as similar as google search box
Place one label or span just below the input text box. By using css make its position exactly match with the position of the text box. Make sure the starting of text of both input text and label matches. Make the text color of the label less brighter than the font color of text. The font size and font family of the label should match the input text field's style. Now by using Javascript display the first or most matched text inside the label. Please find the sample code below
<!DOCTYPE html>
<head>
<style>
label {
position:relative;
}
body, input {
font-family: 'verdana';
font-size: 12px;
}
</style>
</head>
<html>
<body>
<form action="demo_form.asp">
<input type="text" name="fname" placeholder="Matched Text" /><br>
<label> Matched Text</label><br>
</form>
</body>
</html>
I am trying to create an interactive map where users can click on different provinces in the map to get info specific to that province.
Example:
archived: http://www.todospelaeducacao.org.br/
archived: http://code.google.com/p/svg2imap/
So far I've only found solutions that have limited functionality. I've only really searched for this using an SVG file, but I would be open to other file types if it is possible.
If anyone knows of a fully functioning way to do this (jQuery plug-in, PHP script, vector images) or a tutorial on how to do it manually please do share.
jQuery plugin for decorating image maps (highlights, select areas, tooltips):
http://www.outsharked.com/imagemapster/
Disclosure: I wrote it.
Sounds like you want a simple imagemap, I'd recommend to not make it more complex than it needs to be. Here's an article on how to improve imagemaps with svg. It's very easy to do clickable regions in svg itself, just add some <a> elements around the shapes you want to have clickable.
A couple of options if you need something more advanced:
http://jqvmap.com/
http://jvectormap.com/
http://polymaps.org/
I think it's better to divide my answer to 2 parts:
A-Create everything from scratch (using SVG, JavaScript, and HTML5):
Create a new HTML5 page
Create a new SVG file, each clickable area (province) should be a separate SVG Polygon in your SVG file,
(I'm using Adobe Illustrator for creating SVG files but you can find many alternative software products too, for example Inkscape)
Add mouseover and click events to your polygons one by one
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"
onmouseover="mouseOverHandler(evt)"
onclick="clickHandler(evt)" />
Add a handler for each event in your JavaScript code and add your desired code to the handler
function mouseOverHandler(evt) {};
function clickHandler(evt) {};
Add the SVG file to your HTML page (I prefer inline SVG but you can use linked SVG file too)
Upload the files to your server
B-Use a software like FLDraw Interactive Image Creator (only if you have a map image and want to make it interactive):
Create an empty project and choose your map image as your base image when creating the new project
Add a Polygon element (from the Shape menu) for each province
For each polygon double click it to open the Properties window where you can choose an event type for mouse-over and click,
also change the shape opacity to 0 to make it invisible
Save your project and Publish it to HTML5, FLDraw will create a new folder that contains all of the required files for your project that you can upload to your server.
Option (A) is very good if you are programmer or you have someone to create the required code and SVG file for you,
Option (B) is good if you don't want to hire someone or spend your own time for creating everything from scratch
You have some other options too, for example using HTML5 Canvas instead of SVG, but it's not very easy to create a Zoomable map using HTML5 Canvas,
maybe there are some other ways too that I'm not aware of.
Just in case anyone will search for it - I used it on several sites, always the customization and RD possibilities were a perfect fit for what I needed. Simple and it is free to use:
Clickable CSS Maps
One note for more scripts on a site: I had some annoying problems with getting to work a map (that worked as a graphic menu) in Drupal 7. There where many other script used, and after handling them, I got stuck with the map - it still didn't work, although the jquery.cssmap.js, CSS (both local) and the script in the where in the right place. Firebug showed me an error and I suddenly eureka - a simple oversight, I left the script code as it was in the example and there was a conflict. Just change the front function "$" to "jQuery" (or other handler) and it works perfect. :]
Here's what I ment (of course you can put it before instead of the ):
<script type="text/javascript">
jQuery(function($){
$('#map-country').cssMap({'size' : 810});
});
</script>
Go to SVG to Script
with your SVG the default output is the map in SVG
Code which adds events is also added but is easily identified and can be altered as required.
I have been using makeaclickablemap for my province maps for some time now and it turned out to be a really good fit.
I had the same requirements and finally this Map converter worked for me. It is the best plugin for any map generation.
Here is another image map plugin I wrote to enhance image maps: https://github.com/gestixi/pictarea
It makes it easy to highlight all the area and let you specify different styles depending on the state of the zone: normal, hover, active, disable.
You can also specify how many zones can be selected at the same time.
The following code may help you:
$("#svgEuropa [id='stallwanger.it.dev_shape_DEU']").on("click",function(){
alert($(this).attr("id"));
});
Source
You have quite a few options for this:
1 - If you can find an SVG file for the map you want, you can use something like RaphaelJS or SnapSVG to add click listeners for your states/regions, this solution is the most customizable...
2 - You can use dedicated tools such as clickablemapbuilder (free) or makeaclickablemap (i think free also).
[disclaimer] Im the author of clickablemapbuilder.com :)
<script type="text/javascript">
jQuery(function($){
$('#map-country').cssMap({'size' : 810});
});
</script>
strong text