Click here to Skip to main content
15,882,209 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
hi guys i'm new web developer and i want create responsive map in website.
is there any way to do that? what is the best software for web design?

What I have tried:

i tried working with xd and html.
Posted
Updated 25-Jul-23 4:51am
Comments
Mike Hankey 25-Jul-23 10:05am    
programming pro
In the years to come and throughout your career4r you will find that Mr. Google is your best friend.
Second we cannot guess what kind of site you are creating; what platform, what language, what your skill level is and most important no one will do it for you!

1 solution

Given you have tagged your query as HTML & Javascript, as Mike suggested, first link for me is: 5 Ways to Add Responsive Google Maps to Your Website[^]

For a simple Google map, here’s the easiest method from another reference here[^]:

1. Go to the Google Maps website.
2. Search for the location you want to feature in your embedded map.
3. Click Share.
4. Click Embed a map to see a preview of the embed. Here, you can toggle the map area, zoom, type (street map or satellite map), and size (including a custom size if you’d like)
5. When ready to embed, click Copy HTML.
6. In your HTML file, paste the embed code where you want the map to appear on the page. The code will look something like this (it may look different depending on the size your chose for your map:
7. Save the HTML file and open the file in a web browser to view the map in action.
8. Make our embedded map responsive with a bit of extra HTML and CSS
Code:
1. take your existing embed code and place it in your HTML document. Then, wrap the <iframe> element (which represents the map) in a container <div> with the class google-map.
HTML
<div class="google-map">
     <iframe src="[your unique google URL] " width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

2. Next, in your CSS, add the following code:
CSS
.google-map {
     padding-bottom: 50%;
     position: relative;
}

.google-map iframe {
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
     position: absolute;
}
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900