how to create mutiple rectangle on gmaps? Ask Question

I want to create multiple rectangle on gmaps but I don’t know where must I put the code.

This is my sample code

 function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 5,
      center: {lat: 37.0924, lng: -119.4179324},
      mapTypeId: 'terrain'
    });

	var contentString = '<div id="content">'+
        '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large 
        '</div>';
		
	  var infowindow = new google.maps.InfoWindow({
      content: contentString
    });

    var rectangle = new google.maps.Rectangle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      bounds: 
      new google.maps.LatLngBounds
  <?php 
	  $con = mysqli_connect("localhost","root","","test");
	  
	  $query=mysqli_query($con,"SELECT * FROM map");
	  $cc=mysqli_fetch_array($query);
	  ?>
      (
        new google.maps.LatLng (<?php echo $cc['nelat']; ?>, <?php echo $cc['nelng']; ?>),
		new google.maps.LatLng (<?php echo $cc['swlat']; ?>, <?php echo $cc['swlng']; ?>),
        ),

      
    });
	  rectangle.addListener('click', function() {
      infowindow.open(map, rectangle);
    });
  }
    #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Rectangles</title>
   
  </head>
  <body>
    <div id="map"></div>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAogXD-AHrsmnWinZIyhRORJ84bgLwDPpg&callback=initMap">
  </script>
</body>
</html>

Google maps api. The algorithm gives not correct results Ask Question

Task: show the points from excel prepared, which lie along the route (for example, Moscow-Bryansk). The algorithm is below. The problem is that the points that lie on the path (with their usual output) are not found by the algorithm. Has anyone encountered a similar problem?

 directionsService.route(request, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay = new google.maps.DirectionsRenderer();
        directionsDisplay.setMap(map);
        directionsDisplay.setDirections(result);
        calcNearDots(result);
    } else {
        if (status == "ZERO_RESULTS") {
            alert("Ошибка. Невозможно проложить маршрут.");
        } else {
            alert("Ошибка");
        }
        toggleVoile();
    }
});

function calcNearDots(route) {
var steps = route.routes[0].legs[0].steps;
for (i in steps) {
    var arr = {
        'lat': steps[i].start_location.lat(),
        'lng': steps[i].start_location.lng()
    };

    closests = closests.concat(findClosestMarker(arr, radius));

}
}
function rad(x) {
    return x * Math.PI / 180;
}

function findClosestMarker(dot, radius) {
   var lat = dot.lat;
   var lng = dot.lng;
   var R = 6371;
   var dots = [];
   //gmarkers массив который содержит точки из экселя 
   for (var i = 0; i < gmarkers.length; i++) {
        var mlat = gmarkers[i].position.lat();
        var mlng = gmarkers[i].position.lng();
        var dLat = rad(mlat - lat);
        var dLong = rad(mlng - lng);
        var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(rad(lat)) * Math.cos(rad(lat)) * Math.sin(dLong / 2) * Math.sin(dLong / 2);

        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        var d = R * c;

        if (d < radius) {
            dots.push(gmarkers[i].id);
        }
    }

    return dots;
}

Google Maps – Create marker on click on blank map Ask Question

I run into a problem with blank maps and maps with existing markers.

A user can add a new marker to a map or move an existing marker by dragging or clicking anywhere on a map. This is no problem as long as there already is a marker.

This is an example of my code with two maps. One without a marker, the other one with a marker.

