@manhnguyenv

Welcome to my blog!

Integrate Google Maps APIs inside an Angular 2 application

June 16, 2017 16:57

Angular 2

https://angular.io/

 

Angular 2+ Google Maps Components

https://github.com/SebastianM/angular-google-maps

https://angular-maps.com/

 

Google Map API

https://developers.google.com/maps/documentation/javascript/examples/directions-simple

 

GMaps: Find directions between locations

https://developers.google.com/maps/documentation/directions/

 

Get API Key

https://developers.google.com/maps/documentation/javascript/get-api-key

 

Angular 2 + Google Maps Places Autocomplete

http://brianflove.com/2016/10/18/angular-2-google-maps-places-autocomplete/

 

 

Angular 2 google map implementation

https://stackoverflow.com/questions/38879993/angular-2-google-map-implementation

 

An Example

<!DOCTYPE html>
<html>
 
<head>
   
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   
<meta charset="utf-8">
   
<title>Directions service</title>
   
<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;
     
}
     
#floating-panel {
       
position: absolute;
       
top: 10px;
       
left: 25%;
       
z-index: 5;
       
background-color: #fff;
       
padding: 5px;
       
border: 1px solid #999;
       
text-align: center;
       
font-family: 'Roboto','sans-serif';
       
line-height: 30px;
       
padding-left: 10px;
     
}
   
</style>
 
</head>
 
<body>
   
<div id="floating-panel">
   
<b>Start: </b>
   
<select id="start">
     
<option value="chicago, il">Chicago</option>
     
<option value="st louis, mo">St Louis</option>
     
<option value="joplin, mo">Joplin, MO</option>
     
<option value="oklahoma city, ok">Oklahoma City</option>
     
<option value="amarillo, tx">Amarillo</option>
     
<option value="gallup, nm">Gallup, NM</option>
     
<option value="flagstaff, az">Flagstaff, AZ</option>
     
<option value="winona, az">Winona</option>
     
<option value="kingman, az">Kingman</option>
     
<option value="barstow, ca">Barstow</option>
     
<option value="san bernardino, ca">San Bernardino</option>
     
<option value="los angeles, ca">Los Angeles</option>
   
</select>
   
<b>End: </b>
   
<select id="end">
     
<option value="chicago, il">Chicago</option>
     
<option value="st louis, mo">St Louis</option>
     
<option value="joplin, mo">Joplin, MO</option>
     
<option value="oklahoma city, ok">Oklahoma City</option>
     
<option value="amarillo, tx">Amarillo</option>
     
<option value="gallup, nm">Gallup, NM</option>
     
<option value="flagstaff, az">Flagstaff, AZ</option>
     
<option value="winona, az">Winona</option>
     
<option value="kingman, az">Kingman</option>
     
<option value="barstow, ca">Barstow</option>
     
<option value="san bernardino, ca">San Bernardino</option>
     
<option value="los angeles, ca">Los Angeles</option>
   
</select>
   
</div>
   
<div id="map"></div>
   
<script>
     
function initMap() {
       
var directionsService = new google.maps.DirectionsService;
       
var directionsDisplay = new google.maps.DirectionsRenderer;
       
var map = new google.maps.Map(document.getElementById('map'), {
          zoom
: 7,
          center
: {lat: 41.85, lng: -87.65}
       
});
        directionsDisplay
.setMap(map);

       
var onChangeHandler = function() {
          calculateAndDisplayRoute
(directionsService, directionsDisplay);
       
};
        document
.getElementById('start').addEventListener('change', onChangeHandler);
        document
.getElementById('end').addEventListener('change', onChangeHandler);
     
}

     
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        directionsService
.route({
          origin
: document.getElementById('start').value,
          destination
: document.getElementById('end').value,
          travelMode
: 'DRIVING'
       
}, function(response, status) {
         
if (status === 'OK') {
            directionsDisplay
.setDirections(response);
         
} else {
            window
.alert('Directions request failed due to ' + status);
         
}
       
});
     
}
   
</script>
   
<script async defer
   
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCBS8Jddb4PO_tVbA_-p_HJvyjv-L_8JVM&callback=initMap">
   
</script>
 
</body>
</html>

Categories

Recent posts