Hi webdevs!

I’m building a small side project by coding it step by step and posting updates here on my progress.

Plan is to go from the first line of code to launching on Product Hunt and Hacker News. If it seems interesting for you, follow me along with this!

? Map Builder for Remote Teams

Twitter updates: https://twitter.com/raunometsa
More detailed progress (with code): https://makehub.io/blog/mapbuilder

? HTML mockup

I started with a simple HTML mockup with:
– map (using Mapbox as it’s familiar to me and it has some nice styles!)
– textfield for adding cities
– company logo + name
– cities / countries / timezones that will be counted when adding locations

r/webdev - Building in public: Remote Team Maps

HTML mockup

? Searching cities

So first I need a way to search cities by name. I think probably the best way for this is to use Google Maps Places API.

I include the API in my <head> section:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&libraries=places&callback=initAutocomplete" defer></script>    

Which calls for initAutocomplete() function when loaded:

var autocomplete;
function initAutocomplete() {
    autocomplete = new google.maps.places.Autocomplete(
        document.getElementById('autocomplete'),
        {types: ['geocode']}
    );

    autocomplete.addListener('place_changed', fillInAddress);
}

And this turns the textfield with id=”autocomplete” into a Google Maps Autocomplete search & dropdown like this:

To be continued (come back for updates) …





Source link

Write A Comment