<script>
  function initMap() {
    var myLatLng_1 = {lat: 20.782, lng: 10.177};
    var myLatLng_2 = {lat: 50.864, lng: 20.996};

    var myOptions_1 = {zoom: 6, center: myLatLng_1, draggableCursor: 'crosshair'};
    var myOptions_2 = {zoom: 6, center: myLatLng_2, draggableCursor: 'crosshair'};

    var myMap_1 = new google.maps.Map(document.getElementById('myMap_1'), myOptions_1);
    var myMap_2 = new google.maps.Map(document.getElementById('myMap_2'), myOptions_2);

    var myMarker_2 = new google.maps.Marker({position: myLatLng_2, map: myMap_2, draggable: true});

    google.maps.event.addListener(myMarker_2, 'dragend', function() {
      myMap_2.panTo(myMarker_2.getPosition());
    });

    google.maps.event.addListener(myMap_1, 'click', function(e) {
      myMarker_1.setPosition(e.latLng);
      myMap_1.panTo(myMarker_1.getPosition());
    });

    google.maps.event.addListener(myMap_2, 'click', function(e) {
      myMarker_2.setPosition(e.latLng);
      myMap_2.panTo(myMarker_2.getPosition());
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=APlkSyA9oDVEF5v74FiMMk-9VOnlRrgGO8z_Yayo&callback=initMap"></script>

How do I have to modify my “click” addListener so that it creates a new marker if there is no one but also let me set an existing marker to a new position?

Draw curved /Arc dotted polyline in angular-google-maps Ask Question

I want to draw a curved / Arc dotted polyline between two latitude and longitude.
I end up always drawing a straight line between two latitude and longitude.

Can any please help me with drawing a curved dotted polyline…?

I have used this reference ,
and also angular-google-maps

Both ends up with straight line.

 <ui-gmap-polyline ng-repeat="p in mc.polylines" path="p.path" 
     stroke="p.stroke" visible='p.visible'
     geodesic='p.geodesic' fit="false" editable="p.editable" 
     draggable="p.draggable" icons='p.icons'>
 </ui-gmap-polyline>

</ui-gmap-google-map>

I am hereby sharing my
plunker link

Please help to draw a curved line like this

enter image description here

Even if i give geodesic = true, The curvature is not to that extend. It seems like straight line.

Thank you

Google Maps Markers in wrong location, but lat/lon appears correct Ask Question

I am using custom markers to show a semi-live view of the location and orientation (heading) of certain vehicles of interest overlayed on Google Maps. (In my case, I’m depicting aircraft, the same way Uber does for cars, or how FlightAware does for commercial flights).

The coordinates for the markers are being broadcast in JSON format to participating browsers from a server that I control. The JSON data is processed by a JavaScript function at the browser to create / update the markers on the Google map. The refresh (broadcast) rate can sometimes be as fast as once every 2-seconds, or as slow as once every 30 seconds, depending on the particular user’s needs of the moment.

Sometimes, it is possible (and valid) for two markers to be thousands of miles apart from each other. For example, one marker could be in Montana, and the other could be somewhere in Africa, and this is a valid condition.

However, sometimes, when I am zoomed into a region of the world so I can look more closely at one marker, a “ghost” marker appears nearby that “isn’t really located there”. The ghost marker is labeled as one of the other markers that may be hundreds or thousands of miles away, but it’s showing up in my zoomed in view for some strange reason. If I momentarily zoom in our out, the ghost disappears, but it may re-appear again.

Interestingly, the ghost image has the proper orientation for the vehicle it represents, but it’s just located in the wrong part of the world.

Are there any special things I should be doing when I’m updating multiple markers separated by large distances so they don’t show up like this in the wrong place?

I have traced this as far as putting console messages in the browser so I can see the lat/lon of each marker being depicted. I output the latLng object just before it’s applied to each marker, and the lat/lon I see in the console log is correct, even when the actual marker shows up in the wrong place.

I don’t know if this is a contributor to the problem, but the marker images I’m using are custom PNG files, not standard Google makers. Has anybody run into this before?

How can I get smooth markers (SVG icons) on Google Maps? Ask Question

I create a marker to place on a Google map:

var compMarker = new google.maps.Marker({
    position: {lat: 33, lng: -118}
    map: map,
    label: {
        text: "10",
        color: "white",
        fontWeight: "bold"
    },
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 15,
        fillColor: "#4E90D9",
        fillOpacity: 1,
        strokeWeight: 1
    }
});

This is the result:

screenshot of resulting map

As you can see the circle is pretty choppy looking. Is there a way to create a high quality circle?

Add markers from firebase to google map in website Ask Question

Firebase data structure :

enter image description here

I need to add markers in the google map using these latlang.

My code :

    <script>
    var map;

    function initMap() {

        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 6.930274, lng: 79.861618},
          zoom: 16.5,
          panControl: false,
          gestureHandling: 'greedy',
          disableDefaultUI: true,
          disableDoubleClickZoom: true,
        });

        var dbRef= firebase.database().ref('bins');
        dbRef.on('value', function(snapshot) {
            var snap = snapshot.val();
            var marker = new google.maps.Marker({
              position: {lat: snap.lat, lng: snap.lang},
              map: map
            });
        });
    }
</script>

