I want to make web site like this.
http://sf.eater.com/maps/the-38-essential-san-francisco-restaurants-january-2015
I don't have any experience Google map API.
Where I can get sample code or theme like this?
Google map api is pretty simple, but you need to use some other plugins as well to make it work like this website. Although i wont be able to handover the code to you, but here is what you have to do.
You just create a map and add points to a map and then add an event on the click. Take a look at this for a simple event.
https://developers.google.com/maps/documentation/javascript/examples/event-simple
You can replace the zoom in feature with windows load method to jump to a certain anchor on a page. You can also add any smooth scrolling plugin, You can use this code.
https://css-tricks.com/snippets/jquery/smooth-scrolling/.
Now when someone clicks on the map, javascript should be redirecting you to another page but because you will be using this technique with #anchors, instead of going to another page it will try to find this anochor on the same page. And the smooth scroll plugin will animate the scrolling for a better effect.
Related
I'm trying to make a google form look like my own site. I found examples of how to do this on How to style Google Forms and google-custom-form (GitHub project), but I tried both of the examples they give and they seem to fail now.
I had a look at Class Form - Google Apps Script which seems to be like an API, but I can't get my head around the documentation. Does anyone have an example of it working. Or has found another way of getting this to work? It would be really handy to do as embedded forms look really out of sync with the rest of the site.
The API you're linking to is an apps script API. This is needed if you want to create dynamic forms (dynamic amount of questions, dynamic answers,...) but not for custom styling. An intro to appscript can be found on this page: https://developers.google.com/apps-script/
You could just create a form manually on https://www.google.com/forms/about/
You can change the styling and colors in the top-right of the page. When you are ready to embed the form on your own page you have to press "SEND", an select the embed icon <> at the top.
I've worked with this a ton, and still have issues with it. Been learning the new api v4 for sheets but still having trouble, it is still in beta too. For now I can recommend this solution though by heaversm on github.
https://github.com/heaversm/google-custom-form
The example fully works as long as you find the entry.xxxxxxx for each field and replace in the appropriate js. To avoid the embed issues, give your form submit on a click function that has the event as the input and then preventDefault on the event like so:
$('#submit-button').on('click', function(event){
event.preventDefault();
// continue code from heaversm
});
Hope this works for you. Cheers
I'm writing an app which involves letting users to share comments on a website, which has a comment form with Google's reCAPTCHA embeded. I would like to load this page via HTTP and display CAPTCHA within my app, so that user can post comments from my app. Is it easy to implement or should I rather try other solution?
EDIT:
I've red reCAPTCHA developer guide. If I would like to embed captcha inside my form, I'd need to insert div element with a proper class, and make a ajax request in order to render captcha. This call would insert an iframe into a given div. What I need is to know how to access that iframe's content without using AJAX.
Turns out we are not supposed to do that kind of tricks with reCAPTCHA.
There is no support for that in API. It seems that it was part of Google's design to prevent that kind of usage.
The only walkaround I could come up with is to implement a WebView widget with JavaScript support, get website via http, and load it into this webview, centering this view around the form we want to post.
It seems like a lot of work though, thus I'm going to simply skip this, if someone successfuly manages to figure it out I'd appreciate a hint :)
Lets say I let the customer upload up to 5 pictures. I'm looking for a good way to let visitors see the images one by one.
I've seen some.. where there are thumbnails on the side/bottom (that looks like a vertical/horizontal film strip) and the default picture is the large one displayed. And viewers can click into others to show those pictures.
This could possibly be an AJAX solution. I just couldn't come up with the right keywords to Google this custom Web component. Perhaps it is "photo gallery". But I would be more interested to know what solutions developers here use for their site.
Perhaps lightbox is the keyword you're looking for: http://www.google.com/search?q=lightbox
Is something like this Galleria what you're after?
It's all implemented in Javascript so is simple to integrate.
There are several options but on first thought, I would reach for the fancybox jQuery plugin. The third example on their home page does exactly what you described. I've used this plugin a few times now and it's quite good.
I want to create custom user control in google maps api v3. I want this control show in place where user click on the map. This user control contain pictures and text. I can´t use InfoWindows, beceasue my user control have different look. And i didn´t found way how to style infoWindow only change its inner html. I googled without any good solution. In api v2 I found this http://www.codeproject.com/KB/scripting/Use_of_Google_Map.aspx.
map.controls[google.maps.ControlPosition.TOP_LEFT].push(new MyControl());
this will add mycontrol on top left. And I´m looking for something like that just replace google.maps.ControlPosition.TOP_LEFT with my latlng.... I hope you understand me.
thanks for any help
In v3 Api you will need to create a custom overlay class. You could use this example http://gmaps-samples-v3.googlecode.com/svn/trunk/latlng-to-coord-control/latlng-to-coord-control.html as a starting point. Just need to replace mouse move events with click events and customise the contents of the window.
i am develope web application for factory i need to add google map with location of factory
in contact us web page.any help i am just beginging with web development
Easy way here does all the work for you.
Embedding a map into a website or blog
You can embed a simple map, a set of
driving directions, a local search, or
maps created by other users. Here's
how:
Ensure that the map you'd like to embed appears in the current map
display.
Click Link to this page in the top-right corner of the map.
In the box that pops up, copy the HTML under 'Paste HTML to embed in
website,' and paste it into the source
code of your website or blog.
If you'd like to adjust the size of the map before you embed it, just click
Customize and preview embedded map, select your preferred size, and take a
look at the preview map. Once you're happy with what you see, copy the HTML
that appears in the box at the bottom of the window.
Keep in mind that you won't be able to embed Traffic maps, Mapplets, and some
other Maps features.
Google Map API is just javascript. Which can be used in any web technology
follow this link you will get what you are looking for
http://code.google.com/apis/maps/documentation/javascript/
If your beginning, maybe you should try to learn web development first. Javascript, post/get mechanics, HTML/CSS validation. Tackling Google Maps integration right at the beginning of your learning process might slow down your project evolution. It's my opinion.
To learn google maps api, try to start at this address :
http://code.google.com/intl/en/apis/maps/documentation/javascript/introduction.html