So there is a pretty good amount of information out there about how to customize your view on regular Google Maps. However, several of the API methods do not work when trying to view your own custom map. I am not sure why this is, but it is annoying. After some research and some experimentation I found a small set of variables that the API does accept and work as of writing this article. Hopefully this will be helpful for you as I write many things in here simply as references for my own use when working on my many websites.
This works on your own custom maps you create with Google Maps. The idea is to have one custom map that shows many things. In may case a map of Colorado camping locations. I write reviews of these campgrounds and want to include a link to my map. But that link needs to zoom into the campground and to center it in the screen.
Camp Out Colorado Campsite Map Normal View
To accomplish this we simply build a url with the proper parameters so that when the user is redirected to the map it also zooms in and centers on the specific campsite.
What We Need to Create a Custom View of Custom Google Map
Custom Map ID
This is found in the URL of the base custom map.
Camp Out Colorado Campground Map: https://www.google.com/maps/d/viewer?hl=en&authuser=0&mid=1NOd9T5rPujjSZ1h7bQ0CX_x-jEE
What we are looking for is mid. Grab everything that is after the “=” and before the “&” if it is there.
Longitude and Latitude
This can easily be found by opening a normal Google Map and select “What’s here?” This will give you a small infobox with what is there along with the exact longitude and latitude. Copy that.
In my case it is: 39.34385,-106.61257
Zoom Level
This is up to you. I like a zoom of 10-14 depending on how close in you want your map to zoom. I have a lot of campsites on the map and many are relatively close to each other. So I zoom in close to really make sure they know which one it is.
Create Link to Custom View of Custom Google Map
Start with the map viewer;
- https://www.google.com/maps/d/viewer?
Then add your map id;
- mid=1NOd9T5rPujjSZ1h7bQ0CX_x-jEE
Then add your zoom index, make sure to begin separating parameters with “&”.
- z=14
Lastly add in your longitude and latitude together in one parameter.
- ll=39.34385%2C-106.61257
So the final URL looks like;
https://www.google.com/maps/d/viewer?mid=1NOd9T5rPujjSZ1h7bQ0CX_x-jEE&z=14&ll=39.34385%2C-106.61257
There are other things that can be done but I will not go into those now. This should help to be able to simply create a custom map link that will zoom into the required spot.
Please let me know if you have any questions or suggestions to make this easier or better.
Now, to figure out how to embed a zoomed in custom map into a page.
