1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How can I place 3 markers with user input instead of 1 on Google Maps?

Discussion in 'JavaScript' started by Rico Papillon, Sep 23, 2019.

  1. #1
    I’m trying to learn some new things with Javascript. This time with Google Maps.

    I already can place 1 marker with the user input and I can also give the marker a name. The next step that I want to do is that I can place 3 markers (no more than 3) with the same input field and button that I use now.
    SEMrush
    I’m stuck since 2 days and I already tried some things but I can’t figure it out.
    I hope someone can help me with my code, thanks for the effort!

    index.html
                             <input id="place" type="text">
                                </div>
                                <div>
                                    Name Marker<input id="namemarker" type="text">
                                    <div>
                                        <button id="search">search</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div>
                    <div>
                        <div>
                            <h1>MAP</h1>
                        </div>
                    </div>
                    <div>
                        <div class="divmap"></div>
                    </div>
                </div>
            </div>
        </div>
    
    <script src="js/main.js"></script>
    
    </body>
    
    </html>
    HTML:
    main.js
    var posOptions =     { enableHighAccuracy: false,
        maximumAge: 0,
        timeout: 5000
    };
    
    /**  * Get the current location of the user  */
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showLocation, handleError, posOptions);
        } else {
            console.log ('Not supported');
        }
    }
    
    /**  * Show current location coords of the user  *
    *  @param position object with position info  */
    function showLocation(position) {
        console.log(position.coords.latitude, position.coords.longitude );
    }
    
    function handleError(error) {
        console.log(error.code, error.message );
    }
    
    
    
    getLocation();
    
    var marker;
    var map;
    var namemarker;
    var API_KEY = "AIzaSyBHlzEXk1cGO65POSXz_AYW2DDmKuF6Fv4";
    var mapScript = document.createElement('script');
    mapScript.setAttribute('src', 'https://maps.googleapis.com/maps/api/js?key='+API_KEY+'&callback=initMap' );
    mapScript.setAttribute('async', '' );
    mapScript.setAttribute('defer', '' );
    document.querySelector('body').appendChild(mapScript);
    function initMap() {
        navigator.geolocation.getCurrentPosition(showMap, handleError);
    }
    
    var divMap = document.querySelector(".divmap");
    function showMap(pos) {
        divMap.style.width = '500px';
        divMap.style.height = '500px';
        map = new google.maps.Map(divMap, {
            center:{
                lat: pos.coords.latitude,
                lng: pos.coords.longitude,
            },
            zoom: 16
        });
    
        marker = new google.maps.Marker({
            position: {
                lat: pos.coords.latitude,
                lng: pos.coords.longitude,},
            map:map,
            title:namemarker,
        });
    
    
    }
    
    var search = document.querySelector('#search');
    
    search.addEventListener("click", function (ev) {
        ev.preventDefault();
        showPlace();
    },false);
    
    function showPlace() {
        var loc = document.querySelector('#place');
        namemarker = document.querySelector('#namemarker');
        console.log(loc.value);
    
        var reqUrl = "https://maps.googleapis.com/maps/api/geocode/json?address="+loc.value+"&key="+API_KEY;
    
        fetch(reqUrl)
            .then(function(response) {
                return response.json();
            })
            .then(function (locJson) {
                console.log(locJson);
                var pos = locJson.results[0].geometry.location;
    
                map.panTo(pos);
                marker.setPosition(pos);
                marker.setTitle(namemarker.value);
    
            });
    }
    
    
    Code (JavaScript):
     
    Rico Papillon, Sep 23, 2019 IP
    SEMrush