[FIXED] How do I add google map in satellite on iframe

Issue

I am adding a google maps iframe to my website, the problem is I want it to display as satellite view instead of street view. This is an example iframe for Antarctica:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d16858886.629529595!2d0!3d-75.05434995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xa4b9967b3390754b%3A0x6e52be1f740f2075!2sAntarctica!5e0!3m2!1sen!2sin!4v1627212267326!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

I got the iframe by following this article since I don't want to insert it using an API key.

How would I add a Google Map defaulting to satellite mode in an iframe?

Solution

Before you click on "Share" in Google maps change map type to satellite.

Answered By - dnekolny

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)

Read More

[FIXED] How to correct smooth moving the marker in google maps v2?

Issue

In my application needs to display a smooth "move" google maps marker from one point to another. I use the following method for the animation:

public void animateMarker(final Marker marker, final LatLng toPosition,
                          final boolean hideMarker) {
    final Handler handler = new Handler();
    final long start = SystemClock.uptimeMillis();
    Projection proj = mMap.getProjection();
    Point startPoint = proj.toScreenLocation(marker.getPosition());
    final LatLng startLatLng = proj.fromScreenLocation(startPoint);
    final long duration = 500;

    final Interpolator interpolator = new LinearInterpolator();

    handler.post(new Runnable() {
        @Override
        public void run() {
            long elapsed = SystemClock.uptimeMillis() - start;
            float t = interpolator.getInterpolation((float) elapsed
                    / duration);
            double lng = t * toPosition.longitude + (1 - t)
                    * startLatLng.longitude;
            double lat = t * toPosition.latitude + (1 - t)
                    * startLatLng.latitude;
            marker.setPosition(new LatLng(lat, lng));

            if (t < 1.0) {
                // Post again 16ms later.
                handler.postDelayed(this, 16);
            } else {
                if (hideMarker) {
                    marker.setVisible(false);
                } else {
                    marker.setVisible(true);
                }
            }
        }
    });
}

But as a result of simply creating a new marker to the new location (though old is not removed):

Solution

I copied some of the code from the project mentioned in the official video.

I tried to reproduce it with this code and this seems to be working for me, so hopefully my code would help you, even for a bit.

static final LatLng SomePos = new LatLng(37.7796354, -122.4159606);

    try {
        if (googleMap == null) {
            googleMap = ((MapFragment) getFragmentManager().findFragmentById(R.id.map)).getMap();
        }
        googleMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);
        googleMap.setMyLocationEnabled(true);
        googleMap.setTrafficEnabled(false);
        googleMap.setIndoorEnabled(false);
        googleMap.setBuildingsEnabled(true);
        googleMap.getUiSettings().setZoomControlsEnabled(true);
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(SomePos));
        googleMap.moveCamera(CameraUpdateFactory.newCameraPosition(new CameraPosition.Builder()
                .target(googleMap.getCameraPosition().target)
                .zoom(17)
                .bearing(30)
                .tilt(45)
                .build()));

        myMarker = googleMap.addMarker(new MarkerOptions()
                .position(SomePos)
                .icon(BitmapDescriptorFactory.fromResource(R.mipmap.ic_launcher))
                .title("Hello world"));


        googleMap.setOnMarkerClickListener(new GoogleMap.OnMarkerClickListener()
        {
            @Override
            public boolean onMarkerClick(Marker arg0) {

                final LatLng startPosition = myMarker.getPosition();
                final LatLng finalPosition = new LatLng(37.7801569,-122.4148528);
                final Handler handler = new Handler();
                final long start = SystemClock.uptimeMillis();
                final Interpolator interpolator = new AccelerateDecelerateInterpolator();
                final float durationInMs = 3000;
                final boolean hideMarker = false;

                handler.post(new Runnable() {
                    long elapsed;
                    float t;
                    float v;

                    @Override
                    public void run() {
                        // Calculate progress using interpolator
                        elapsed = SystemClock.uptimeMillis() - start;
                        t = elapsed / durationInMs;
                        v = interpolator.getInterpolation(t);

                        LatLng currentPosition = new LatLng(
                                startPosition.latitude*(1-t)+finalPosition.latitude*t,
                                startPosition.longitude*(1-t)+finalPosition.longitude*t);

                        myMarker.setPosition(currentPosition);

                        // Repeat till progress is complete.
                        if (t < 1) {
                            // Post again 16ms later.
                            handler.postDelayed(this, 16);
                        } else {
                            if (hideMarker) {
                                myMarker.setVisible(false);
                            } else {
                                myMarker.setVisible(true);
                            }
                        }
                    }
                });

                return true;

            }

        });

    } catch (Exception e) {
        e.printStackTrace();
    }

