I am trying to embed an existing, public Google Map into a website. Specifically this one:
http://goo.gl/maps/cHf2
Of course I could use the iframe embed to achieve this, but I would like a little more control over the map … I imagined being able to pull all the markers from the map and display them as an index next to the map. Kind of like Google already does, but embedded in my page with my own styles and images.
I have been digging through Google, Stack Overflow and the API instructions and couldn’t find any relevant posts. In the GET string of the map on Google we can see this chunk:
&msid=212828439842926497866.0004bfae4da003d8ffd1f&mid=1341413217
I thought in there might be a maps ID and I could use it to query the content of the map through the API? The intention is using Google Maps as a CMS for less technical minded people and not dealing with geo data in our own CMS.
Any help would be greatly appreciated. Maybe I am just missing the forest for the trees.
You can download the kml that specifies the markers in that page and display that on your API based map. This example defaults to displaying it using geoxml3, but you can hide that and display the KmlLayer version.
You should be able to just point KmlLayer to the link (I downloaded the kml and put it on my server so it would work with geoxml3).
Here is an example (taken directly from the documentation) that does that
here is the original
Related
I need to convert a map built with Google Maps to a static map.
The problem is that map has an amount of data (mainly circles), and its representation has to be doing a path description of its circunference, and I need some kind of accurate, a pure circle has to be displayed in the static mode, so each circle description is about 500 chars (encoded).
The Google Static Maps url limit is 8192 and its not enough for rendering those shapes.
There is another way for doing it? I also tried to use html2canvas, but it is forbidden by Google.
Google actually recently extended the URL limit to 8192, but if you need more than that you probably need to resort to taking a screenshot of a Google Maps JavaScript API map, as suggested by xomena.
A tool like PhantomJS [1] can help you write a script to automatically take a screenshot of a webpage (which you've drawn using the Google Maps JavaScript API).
[1] https://github.com/ariya/phantomjs/wiki/Screen-Capture
I have a small example that uses PhantomJS to take a screenshot of the page.
Here's the JavaScript Map with some information: http://jsbin.com/pevizusana/2/edit
Here's the PhantomJS code that will take a screenshot on this site: http://pastebin.com/gEXhG1dP
And here's the result: http://i.imgur.com/Mj951aP.jpg
I hope you find this information helpful.
I'm the author of osm-static-maps, It's an open source project that you can use as a cli or js library or self-hosted http server. It mimics google static maps and you can pass any amount of data to the map as a geojson.
See the project here for more instructions https://github.com/jperelli/osm-static-maps
How can I get a map that simply shows how to get from A to B with a car on my WordPress page?
I used to do this in Google maps directly, I made a map showing the road from A to B and embed it on the page. It used to be so easy. And under the map I had a link to the same map in Google Maps where you also could get written directions. But like a month ago, Google changed their maps and all my maps got messed up. The links as well. Now I am trying to fix this and make new maps.
I have tried in Google maps directly like i used to do, and this is the closest I get to what I am looking for: https://developers.google.com/maps/documentation/embed/start. But I find that very hard to customize, because there are very few options. I have also tried a lot of different plugins, but so far no luck.
Is there a better way to do this?
If you want to customize the map, I can only strongly recommend you the Google Maps API. Here is a good example of how to integrate the directions service into a map and display it on your web page.
Google recently changed Google Maps UI, and now the links I use does not work anymore.
I've tried searching, but I haven't been able to find info om how i should build links to the new Google Maps. I only find info on integration, and static image maps, which still works, but I want to be able to click on the image to get to the full Google Maps.
This is the format I used earlier:
https://maps.google.com/maps?z=16&t=h&q=loc:48.854013+2.350232
Does anyone know how I can get that work again, or preferably, a link to the entire documentation?
Here is the API for Google Maps Embed API
check the new link structure.
https://www.google.com/maps/embed/v1/view
?key=API_KEY
¢er=37.4218,-122.0840
&zoom=18
&maptype=satellite
I'm making a website that has an embedded google map (iFrame) that has multiple place names on it that I set up in My Places. What I want is to be able to list the place names and addresses down the side of the map like it does in My Places.
Obviously I can just export the KML data of the map but I want the page to automatically update when a new place is added to the My Places map without having to export a new file.
If Google still supported RSS feeds I would probably use that, but the current API seems to need to rely on URL requests.
Any help or suggestions are appreciated!
I don't think you can do this with an embedded map. You can add a sidebar to a map from MyPlaces using the Google Maps API v3, a third party KML parser like geoxml3 and a proxy.
example
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.