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.
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 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.
I was wondering if you could put a custom StreetView with a marker. I am making a map that has city parks. I want it so if someone clicks on a specific marker, the custom StreetView pops up and shows the panorama. For the custom StreetViews I used Google Views. Is this possible?
Thanks in advance.
Yes, this is possible. Something close to it can be done in two ways.
The easiest option is to load Google maps from the main URL and wait. It will let you build a map or view your custom maps just below the search bar. Google Maps itself lets you create a custom map with markers. This doesn't sound like your desired option, but it is quick to implement. You can even add your own style.
The second is to create your own custom Street View tour, this sounds like your focus. You want the actual panographs to use your markers. This is fairly easy to do, but requires some programming. It is possible on both Google Earth and Google Maps. Check out the Google APIs such as https://developers.google.com/maps/documentation/javascript/reference#StreetViewPanoramaOptions. Options include changing out panographs for your own images, defining arrows including labels, overlays, pop-up boxes, action boxes, and more. Check out some options here: http://hpneo.github.io/gmaps/examples.html
Hi, I want to show my full calendar like this I am new to this, can any help me with this. thank you.
What you basically need is to use the month view (it's the default view), like in the example: http://arshaw.com/fullcalendar/views/month/
You will also need to customize the event background color using the configuration 'eventBackgroundColor', see: http://arshaw.com/fullcalendar/docs/event_rendering/eventBackgroundColor/
I suggest you the read the documentation. Some parts of what you want you will need to do it yourself using the methods provided by the API. Some other parts is ready-for-use.
google map api v3: can I use a div instead of an image to create the custom icon?
i want to be able to hover the marker and change the icon, ven betetr if i could use a fade fx...so how can i set a div instead of an image like it is by default?
Yes, You can use Custom Overlays in place of markers:
http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays
First, I give the demo-purpose website.
For this question, I have found there are several similar questions which I have already answered such as:
(following one is about theory)
HTML/CSS Markers using Google Maps Javascript API v3
(following one is about implementations)
How to create custom marker for google map
At first answer, I have given my detailed understanding why customized icons and markers should be implemented by extending overlayView class.
At second answer, I have posted out how to write HTML/CSS to specify how one customized icon/marker looks. Of course you can also write event handlers to add JS logic to your icon/marker.
At stack overflow, I found several interesting points. When I found similar questions, I cannot answer the question using my previous answer.
One content manager even deletes my answer although what I am answering here is exactly the question is asking.
At last, if you need to see how to extend overlayView class to realize one marker, please see this source code (starting below comment //====custom-marker management starts)
Thank you.