Google Maps how to get to show only one marker?

2019-06-05 06:53发布

站内问答 / JavaScript
1127 2 4

i've been dealing with this couple of hours and i still cant figure how to do it.

my objective is to display only one marker when searching addresses close to each other.

below you have the code i use in my html in order to search for addresses, note - i'm developing a windows application that does such, in which case you might find some missing stuff to do actions by clicking buttons since this is done via .NET windows application

html code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<script type="text/javascript" src="http://maps.google.com.mx/maps/api/js?sensor=true&language=es"></script>
<script type="text/javascript">

       var G = google.maps;
       var map;
       var geocoder = new G.Geocoder();
       var marker;
       var markersArray = [1];

        function initialize() {
          createMap();
          geocode('Chicago');
        }

        function createMap() {
            var myOptions = {
                center: new G.LatLng(0,0),
                zoom: 17,
                mapTypeId: G.MapTypeId.ROADMAP
            }
            map = new G.Map(document.getElementById("map_canvas"), myOptions);
        }

function geocode(address){
            geocoder.geocode({ 'address': (address ? address : "Miami Beach, Florida")}, function (results, status) {
                if (status == G.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);

                        marker = new G.Marker({
                        map: map,
                        animation: google.maps.Animation.DROP,
                        position: results[0].geometry.location
                        });


                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });

        }


        </script>
      </head>
      <body onload="initialize()">
        <div id="map_canvas" style="width:100%; height:100%"></div>

      </body>
    </html>

reading previous posts i know that if/else statement has to be used but cant get it right.

your help is very appreciated.

Leo P.

2条回答
男人必须洒脱
2楼-- · 2019-06-05 06:56

Create only one marker as a global variable and change its position as needed. Like that you also save memory because you're not creating a new marker object on each request:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style>
    html, body {width:100%; height:100%}
    </style>

    <script type="text/javascript" src="http://maps.google.com.mx/maps/api/js?sensor=true&language=es"></script>
    <script type="text/javascript">

           var G = google.maps;
           var map;
       var marker;
           var geocoder = new G.Geocoder();


            function initialize() {
              createMap();
              geocode('Chicago');
            }

            function createMap() {
                var myOptions = {
                    center: new G.LatLng(0,0),
                    zoom: 17,
                    mapTypeId: G.MapTypeId.ROADMAP
                }
                map = new G.Map(document.getElementById("map_canvas"), myOptions);

// Create a single marker, (global variable), and don't give it a position just yet.
        marker = new G.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        });

            }

    function geocode(address){
                geocoder.geocode({ 'address': (address ? address : "Miami Beach, Florida")}, function (results, status) {
                    if (status == G.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);

                //Position the marker
                marker.setPosition(results[0].geometry.location);

                    } else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                });

            }


            </script>
          </head>
          <body onload="initialize()">
            <div id="map_canvas" style="width:100%; height:100%"></div>

          </body>
        </html>
查看更多
0人赞 添加讨论(0) 举报
做自己的国王
3楼-- · 2019-06-05 07:05

You can add a small bit of code to the beginning of your Geocode function that will remove the previous marker before setting a new one. Try this:

function geocode(address){
    if (marker) {
        marker.setMap(null);
    }
    geocoder.geocode({ 'address': (address ? address : "Miami Beach, Florida")}, function (results, status) {
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)