How to customize and embed Google Maps to Website
Please Subscribe to our YouTube Channel
Google Maps has become our need now, and we can’t live without it. Whether you are struggling to find a certain location, want to check where you are, or find traffic to work, Google Maps is always there to help. Visiting a new place is a cake walk with Google Maps. Just ask your friend to share his location, and you can use Navigation to reach there.
Google Maps can be embedded to website, so that you can share a certain location with your friends. However, if you want the location to change according to your websites’ visitors location, there is a little trick that you need to learn. We will tell you both the options.
How to embed Google Maps to your Website to share a certain place or location
- Visit maps.google.com
- Type a location name you want to share, and hit Enter. In this example, I am will embed Burj Khalifa (Dubai) location. Feel free to look for any other location, and follow the rest of the steps mentioned below
- Click the Menu or Option icon as highlighted in the below image
- Hit the Share or Embed Map option
- Now you will be give a link that you can share with anyone if you want. To embed map within content or blog, click Embed Map option
- Copy the Embed code
- The Embed Code for Google Map works like YouTube Video Embed code. You can use this code to embed anywhere on your blog or within article to embed this map
- Note : This method can be used to share a certain place or location, because it will keep showing Burj Khalifa on the map regardless of the country you are checking this from
How to customize and Embed Google Map so that it can adapt users’ current location
Explanation : You want to embed google map to your website for nearby restaurants. Such embedded maps should change the location according to users’ current location. So when someone visits this page from New York, it should show restaurant near to the website visitor in New York. And when someone visits this page from Paris, it should show restaurants in Paris. Here is an embedded example of finding restaurants near me.
The issue with the Google’s Embed Code
You can type Restaurants Near Me or Supermarkets Near Me in Google Map to search, just like you search a certain location. Google will show all the Supermarkets or Restaurants near you. When you embed this code, the location Google Maps showed you, the same location will be shown to all users, whether they are visiting from the same country/place or a different country.
The Solution to Customize the Google Map
Use this embed code
<iframe style="border: 0;" src="//maps.google.com/maps?q=supermarkets+near+me&output=embed" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen">
Note : You can adjust the Width and Height, and mention a different number. The thing you need to change in the embed code is “supermarkets+near+me.” There must be plus sign (+) after each word. You can add as many words as you want. For example, beauty+salon+near+me. Don’t change any other things, and use this embed code like you embed YouTube Videos to your blog/website.
Check these 2 examples;