CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3mapsgoogle-maps-markers
KJ_kaka
KJ_kaka

Reputation: 241

Change co-ordinate on map

<!DOCTYPE html>
<html>
    <head>
      <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD83DW4cuDAMp0Zf2GkEXGFqnBAewN5qko"></script>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="map" style="width: 100%; height: 400px;"></div>

        <script type="text/javascript">
          function init(locations){
            var element = document.getElementById("map");

            var mapTypeIds = [];
            for(var type in google.maps.MapTypeId) {
                mapTypeIds.push(google.maps.MapTypeId[type]);
            }
            mapTypeIds.push("OSM");

            var map = new google.maps.Map(element, {
              center: new google.maps.LatLng(parseInt(locations[0].lat), parseInt(locations[0].lng)),
                                zoom: 6,
              mapTypeId: "OSM",
              mapTypeControlOptions: {
                mapTypeIds: mapTypeIds
              }
            });

            var infoWindow = new google.maps.InfoWindow(), marker, i;

            for (i = 0; i < locations.length; i++) {  
              marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
                map: map,
                draggable:true,
                // title: locations[i].lat
                // icon: image
              });

              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                  infoWindow.setContent(locations[i].infowindow);
                  infoWindow.open(map, marker);
                }
              })(marker, i));

              var mapTypeIds = [];
              for(var type in google.maps.MapTypeId) {
                  mapTypeIds.push(google.maps.MapTypeId[type]);
              }
              mapTypeIds.push("OSM");

              map.mapTypes.set("OSM", new google.maps.ImageMapType({
                getTileUrl: function(coord, zoom) {
                    return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
                },
                tileSize: new google.maps.Size(256, 256),
                name: "OpenStreetMap",
                maxZoom: 18
              }));
            }
          }
          // long 77.4028193  lat 23.2243851
          var locations = [{"lat":"21.2243851","lng":"77.4028193","infowindow":" information1 "},{"lat":"17.433282","lng":"78.426762","infowindow":" information2 "}];
          var locations1 = [{"lat":"24.2243851","lng":"77.4028193","infowindow":" information1 "},{"lat":"17.434282","lng":"78.426762","infowindow":" information2 "}];


          window.onload = init(locations);
          window.setInterval( function(){console.log("first fn");change(locations1);}, 3500);
          window.setInterval( function(){console.log("second fn");change(locations);}, 1500);
          function change(locations){
            console.log(locations);

            var mapTypeIds = [];
            for(var type in google.maps.MapTypeId) {
                mapTypeIds.push(google.maps.MapTypeId[type]);
            }
            mapTypeIds.push("OSM");
            var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 6,
              center: {lat: parseInt(locations[0].lat), lng: parseInt(locations[0].lng)},
              mapTypeId: "OSM",
              mapTypeControlOptions: {
                mapTypeIds: mapTypeIds
              }
            });

            // var map = google.maps.Map(document.getElementById("map"));
            var infoWindow = new google.maps.InfoWindow(), marker, i;
            for (i = 0; i < locations.length; i++) {  

              var marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
              });
              marker.setMap(map);
              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                  infoWindow.setContent(locations[i].infowindow);
                  infoWindow.open(map, marker);
                }
              })(marker, i));
              var mapTypeIds = [];
              for(var type in google.maps.MapTypeId) {
                mapTypeIds.push(google.maps.MapTypeId[type]);
              }
              mapTypeIds.push("OSM");

              map.mapTypes.set("OSM", new google.maps.ImageMapType({
                getTileUrl: function(coord, zoom) {
                    return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
                },
                tileSize: new google.maps.Size(256, 256),
                name: "OpenStreetMap",
                maxZoom: 18
              }));
            }
          }

        </script>
    </body>
</html>

without reloading/refreshing googlemap markers to be replaced. Tried all the ways provided by google-map api and other blogs. nothing helping me, atlast posting here hoping someone helps me with this part.

I have copied complete code here so that it helps to get on to the issue on which I am trying to solve.

Upvotes: 0

Views: 142

Answers (2)

yu wayne
yu wayne

Reputation: 40

Here I do.Is this right. I modified some of your code to make sure if this what you wish. I think you just miss some detail. If this is what you want, please let me know. PS :A lot of forloop in the function change-->not a good example.XD

<script type="text/javascript">
 var map;
 var markersArray=[];//put all markers into this
      function init(locations){
        var element = document.getElementById("map");

        var mapTypeIds = [];
        for(var type in google.maps.MapTypeId) {
            mapTypeIds.push(google.maps.MapTypeId[type]);
        }
        mapTypeIds.push("OSM");

        map = new google.maps.Map(element, {
          center: new google.maps.LatLng(parseInt(locations[0].lat), parseInt(locations[0].lng)),
                            zoom: 6,
          mapTypeId: "OSM",
          mapTypeControlOptions: {
            mapTypeIds: mapTypeIds
          }
        });

        var infoWindow = new google.maps.InfoWindow(), marker, i;

        for (i = 0; i < locations.length; i++) {            
          var mapTypeIds = [];
          for(var type in google.maps.MapTypeId) {
              mapTypeIds.push(google.maps.MapTypeId[type]);
          }
          mapTypeIds.push("OSM");

          map.mapTypes.set("OSM", new google.maps.ImageMapType({
            getTileUrl: function(coord, zoom) {
                return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
            },
            tileSize: new google.maps.Size(256, 256),
            name: "OpenStreetMap",
            maxZoom: 18
          }));
        }
      }

      var locations = [{"lat":"21.2243851","lng":"77.4028193","infowindow":" information1 "},{"lat":"20.433282","lng":"78.426762","infowindow":" information2 "}];
      var locations1 = [{"lat":"24.2243851","lng":"77.4028193","infowindow":" information1 "},{"lat":"22.434282","lng":"78.426762","infowindow":" information2 "}];

      var counter=0;
      window.onload = init(locations);
      window.setInterval( function(){
        if(counter%2==0)
        {
         change(locations1);
        }
         else
        {
         change(locations);
        }
        counter++;
    }, 2000);


      function change(locations){

          for (i = 0; i < locations.length; i++) 
          {  
            if(markersArray[i]!=null)
            {
                markersArray[i].setMap(null);
                if (i == locations.length - 1) {
                    markersArray = [];
                }
            }   
          }

          for (i = 0; i < locations.length; i++) 
          {    
            var marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i].lat, locations[i].lng)  }); 
            markersArray.push(marker);    

          }
          for (i = 0; i < markersArray.length; i++)
         {
               markersArray[i].setMap(map);
         }

      }

    </script>

Upvotes: 1

Jason Tham
Jason Tham

Reputation: 123

We had a similar problem to what you are experiencing. The way we solved it was by recalculating the bounds and recentering the map each time a new location is added. So basically we have a createMarker function that has this bit of code at the end:

const map_center = bounds.getCenter();
      resultsMap.setCenter(map_center);
      resultsMap.panToBounds(bounds);
      resultsMap.fitBounds(bounds);

Where bounds here is your map boundaries, which can be found with the google.maps.LatLngBounds() method.

EDIT: I see you want to do it without refreshing the map, I don't think resetting the bounds refreshes the map but I could be wrong about that.

Upvotes: 0

Related Questions