Form Select change pin into Google Map

Question

I'm using this code for google maps, the maps in this example is showing 3 pins and it's working fine.

<script>
function loadGmapAPI()
{
    var script = document.createElement("script");
    script.src = "https://maps.googleapis.com/maps/api/js?key=[[API HERE]]&callback=initMap";
    script.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(script);
}

function initMap() {
    var pinone = {
        info: '<p>html here</p>`]]',
        lat: 10.000,
        long: -10.000
    };
    var pintwo = {
        info: '<p>html here</p>`]]',
        lat: 20.000,
        long: -20.000
    };
    var pinthree = {
        info: '<p>html here</p>`]]',
        lat: 30.000,
        long: -30.000
    };
    var locations = [
        [pinone.info, 10.000.lat, -10.000.long],
        [pintwo.info, 20.000.lat, -20.000.long],
        [pinthree.info, 30.000.lat, -30.000.long],
    ];
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: new google.maps.LatLng(5.000,-5.000),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow({});
    var marker, i;
    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
                smoothScroll();
            }
        })(marker, i));
    }
}

Once the map is loaded, I need display only two of the Pins using select inputs in a form:

<form id="form">

    <select id="selectFrom">
        <option value=""></option>
        <option value="pinone" data-lat="10.000" data-long="-10.000">Pin One</option>
        <option value="pintwo" data-lat="20.000" data-long="-20.000">Pin Two</option>
        <option value="pinthree" data-lat="30.000" data-long="-30.000">Pin Three</option>
    <select>

    <select id="selectTo">
        <option value=""></option>
        <option value="pinone" data-lat="10.000" data-long="-10.000">Pin One</option>
        <option value="pintwo" data-lat="20.000" data-long="-20.000">Pin Two</option>
        <option value="pinthree" data-lat="30.000" data-long="-30.000">Pin Three</option>
    <select>

</form>

The data-lat and data-long are just optional I don't know if is really necessary.

what is the best way to do it?

Why you have two selects? And what do you mean with `only two of the Pins` which ones? You want to limit the max amount of selected pins? In that case you would needs to have some references between the forms. I think you should go with a one select which allows multiple selections, see http://stackoverflow.com/questions/4135210/html-multiselect-limit — timaschew, Mar 20 '17 at 17:10

score 0 · Answer 1 · answered Mar 20 '17 at 13:57

Try these steps:

Set your markers' visible property to false, so they start hidden:

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    visible: false // <- add this
});

Add your markers to an array, for further reference:

<script>
var markers = []; // <- add this at the beggining or anywhere outside any scope
...
var marker = new google.maps.Marker({ ... });

markers.push(marker);

Being markers a global variable(declare it outside any function in your document).

Add a change event to the select elements:

$("#form").on("change", "select", function() {
    var indexFrom = $('#selectFrom').get(0).selectedIndex - 1,
        indexTo = $('#selectTo').get(0).selectedIndex - 1;

    // Hide all
    markers.forEach(x => x.setVisible(false));

    // Show marker 'From'
    if (indexFrom >= -1) {
        markers[indexFrom].setVisible(true);
    }

    // Show marker 'To'
    if (indexTo >= -1) {
        markers[indexTo].setVisible(true);
    }
});

setVisible() in Map's API docs.

I could not test it, did from the top of my head. Let me know if you have any issues.

Form Select change pin into Google Map

1 Answers1