Tag Archives: JavaScript、JavaScript / Ajax、Map

Get store information in Google Map

<!DOCTYPE html>
<html>
  <head>
    <title>Place Searches</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script>
      var map;
      var infowindow;

      function initMap() {
        var pyrmont = {lat: -33.867, lng: 151.195};

        map = new google.maps.Map(document.getElementById('map'), {
          center: pyrmont,
          zoom: 15
        });

        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.nearbySearch({
          location: pyrmont,
          radius: 500,
          type: ['store']
        }, callback);
      }

      function callback(results, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
          }
        }
      }

      function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
          map: map,
          position: place.geometry.location
        });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(place.name);
          infowindow.open(map, this);
        });
      }
    </script>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=Key&libraries=places&callback=initMap" ></script>
  </body>
</html>

Output :
get-store-information-in-google-map

addLayer in OpenLayer

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
	<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
	<style>
      .map {
        height: 100%;
        width: 100%;
		
      }
      .ol-popup {
        position: absolute;
        background-color: white;
        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
      }
      .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
      }
      .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
      }
      .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
      }
      .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
      }
      .ol-popup-closer:after {
        content: "✖";
      }
    </style>
  <title>OpenLayers 3 example</title>
  </head>
  <body>
    <div id="map" class="map">
        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content" style="width:300px; height:120px;"></div>
        </div>
    </div> 
	<script type="text/javascript">
		/**
		* Elements that make up the popup.
		*/
		var container = document.getElementById('popup');
		var content = document.getElementById('popup-content');
		var closer = document.getElementById('popup-closer');

		/**
		* Add a click handler to hide the popup.
		* @return {boolean} Don't follow the href.
		*/
		closer.onclick = function() {
			overlay.setPosition(undefined);
			closer.blur();
			return false;
		};

		/**
		* Create an overlay to anchor the popup to the map.
		*/
		var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
			element: container,
			autoPan: true,
			autoPanAnimation: {
				duration: 250 // 當彈出超出地圖邊界時,為了彈出全部可見,地圖移動的速度。單位為毫秒(ms)
			}
		}));
	
		map = new ol.Map({
			target: 'map',
			layers: [
					new ol.layer.Tile({
						source: new ol.source.OSM()
					})
				],
			view: new ol.View({
			  center: ol.proj.transform([114.17232, 22.29958], 'EPSG:4326', 'EPSG:3857'),
			  zoom: 15
			})
		});
		
		var vectorLayer1 = new ol.layer.Vector({
			source:new ol.source.Vector({
				features: [new ol.Feature({
					geometry: new ol.geom.Point(ol.proj.transform([parseFloat(114.17232), parseFloat(22.29958)], 'EPSG:4326', 'EPSG:3857')),
				})]
			}),
			style: new ol.style.Style({
				image: new ol.style.Icon({
					anchor: [0.5, 0.5],
					anchorXUnits: "fraction",
					anchorYUnits: "fraction",
					src: "https://upload.wikimedia.org/wikipedia/commons/e/ec/RedDot.svg"
				})
			})
		});
		map.addLayer(vectorLayer1); 
		
		var vectorLayer2 = new ol.layer.Vector({
			source:new ol.source.Vector({
				features: [new ol.Feature({
					geometry: new ol.geom.Point(ol.proj.transform([parseFloat(114.1704), parseFloat(22.3012)], 'EPSG:4326', 'EPSG:3857')),
				})]
			}),
			style: new ol.style.Style({
				image: new ol.style.Icon({
					anchor: [0.5, 0.5],
					anchorXUnits: "fraction",
					anchorYUnits: "fraction",
					src: "https://upload.wikimedia.org/wikipedia/commons/e/ec/RedDot.svg"
				})
			})
		});
		map.addLayer(vectorLayer2); 

		/**
		* Add a click handler to the map to render the popup.
		*/
		map.on('click', function(e) {
			var feature = map.forEachFeatureAtPixel(e.pixel, function(feature) {
				return feature;
			});
			map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
			    if (layer === vectorLayer1) {
					var coordinate = e.coordinate;
					var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
					coordinate, 'EPSG:3857', 'EPSG:4326'));
					content.innerHTML = '<p>A:</p><code>' + hdms + '</code>';
					overlay.setPosition(coordinate);
					map.addOverlay(overlay);
				}else if (layer === vectorLayer2) {
					var coordinate = e.coordinate;
					var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
					coordinate, 'EPSG:3857', 'EPSG:4326'));
					content.innerHTML = '<p>B:</p><code>' + hdms + '</code>';
					overlay.setPosition(coordinate);
					map.addOverlay(overlay);
				}
			});
		});
	</script>
  </body>
</html>

openlayer-map

OpenLayer – Map

<!doctype html>
<html lang="en">
  <head>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
    <style>
      .map {
        height: 100%;
        width: 100%;
      }
    </style>
    <title>OpenLayers example</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
		center: ol.proj.transform([114.17232, 22.29958], 'EPSG:4326', 'EPSG:3857'),
		zoom: 16
        })
      });
    </script>
  </body>
</html>

openlayer-map

OpenLayer

OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, vector data and markers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the 2-clause BSD License (also known as the FreeBSD).

openlayer

Reference : https://openlayers.org/
Reference : https://www.openstreetmap.org/ ( Latitude and longitude )

Google Map – Message in location point

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-TW"></script>
<script type="text/javascript">
function GoogleMap(){
    this.getMap = function(id, title, longitude, latitude, str){
        $(document).ready(function() {
            var map;
            var myLatlng = new google.maps.LatLng(longitude, latitude);
            var myOptions = {
                zoom: 16,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                streetViewControl: true
            }

            map = new google.maps.Map(document.getElementById(id), myOptions);
            var image = "sort_down.png";
            var location = new google.maps.LatLng(longitude, latitude);
            var marker1 = new google.maps.Marker({
                position: location,
                icon: image,
                map: map
            });

            var infowindow1 = new google.maps.InfoWindow({
                content: str
            });

            var marker1 = new google.maps.Marker({
                position: location,
                icon: image,
                map: map,
                title: title
            });

            google.maps.event.addListener(marker1, 'click', function() {
                infowindow1.open(map,marker1);
            });
        });
    }
}
var googleMap = new GoogleMap();
googleMap.getMap("id", "Title", 22.316374, 114.18040 , "Hello World");
</script>
<div id="id" style="width: 500px; height: 300px;"></div>