Answered By - kaho

Answer Checked By - Timothy Miller (PHPFixing Admin)

Read More

[FIXED] How do you reference a process.env variable in HTML <script src="" ? React

Issue

I have a react app and am using dotenv-webpack to manage my API keys.

I have: - created a .env with the API keys and gitignored it. - required and added dotenv as a plugin in webpack.config.js.

After that, I've been able to reference one of the keys in a .js file by using process.env.api_key. But I am having problems trying to reference it in index.html in the script tag.

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
    <script src="https://maps.googleapis.com/maps/api/js?key=process.env.GOOGLEMAP_API_KEY"></script>
  </head>
  <body>
    <div class="container"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

How do I reference the process.env.API_key here?

<script src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]"></script>

I have tried using backquotes that work in .js file, like so ${API_KEY}, but that does not work in the .html file.

Solution

I put the following code in componentWillMount where the map renders and it worked (at least in development: const API_KEY = process.env.GOOGLEMAP_API_KEY; const script = document.createElement('script'); script.src = https://maps.googleapis.com/maps/api/js?key=${API_KEY}; document.head.append(script);

I was able to get this to work using the code posted by bigmugcup in the comments above. I did not modify the webpack.config.js file.

Answered By - Tbot

Answer Checked By - Robin (PHPFixing Admin)

Read More

[FIXED] How to add many GoogleMaps-Marker in cakePHP on a map

Issue

i've an little AddressDB with about 100 Addresses. So now i added the Helpper from https://github.com/marcferna/CakePHP-GoogleMapHelper.

I know how i can add on address to the view. But how do i add all the addresses to one map?

Can every help me please?

Many thanks in advance

Marcus

Solution

Why are you adding a comma?

<?php $this->GoogleMap->addMarker("map_canvas",1, $atla['Atla']['street'].' '.$atla['Atla']['number'].', '.$atla['Atla']['zipcode'].' '.$atla['Atla']['city'],$atla['Atla']['name'])?> <?php endforeach; ?>

should probably be

<?php $this->GoogleMap->addMarker("map_canvas",1, $atla['Atla']['street'].' '.$atla['Atla']['number'].', '.$atla['Atla']['zipcode'].' '.$atla['Atla']['city'].','.$atla['Atla']['name'])?> <?php endforeach; ?>

But: How about http://www.dereuromark.de/2010/12/21/googlemapsv3-cakephp-helper/ ? It is probably a more complete alternative.

As documented you can use

$this->GoogleMapV3->addMarker($options);

any many times as you want. I tried it with 500 and - although at this point you might want to switch to clusters - it still worked.

Answered By - mark

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)

Read More

[FIXED] show database data(lat,long) and print them as markers on google map by using laravel

Issue

I know this question seems like it has been asked before, but none of them as i saw could answer my problem, the problem is that I'm having an error when getting my latitude & longitude data from database and can't show markers in google map on javascript part, I can get my database(lan,lng) in my view normally, but could not print them as markers on google map, the markers don't show at all, i think it's because i put all the script inside the initMap().now all i want is to show my database data (lan,lng) on google map as markers .any help would be appreciated. excuse my bad English

