Google Maps , Openlayers or Mapbox?

Openlayers or Mapbox or Google Maps?

Mapbox GL JS (standing for Graphics Library) is a JavaScript library that allows you to create maps that can include interactive data.

OpenLayers is an open source JavaScript library used for displaying map data in web browsers.

Mapbox has the best customization features, hands down. Google Maps is less flexible – for instance, it forces you to use its default base layer, while Mapbox does not. Ease of Integration: This really depends on the experience that your developers and designers have with the APIs and their SDKs.

Google map also has a mapping cluster but if compared to Mapbox, it has limited features of styling.

Using Link to the Google docs on Embedded Maps pricing. (free)

https://developers.google.com/maps/documentation/embed/get-started

<div className="map-container" style={‌{padding: "5px"}}>

  <iframe title="map" width="100%" height="100%" frameBorder="0" 
    scrolling="no" marginHeight="0" marginWidth="0"   src= 
   {'https://maps.google.com/maps?q=' + props.coordinates.lat.toString() + ',' + props.coordinates.lng.toString() + 
 '&t=&z=15&ie=UTF8&iwloc=&output=embed'}></iframe>
    <script type='text/javascript' src='https://embedmaps.com/google- 
   maps-authorization/script.js? 
  id=5a33be79e53caf0a07dfec499abf84b7b481f165'>
  </script>

</div>

Note: The source leads the map to a specific place based on coordinates. So, the coordinates we got earlier in the lesson from the URL of Google Maps when we searched for Empire State Building are parsed as a string so they could be properly interpreted and understood as one big URL link which as transmited to src and searched for. The result is a place on the map that you desire, based on the given coordinates.

Using OpenLayers

Make sure you got the following imports in your section in the public/index.html file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>

//Map.js
import React, { useRef, useEffect } from 'react';

import './Map.css';

const Map = props => {
  const mapRef = useRef();

  const { center, zoom } = props;

  useEffect(() => {
    new window.ol.Map({
      target: mapRef.current.id,
      layers: [
        new window.ol.layer.Tile({
          source: new window.ol.source.OSM()
        })
      ],
      view: new window.ol.View({
        center: window.ol.proj.fromLonLat([center.lng, center.lat]),
        zoom: zoom
      })
    });
  }, [center, zoom]);

  return (
    <div
      ref={mapRef}
      className={`map ${props.className}`}
      style={props.style}
      id="map"
    ></div>
  );
};

export default Map;