Google maps with directions on a wordpress page - google-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.

Related

Search Through Markers with Google Maps API Like in Google's My Maps

I've created a map that has the ability to toggle data (markers) and added a search box, but I want to be able to search through my markers like in Google's My Maps, but everything that I've searched for doesn't have this feature and I've clicked just about every link there is on the first two pages and this is the closest I've found, but I'm trying to find (b) and the answer to (b) in this situation is to find any entrees within a certain radius.
This is the search feature that I'm trying to add: Example of Google's My Maps : If I search pancakes, the top results that I get are places that are on the map in which I've mentioned pancakes (instead of any place that serves pancakes).
Everything that I've done so far has been in html/javascript, so if it is possible, please try and stick to those languages.
I'm using Google's Maps API instead of My Maps because I wanted to do some extra toggling with the data that didn't seem possible with My Maps, eg make lower rated restaurants have lower opacity.
Thanks!

How to make links to the new Google Maps, with coordinates

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
&center=37.4218,-122.0840
&zoom=18
&maptype=satellite

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!

making a custom (non-profit) place in google maps and getting the coordinate of it

I was searching the web for the past two days and I wasn't successful in finding what I want.I want to add my own place (for example my home) to the google maps and then get the coordinates of that place in order to place it in my google maps code in my website.
the only way google is showing me to do so is to add a job for my google coordinates account and then add my custom location(and of course I should pay for it).But this is not a job,I just want my place's coordinates to use in my google maps code!
ps:I've even seen people add their own location with full details of their place in the google maps and I'm pretty sure they didn't pay a penny for it(and everyone in the world can see their place!!!)
So here's the question:How can I do this without paying anything?
Go to the google map on web browser and go to the place what you want by zoom and move and at click you would see the coordnates that you may use in google map code.
No need to add you own place.

Query existing, public Google Map via the Google Maps API v3

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