the Code

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
<!--
      @foreach ($position as $location)

      <p>{{$location->lat}}</p>
      <p>{{$location->long}}</p>

      @endforeach
-->
    <!--The div element for the map -->
    <div id="map"></div>
    <script src="https://js.pusher.com/5.0/pusher.min.js"></script>

    <script>
        // Initialize and add the map
        function initMap() {
            // The location of Uluru
            var uluru = {lat: -25.344, lng: 131.036};
            // The map, centered at Uluru
            var map = new google.maps.Map(
            document.getElementById('map'), {zoom: 4, center: uluru});
            // The marker, positioned at Uluru
            //  var marker = new google.maps.Marker({position: uluru, map: map});

            // Enable pusher logging - don't include this in production
            Pusher.logToConsole = true;

            var pusher = new Pusher('5945d552dbd1e6bb3107', {
                cluster: 'ap2',
                forceTLS: true
            });

            var channel = pusher.subscribe('location');
            channel.bind("App\\Events\\SendLocation", function(data) {
                //        alert('An event was triggered with message: ' + data);
                var uluru = {lat: parseFloat(data.location.lat), lng: parseFloat(data.location.long)};

                var uluru= [
                    @foreach ($position as $location)
                        [  "{{ $location->lat }}", "{{ $location->long }}" ], 
                    @endforeach
                ];        

                var marker = new google.maps.Marker({position: uluru, map: map});
            });
        }
    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=my-api-key&callback=initMap"
    async defer></script>

  </body>
</html>

Solution

finally i solved my problem, i did it by using Ajax and it worked well,

also this way shows how to bring the database data(lat,lng) and print them as markers on the Map (without using Ajax). hope it helps the others :)

var uluru = {lat: -25.344, lng: 131.036};

        var locations = [
    @foreach ($information as $location)
        [ {{ $location->latitude }}, {{ $location->longitude }} ],
    @endforeach
    ];


  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: uluru});

for (i = 0; i < locations.length; i++) {
        var location = new google.maps.LatLng(locations[i][0], locations[i][1]);

        var marker = new google.maps.Marker({
            position: location,
            map: map,
        }); 
    };

Answered By - Ala'a

Read More

[FIXED] How to show 2 destination waypoints when entering an origin and destination address, and the waypoint will be optional

Issue

The waypoints direction are working well, I just need to show the directions when we just put a origin address and destination1 address and the destination2 will be an optional.

I'm having a problem that the waypoints direction will only be shown when we put a origin, destination1, and also destination2 address. is there any solution??

    function AutocompleteDirectionsHandler(map) {
  this.map = map;
  this.originPlaceId = null;
  this.destinationPlaceId = null;
  this.destinationPlaceId2 = null;

  this.travelMode = 'DRIVING';
  this.directionsService = new google.maps.DirectionsService;
  this.directionsRenderer = new google.maps.DirectionsRenderer;
  this.directionsRenderer.setMap(map);

  var originInput = document.getElementById('start');
  var destinationInput = document.getElementById('waypoints');
  var destinationInput2 = document.getElementById('end');

  //var modeSelector = document.getElementById('mode-selector');

  var originAutocomplete = new google.maps.places.Autocomplete(originInput);
  // Specify just the place data fields that you need.
  originAutocomplete.setFields(['place_id']);

  var destinationAutocomplete2 =
      new google.maps.places.Autocomplete(destinationInput);
      destinationAutocomplete2.setFields(['place_id']);

      var destinationAutocomplete =
      new google.maps.places.Autocomplete(destinationInput2);
  // Specify just the place data fields that you need.
  destinationAutocomplete.setFields(['place_id']);




  this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
  this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');
  this.setupPlaceChangedListener(destinationAutocomplete2, 'DEST2');

}

AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(
    autocomplete, mode) {
  var me = this;
  autocomplete.bindTo('bounds', this.map);


  autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();

    if (!place.place_id) {
      window.alert('Please select an option from the dropdown list.');
      return;
    }
    if (mode === 'ORIG') {
      me.originPlaceId = place.place_id;
    } else if (mode === 'DEST'){
      me.destinationPlaceId = place.place_id;
    }
     else if(mode=== 'DEST2'){
        me.destinationPlaceId2 = place.place_id;
     }


    me.route();
  });
};

AutocompleteDirectionsHandler.prototype.route = function() {
  if (!this.originPlaceId || !this.destinationPlaceId || !this.destinationPlaceId2) {
    return;
  }
  var me = this;

    var waypts = [];
  var checkboxArray = document.getElementsByClassName('waypoints');
  for (var i = 0; i < checkboxArray.length; i++) {
    var address = checkboxArray[i].value;
    if (address !== '') {
      waypts.push({
        location: address,
        stopover: true
      });
    }
  }

  this.directionsService.route(
      {
        origin: {'placeId': this.originPlaceId},
        destination: {'placeId': this.destinationPlaceId},
        waypoints: waypts,
        optimizeWaypoints: true,
        travelMode: this.travelMode
      },
      function(response, status) {
        if (status === 'OK') {
          me.directionsRenderer.setDirections(response);

// For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
            '</b><br>';
        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
      }


        } else {
          window.alert('Directions request failed due to ' + status);
        }
      });
};

Solution

This is the line that forces all three entries before generating the route:

if (!this.originPlaceId || !this.destinationPlaceId || !this.destinationPlaceId2) {
  return;
}

Change that to something like:

if (!this.originPlaceId || !this.destinationPlaceId) {
  return;
}

Then it will route with only two inputs.

Then to optionally add the waypoint:

var waypts = [];
if (!!this.destinationPlaceId2) {
  waypts.push({
    location: {
      'placeId': this.destinationPlaceId2
    },
    stopover: true
  });
}

proof of concept fiddle

two entries:

three entries:

code snippet:

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script
// src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    mapTypeControl: false,
    center: {
      lat: -33.8688,
      lng: 151.2195
    },
    zoom: 13
  });

  new AutocompleteDirectionsHandler(map);
}

/**
 * @constructor
 */
function AutocompleteDirectionsHandler(map) {
  this.map = map;
  this.originPlaceId = null;
  this.destinationPlaceId = null;
  this.destinationPlaceId2 = null;

  this.travelMode = 'DRIVING';
  this.directionsService = new google.maps.DirectionsService;
  this.directionsRenderer = new google.maps.DirectionsRenderer;
  this.directionsRenderer.setMap(map);

  var originInput = document.getElementById('start');
  var destinationInput = document.getElementById('waypoints');
  var destinationInput2 = document.getElementById('end');

  //var modeSelector = document.getElementById('mode-selector');

  var originAutocomplete = new google.maps.places.Autocomplete(originInput);
  // Specify just the place data fields that you need.
  originAutocomplete.setFields(['place_id']);

  var destinationAutocomplete2 =
    new google.maps.places.Autocomplete(destinationInput);
  destinationAutocomplete2.setFields(['place_id']);

  var destinationAutocomplete =
    new google.maps.places.Autocomplete(destinationInput2);
  // Specify just the place data fields that you need.
  destinationAutocomplete.setFields(['place_id']);

  this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
  this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');
  this.setupPlaceChangedListener(destinationAutocomplete2, 'DEST2');

}

AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(
  autocomplete, mode) {
  var me = this;
  autocomplete.bindTo('bounds', this.map);


  autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();

    if (!place.place_id) {
      window.alert('Please select an option from the dropdown list.');
      return;
    }
    if (mode === 'ORIG') {
      me.originPlaceId = place.place_id;
    } else if (mode === 'DEST') {
      me.destinationPlaceId = place.place_id;
    } else if (mode === 'DEST2') {
      me.destinationPlaceId2 = place.place_id;
    }
    me.route();
  });
};

