Google like customize and preview embedded map in my site? - javascript

i whant to have something similar like googles customize and preview embedded map. is it possible that users just find location on the map, type in the size they want and just copy the generated code?

What it sounds like is that you want to allow people to select and save a custom Google map of their own within your app.
A simple way to do so would be using Google maps APIto create a map inside a container dom element. You would then allow user to resize the container element which would essentially allow them to position the map and also their chosen size.
When the user is finished resizing and positioning, you would need to make another call to the API to get the current lat/long of the map as well as getting the dimensions of the container. With the lat/long and container dimensions saved, this should be enough information for you to save the users custom map.
Hope this helps.

Related

Get existing Google Maps V3 instance?

I am using a WordPress plugin for a Store Locator, and it does a lot of good things. But there are a few things that I need to tweak and I do not want to modify the plugin's code. I was wondering if there was any way to get ahold of the current map that it outputs and all of its settings so that I could manipulate them, or add to them? I would do this in my own JS file.
The ID of the div that contains the map is #wpsl-gmap and one thing I want to do is after loading the results I need to trigger a resize on the map because the area that it is loaded into increases and the tiles do not load for the new section. I would also like to center the map if possible.

CartoDB - Zoom to specific extent when clicking on a point?

I have a map of points, and for each of those points, a specific extent that I want the map to zoom into when I click on it.
I assume I will need to tabulate the bounds of those extents and add them as another column in the data.
Is there a way for Carto to automatically zoom to the bounds once I do this?
Yes you need to develop a CARTO.js web application. You need of course to store the bounds somehow on your table in a set of columns or in one single column using a format you can later parse. Next, you need to add that/those fields to a custom infowindow so they are passed to the web application in the interactivity. Finally, you need to listen to the feature click event in order to retrieve the interactivity data and using Leaflet map methods move its bounds.
You have all CARTO.js documentation here and a tutorial and many examples here. It's easier than it seems.

Converting an HTML element to a String/Object

I'm creating an AngularJS app that basically has a table and a search bar. The table is locations, and when you click on a link its supposed to take you to said location via an embedded Google Map. Im having trouble with the Map when I try to Pan it to the new location. Here is what the app looks:
Is there anyway to be able to click on a name/coordinates (name is preferred so I can remove the coordinates column) and convert the coordinates to a string/object that I can use to set a location on Google Maps?
Thanks in advance!!!

How to re-render html element in canvas element

I have short question.
Is possible render Google maps or Bing maps to hidden element and re-render in canvas with sepia and blur effect?
I think not, so, is possible do this with any kind of todays technologie?
You don't really need to render the maps to a hidden element and then capture it somehow, the maps are all made of images anyway, you just need to download the image tiles. You can then add those images to a canvas in the normal way.
However, downloading and storing GMaps images would probably be a violation of their terms of service, I imagine Bing will have similar restrictions. However OpenStreetMap does allow tile downloading, if you scroll to the bottom of that page you'll see some links to tile providers and tools.

google maps api v3 - how to display image thumbnails inside bubble?

I have some thumbnails with gps info that I want to pass to a javascript google maps instance. I can get the points to draw on the map, center and zoom to fit, and I can replace the markers with the thumbnails.
This is close, but I'm looking for something that I can style (border, size, etc) and show more of a precise location, like a popup bubble like in google maps business search.. I've looked at the chart library, but that doesn't seem to be anything more than text and their icons.
I also like the way the panoramio (when you turn on photos in a google map) will scale the majority of images down and deal with zooming.. are there public libraries or functions we can use that do this stuff?
Thanks
Something like this? http://jsfiddle.net/Kai/Unh2M/embedded/result/ Its using an InfoWindow to display the picture when you click on the pin.
You can view the source on that at http://jsfiddle.net/Kai/Unh2M/ and check the reference on InfoWindows at http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

Categories

Resources