fonteva-design-guide
Version:
## Dev, Build and Test
73 lines (68 loc) • 2.51 kB
HTML
<html lang="en">
<head>
<title>Map iFrame</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=AIzaSyCmg71UHGeaDKjszoNazRjlVtGcl9KMj2o"></script>
</head>
<body>
<span class="slds">
<div id="map" style="display: none;"></div>
</span>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var service = new google.maps.places.PlacesService(map);
var componentForm = {
street_number: {type : 'short_name',objectValue : 'street_number'},
route: {type : 'long_name',objectValue : 'street_name'},
premise: {type : 'short_name',objectValue : 'street_name'},
locality: {type : 'long_name',objectValue : 'city'},
postal_town: {type : 'long_name',objectValue : 'city'},
administrative_area_level_1: {type : 'short_name',objectValue : 'province'},
country: {type : 'long_name',objectValue : 'country'},
postal_code: {type : 'short_name',objectValue : 'postal_code'},
postal_code_prefix : {type : 'short_name',objectValue : 'postal_code'}
};
function receiveMessage(event) {
if (event.data.type === 'query') {
var service = new google.maps.places.AutocompleteService();
service.getPlacePredictions({
input: event.data.query,
types: ['geocode']
}, function (predictions, status) {
var predictionsObj = {identifier : event.data.identifier,
predictions : predictions,
type : 'queryResult',
query : event.data.query};
numberOfTimes = 0;
parent.window.postMessage(predictionsObj,'*');
}
);
}
else if (event.data.type === 'placeDetail') {
var service = new google.maps.places.PlacesService(map);
service.getDetails({
placeId: event.data.placeId
}, function (place, status) {
var addressObject = {};
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType].type];
addressObject[componentForm[addressType].objectValue] = val;
}
}
var placeObj = {
identifier: event.data.identifier,
place: addressObject,
type: 'placeDetail'
};
parent.window.postMessage(placeObj, '*');
});
}
}
window.addEventListener("message", receiveMessage, false);
</script>
</body>
</html>