Integrate Instagram pictures to google maps - google-maps

I don't know if this is the place to ask for this kind of stuff but i'll try.
I want to integrate a map of google maps embedded in my website that shows my geotagged instagram pictures on it.
There are some online services but none is exactly doing what i need which is so basic at the same time.
I found a widget called snapwidget where you can manage to show your pictures in the map, but then you have no option to set the zoom of the map and the controls wont' appear.
Is there any way to show and set the zoom controls in a embedded google map which is not directly from google maps api?

Well according to the Embed API documentation you can set optional parameters for the zoom level and other settings. I don't see anything to disable the controls, and I don't know about integrating with Instagram photos.
e.g.
https://www.google.com/maps/embed/v1/view
?key=YOUR_API_KEY
&center=-33.8569,151.2152
&zoom=18

SnapWidget is one option, but then there's also Widgetic and The Data Pack.
http://thedatapack.com/embed-instagram-map/

Related

Mark a place on Google Map and embed widget

http://snag.gy/mHDah.jpg
Please look at the above picture.
I want to add a place to the map and export embed html widget to my web site.
But the problem is a place is not there. (Not body added that place to Google Map).
I want to mark that place with a red point in a embed map. (Please look at the below snapshot)
http://snag.gy/7DFm3.jpg
Please help me.
Maps Engine Lite (Beta) is a tool which allows you to design and save your own custom maps. In order to make use of it, you'll need to have a Google account and be logged in.
For example, have you tried to embed a newer Google map into a web
page? The reliable old "link" button is nowhere to be found!
A simple example is here
Those pins are called markers in the gmaps API.
This example does what you want: https://developers.google.com/maps/documentation/javascript/examples/marker-simple
You can use normal Google maps to find out the coordinates for your place by right-clicking on it and choosing "what's here" (works in chrome and safari at least).

New Google Maps embedding option

Since the latest Google Maps update in 2013, is there a way or a resource that can be used for simple embedding Google Maps?
I have tried using the old maps system but it does not produce desired results.
Also, I have tried using Google Maps Engine, no luck there as well, because you are only served with a link to share, not embed code.
After extensive research on the topic I found no simple way of embedding new Google Maps. Problem will possibly go away once Google decides to update Google Maps. However, I have not seen Google Maps development roadmap and so I can't really vouch for them.
Apart from using simple solution, there are two others (not so simple of course) that might provide a decent substitution.
Solution 1
Using Google Maps API where you can find Developer guides, API reference and code samples. There is no easy way about this, simply follow the instructions and review examples that Google has supplied. Hopefully there might be something in it that will help you.
Simple guide to Google Maps API
Solution 2
Using Google Maps Engine will offer you a way to create your own map. Once you have created a map, added pins, points, routes, etc. at the end you can select option to share. However, option to share just allows you to share a link, not embed. I just wanted to point out this "feature", if you will, of the system.
To embed a map you have to click on a folder in the upper left corner. Shown on the image below and select Embed on my site option.
In the bottom right corner of the map you'll see a cogwheel. Click it.
Click on "Share and embed map";
Choose the size you need from the drop-down menu or choose the custom option;
Click in the box to the right that starts with <iframe src="https://www.google The code should be highlighted. copy and paste it into your web page or blog.
Simples!

google maps api

I want to have google map on my page and I hope it can be based of a zipcode.example 90001.
I also would like to have the general stuff like the ability to zoom out, zoom in etc.
Where can I get this?
Google Map Tutorial:
http://code.google.com/apis/maps/documentation/javascript/introduction.html
Control tutorial:
http://code.google.com/apis/maps/documentation/javascript/controls.html

How could a share a Google map mashup with my own datapoints and links back to my site?

I currently have a map mashup that has locations that I'm populating from my own database. A few users would like to also show that map on their site(s). I'd like to give them the ability to do that, but would like to retain the actual functionality of the map on my own site: like add "stuff" to places on the map through my a web form on my site. I could open the entire API to allow them to create their own form along with the data points, but most of the people wanting to put up the map aren't developers, they are just enthusiasts that have put together a personal page that they want to spice up.
I was thinking I could just provide a JavaScript of some kind that they could then take to place on their site, or maybe an IFRAME of some type, or...any ideas? Anyone implemented this? TIA.
I haven't done anything like this myself, but I think your idea to utilise an iframe is on the right track. In fact, this is how Google Maps generates its embed code.
Your app will need to generate a URL with all relevant Google Map parameters such as bounds, zoom level as well as your application-specific params. Any event that triggers the map to re-draw (drag, zoom, etc.) will generate a new URL.
If you try the embed link in Google Maps as an example, it generates a URL that looks something like this:
http://maps.google.com/maps?f=q&source=s_q&sll=45.434035,12.339057&sspn=0.003294,0.004812&ie=UTF8&ll=45.432724,12.338966&spn=0.006588,0.009624&t=h&z=17
This URL can then be wrapped up in an iframe which your end users can place on their web pages.
Re: resizing
Yes, it's possible to dynamically resize it if width/height is part of your application params that generates the embed code. Again using Google Maps as an example:
<iframe
src="http://maps.google.com/maps?f=q&source=s_q&sll=45.434035,12.339057&sspn=0.003294,0.004812&ie=UTF8&ll=45.432724,12.338966&spn=0.006588,0.009624&t=h&z=17&output=embed"
width="(width-param)" height="(height-param)"></iframe>
If you mean resized by user, after it's been displayed, I'm not sure.. most likely, yes.

Do i need use google maps api only to embed litle map with route calculator/display for only one destination?

Well i want to upgrade contact page with dynamic map showing location and give oportunity to calculate route for comapny headquatters. Id it necessery for such simple task use Google api? i mean here generating akey etc? Fo i have any other alternatives to google maps?
There's really no reason to mess with the API at all unless you need to customize the appearance or behavior of gmaps. Why not just use an iframe with a url of:
http://maps.google.com/?q=[you-url-encoded-address-here]
or better yet, set up a textbox and a 'get directions' button to redirect that frame to:
http://maps.google.com/maps?saddr=[their-address]&daddr=[your-address]
edit: this works well in modal dialog if you don't want the google logo sticking out like a sore thumb in your pageflow
You could probably embed directly with a specific URL that will configure it to have the destination you want.
By the way, well written answers are much more likely to receive useful responses here.
You could consider http://www.openlayers.org/ as an alternative to google maps.
In fact open layers can be used to add a Google map, or an OpenStreetMap map or a Bing map, etc.