AutocompleteDirectionsHandler.prototype.route = function() {
  console.log("originPlaceId=" + this.originPlaceId + " destinationPlaceId=" + this.destinationPlaceId + " destinationPlaceId2=" + this.destinationPlaceId2)
  if (!this.originPlaceId || !this.destinationPlaceId) {
    return;
  }

  var me = this;

  var waypts = [];
  if (!!this.destinationPlaceId2) {
    waypts.push({
      location: {
        'placeId': this.destinationPlaceId2
      },
      stopover: true
    });
  }

  this.directionsService.route({
      origin: {
        'placeId': this.originPlaceId
      },
      destination: {
        'placeId': this.destinationPlaceId
      },
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: this.travelMode
    },
    function(response, status) {
      if (status === 'OK') {
        me.directionsRenderer.setDirections(response);
        var route = response.route[0];
        // For each route, display summary information.
        for (var i = 0; i < route.legs.length; i++) {
          var routeSegment = i + 1;
          summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
            '</b><br>';
          summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
          summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
          summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
        }


      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
};

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 70%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.controls {
  margin-top: 10px;
  border: 1px solid transparent;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 32px;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#start,
#waypoints,
#end {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 200px;
}

#start:focus,
#waypoints:focus,
#end:focus {
  border-color: #4d90fe;
}

#mode-selector {
  color: #fff;
  background-color: #4d90fe;
  margin-left: 12px;
  padding: 5px 11px 0px 11px;
}

#mode-selector label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}

<div>
  <input id="start" class="controls" type="text" placeholder="Enter an origin location">

  <input id="end" class="controls" type="text" placeholder="Enter a destination location">

  <input id="waypoints" class="controls" type="text" placeholder="Enter a destination location">

  <div id="mode-selector" class="controls">
    <input type="radio" name="type" id="changemode-walking" checked="checked">
    <label for="changemode-walking">Walking</label>

    <input type="radio" name="type" id="changemode-transit">
    <label for="changemode-transit">Transit</label>

    <input type="radio" name="type" id="changemode-driving">
    <label for="changemode-driving">Driving</label>
  </div>
</div>

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>

Answered By - geocodezip

Read More

[FIXED] How to Display Multiple Gmaps Markers in Laravel 8?

Issue

I want to show multiple gmaps markers on dashboard. This marker data, taken from the database. I've coded like this, but it still doesn't work.

Controller

public function index()
{
    $markers = Report::select('location','latitude','longitude')->get()->toArray();
    
    // dd($markers);
    return view('dashboard', compact('markers'));
}

and in blade, i made like this. This I got the reference from google documentation

Blade

@section('styles')
<style>
    /* Set the size of the div element that contains the map */
    #map {
    height: 400px;
    /* The height is 400 pixels */
    width: 100%;
    /* The width is the width of the web page */
    }
</style>
<script>

function initMap() {
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 10,
        center: { lat: -6.261493, lng: 106.810600 },
});

setMarkers(map);
}

const locations = <?php print_r(json_encode($markers)) ?>;

function setMarkers(map) {

const image = {
    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32),
};

const shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: "poly",
};

for (let i = 0; i < locations.length; i++) {
    const location = locations[i];

    new google.maps.Marker({
    position: { lat: parseFloat(location[1]), lng: parseFloat(location[2]) },
    map,
    icon: image,
    shape: shape,
    title: location[0],
    zIndex: location[3],
    });

    console.log(locations[i]);
    }
}

</script>

@endsection

...
...
<div class="col-12">
    <div class="card">
         <div class="card-body">
               <div id="map"></div>
         </div>
    </div>
</div>
...
...

If I look in the console, the output is shown like this.

Console.log

How to fix it? Thank You

Solution

SOLVED. this case can be solved by using collection map in controller

    public function index()
    {
        $markers = Report::select('location','latitude','longitude')->get();

        $markers = $markers->map(function ($item, $key){
            return [$item->location, $item->latitude, $item->longitude];
        });

        return view('dashboard', compact('markers'));
    }

Answered By - Hilmi Hidayat

Read More