CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
mahesh
mahesh

Reputation: 17

How to declare marker outside the initialize() function to avoid the map reload when coordinates changes?

I tried many example but not getting it.

I need to change my code so that when long, latitude changes the map should not reload.

I tried declaring marker outside initialize and tried creating another function seperately for marker its not working, what changes had to be done to work it out.

This is my page:

<!DOCTYPE html>
<html>
<head>
    <script src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
    <script>
        function initialize() {
            x = document.getElementById("x").value;
            y = document.getElementById("y").value;

            var latLng = new google.maps.LatLng(x, y);

            var mapProp = {
                center: latLng,
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

            var marker1 = new google.maps.Marker({
                position: latLng,
                title: 'Point A',

                draggable: true,

            });

            marker1.setMap(map);

            var ne0 = new google.maps.LatLng(25.774252, -80.190262);
            var ne01 = new google.maps.LatLng(18.466465, -66.118292);
            var ne02 = new google.maps.LatLng(32.321384, -64.75737);

            var n0 = new google.maps.LatLng(23.774252, -78.190262);
            var n01 = new google.maps.LatLng(17.466465, -65.118292);
            var n02 = new google.maps.LatLng(16.466465, -63.118292);
            var n03 = new google.maps.LatLng(30.321384, -64.75737);

            var zone = [
                n0, n01, n02, n03
            ];
            var zone0 = [
                ne0, ne01, ne02, ne0
            ];

            var dzone = new google.maps.Polygon({
                paths: zone,
                strokeColor: "#0000FF",
                strokeOpacity: 1.5,
                strokeWeight: 2,
                fillColor: "#ff0000",
                fillOpacity: 1,
                clickable: false
            });
            dzone.setMap(map);

            var dzone0 = new google.maps.Polygon({
                paths: zone0,
                strokeColor: "#0000FF",
                strokeOpacity: 1.5,
                strokeWeight: 2,
                fillColor: "#ff0000",
                fillOpacity: 1,
                clickable: false
            });
            dzone0.setMap(map);

            google.maps.event.addListener(marker1, 'dragend', function(e) {
                var result;
                if (google.maps.geometry.poly.containsLocation(e.latLng, dzone)) {

                    window.alert("Danger!");;
                    document.body.style.backgroundColor = "red";
                } else if (google.maps.geometry.poly.containsLocation(e.latLng, dzone0)) {

                    window.alert("Danger!");;
                    document.body.style.backgroundColor = "red";
                } else {
                    document.body.style.backgroundColor = "white";
                }

                var m = new google.maps.Marker({
                    position: e.latLng,
                    map: map,
                    icon: 'pi.png'
                })
            });
            google.maps.event.trigger(marker1, 'dragend', {
                latLng: marker1.getPosition()
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>

<body>
    <div id="googleMap" style="width:500px;height:380px;"></div>
        Langtitude <input id="x" type="number" value = "25.774252" onkeyup="initialize('x')">

        latitude <input id="y" type="number"value = "-80.190262" onkeyup="initialize('y')"><br> <br>
        <button type="button" onclick="initialize()">Submit</button> &nbsp;
    </div>
</body>
</html>

Upvotes: 1

Views: 1781

Answers (1)

Bruno Ribeiro
Bruno Ribeiro

Reputation: 6197

You are calling initialize function every time that button in clicked:

<button type="button" onclick="initialize()">Submit</button>

First of all, let's create a function called updateMarker, like this:

function updateMarker() {
    var lat = document.getElementById("x").value;
    var lng = document.getElementById("y").value;
    var latLng = new google.maps.LatLng(lat, lng);
    marker1.setPosition(latLng);
    map.panTo(latLng);
}

An turn marker1 and map global variables, like this:

var map;
var marker1;

function initialize() {}

Then, we need update at least the button. Will look like this:

<div id="googleMap" style="width:500px;height:380px;"></div>
    Longitude <input id="x" type="number" value = "25.774252">

    Latitude <input id="y" type="number"value = "-80.190262"><br> <br>
    <button type="button" onclick="updateMarker()">Submit</button> &nbsp;
</div>

This is just a example, you will need change to update your Polygon.

Here the complete HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
    <script>
        var map;
        var marker1;

        function initialize() {
            var x = document.getElementById("x").value;
            var y = document.getElementById("y").value;

            var latLng = new google.maps.LatLng(x, y);

            var mapProp = {
                center: latLng,
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

            marker1 = new google.maps.Marker({
                position: latLng,
                title: 'Point A',

                draggable: true,
            });

            marker1.setMap(map);

            var ne0 = new google.maps.LatLng(25.774252, -80.190262);
            var ne01 = new google.maps.LatLng(18.466465, -66.118292);
            var ne02 = new google.maps.LatLng(32.321384, -64.75737);

            var n0 = new google.maps.LatLng(23.774252, -78.190262);
            var n01 = new google.maps.LatLng(17.466465, -65.118292);
            var n02 = new google.maps.LatLng(16.466465, -63.118292);
            var n03 = new google.maps.LatLng(30.321384, -64.75737);

            var zone = [
                n0, n01, n02, n03
            ];
            var zone0 = [
                ne0, ne01, ne02, ne0
            ];

            var dzone = new google.maps.Polygon({
                paths: zone,
                strokeColor: "#0000FF",
                strokeOpacity: 1.5,
                strokeWeight: 2,
                fillColor: "#ff0000",
                fillOpacity: 1,
                clickable: false
            });
            dzone.setMap(map);

            var dzone0 = new google.maps.Polygon({
                paths: zone0,
                strokeColor: "#0000FF",
                strokeOpacity: 1.5,
                strokeWeight: 2,
                fillColor: "#ff0000",
                fillOpacity: 1,
                clickable: false
            });
            dzone0.setMap(map);

            google.maps.event.addListener(marker1, 'dragend', function(e) {
                var result;
                if (google.maps.geometry.poly.containsLocation(e.latLng, dzone)) {

                    window.alert("Danger!");;
                    document.body.style.backgroundColor = "red";
                } else if (google.maps.geometry.poly.containsLocation(e.latLng, dzone0)) {

                    window.alert("Danger!");;
                    document.body.style.backgroundColor = "red";
                } else {
                    document.body.style.backgroundColor = "white";
                }

                var m = new google.maps.Marker({
                    position: e.latLng,
                    map: map,
                    icon: 'pi.png'
                })
            });
            google.maps.event.trigger(marker1, 'dragend', {
                latLng: marker1.getPosition()
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);
        
        function updateMarker() {
            var lat = document.getElementById("x").value;
            var lng = document.getElementById("y").value;
            var latLng = new google.maps.LatLng(lat, lng);
            marker1.setPosition(latLng);
            map.panTo(latLng);
        }
    </script>
</head>

<body>
    <div id="googleMap" style="width:500px;height:380px;"></div>
        Longitude <input id="x" type="number" value = "25.774252">

        Latitude <input id="y" type="number"value = "-80.190262"><br> <br>
        <button type="button" onclick="updateMarker()">Submit</button> &nbsp;
    </div>
</body>
</html>

Upvotes: 2

Related Questions