Nothing happened when this code runs.

Offset google map and fix marker Ask Question

I’m trying to do something like this:

enter image description here

Where I have form on right half of screen and marker centered on left side of screen. Moving map – marker will stay in center of left side, and I will get LatLng from the marker(Visualy, but that is offseted center) on Map move.

For now I have centered marker on map and I can move map and get LatLng from center.

This is script that do that:

            var map = null;
            var marker;

            function showlocation() {
                if ("geolocation" in navigator) {
                    /* geolocation is available */
                    // One-shot position request.
                    navigator.geolocation.getCurrentPosition(callback, error);
                } else {
                    /* geolocation IS NOT available */
                    console.warn("geolocation IS NOT available");
                }
            }

            function error(err) {
                console.warn('ERROR(' + err.code + '): ' + err.message);
            };

            function callback(position) {

                var lat = position.coords.latitude;
                var lon = position.coords.longitude;
                document.getElementById('default_latitude').value = lat;
                document.getElementById('default_longitude').value = lon;
                var latLong = new google.maps.LatLng(lat, lon);
                map.setZoom(16);
                map.setCenter(latLong);
            }
           // google.maps.event.addDomListener(window, 'load', initAutocomplete);


            function initAutocomplete() {
                var mapOptions = {
                    center: new google.maps.LatLng(42.4405026181028, 19.24323633505709),
                    zoom: 16,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("map"),
                    mapOptions);
                google.maps.event.addListener(map, 'center_changed', function () {
                    document.getElementById('default_latitude').value = map.getCenter().lat();
                    document.getElementById('default_longitude').value = map.getCenter().lng();

                });
                $('<div/>').addClass('centerMarker').appendTo(map.getDiv())
                    .click(function () {
                        var that = $(this);
                        if (!that.data('win')) {
                            that.data('win', new google.maps.InfoWindow({
                                content: 'this is the center'
                            }));
                            that.data('win').bindTo('position', map, 'center');
                        }
                        that.data('win').open(map);
                    });

And I have marker centered in CSS:

#map .centerMarker {
    position: absolute;
    /*url of the marker*/
    background: url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;
    /*center the marker*/
    top: 50%;
    left: 50%;
    z-index: 1;
    /*fix offset when needed*/
    margin-left: -10px;
    margin-top: -34px;
    /*size of the image*/
    height: 34px;
    width: 20px;
    cursor: pointer;
}

I just need to offset all of this for 25% to the left from the center and keep 50% of right screen for the form.

Google Maps API error: MissingKeyMapError – I do have it but it is not recognize Ask Question

I have the google API key but the browser doesn’t recognize that. You can go my site: rodcurvelo.com, click contact and you will see the error.

The browser says also:

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

Here is my code:

         <div class="map-area" id="map-contact">
          <script async defer src="http://maps.googleapis.com/maps/api/js?libraries=geometry&ampsensor=false&ampkey=AIzaSyDwPJ1GDAq8GFIQmlMYyRFId7wRtQTFUF8"></script>
         </div>

       <div class="hidden map-contact-body">
        <div class="map-content">
          <h4 class="no-margin-top font-alt">Iam Here</h4>
          <p><i class="fa fa-map-marker"></i> <strong>Address:</strong> 8723 Bogor, West Java</p>
          <p><i class="fa fa-mobile"></i> <strong>Phone:</strong> 87-3898-221 </p>
          <p><i class="fa fa-envelope"></i> <strong>Email:</strong> someone@company.com</p>
        </div>
      </div>
      <!--END MAP-->
      <!-- maps js -->
       <script src="http://maps.googleapis.com/maps/api/js?sensor=false"type="text/javascript"></script>
       <script src="assets/plugins/jquery.ui.map.js"></script> 


      //theme.js
      //Run function When Document Ready
      $(document).ready(function() {
         initMap();

      });

          //Map
          function initMap() {
          $('#map-contact').gmap({
          'center': '27.867473, -82.637582',
          'zoom': 15,
           scrollwheel: false,
          'disableDefaultUI': false,
          'callback': function() {
          var self = this;
          self.addMarker({
           'position': this.get('map').getCenter(),
            icon: 'assets/theme/images/marker.png'
            }).click(function() {
            self.openInfoWindow({
            'content': $('.map-contact-body').html()
          }, this);
        });
       }
     });
    }