How can I set the address (with line breaks) on this code below? The relevant part of my code –where the correction should be made– can be found after the // display window on the Map
comment line.
At the moment the formatting is done with normal div
s, but I want it with the standard styling of the Google Maps Info Window.
function initialize() {
var mapOptions = {
zoom: zoom,
center: latglong,
scrollwheel: false,
streetViewControl: false,
mapTypeControl: false
};
map = new google.maps.Map(document.getElementById('oh-event-map-canvas'), mapOptions);
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.getDetails({
placeId: 'my id'
}, function(place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
// display window on the Map
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<div><b>' + place.name + '</b><br>' +
'Street <br> Postalcode City <br>Country <br><div class="view-link"> <a target="_blank" href="https://www.google.de//maps/place/adsfasdfadsfadf"> <span>In Google Maps ansehen</span> </a> </div>')
infowindow.open(map, this);
});
}
});
}
You could use the "place address" parsing from this example in the Google Maps Javascript API v3 documentation
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function fillInAddress(place) {
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
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]];
document.getElementById(addressType).value = val;
}
}
}
related HTML (hidden):
<table id="address">
<tr>
<td class="label">Street address</td>
<td class="slimField">
<input class="field" id="street_number" disabled="true" />
</td>
<td class="wideField" colspan="2">
<input class="field" id="route" disabled="true" />
</td>
</tr>
<tr>
<td class="label">City</td>
<!-- Note: Selection of address components in this example is typical.
You may need to adjust it for the locations relevant to your app. See
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
-->
<td class="wideField" colspan="3">
<input class="field" id="locality" disabled="true" />
</td>
</tr>
<tr>
<td class="label">State</td>
<td class="slimField">
<input class="field" id="administrative_area_level_1" disabled="true" />
</td>
<td class="label">Zip code</td>
<td class="wideField">
<input class="field" id="postal_code" disabled="true" />
</td>
</tr>
<tr>
<td class="label">Country</td>
<td class="wideField" colspan="3">
<input class="field" id="country" disabled="true" />
</td>
</tr>
</table>
code snippet:
var latglong = new google.maps.LatLng(37.4419, -122.1419); var zoom = 13; function initialize() { var mapOptions = { zoom: zoom, center: latglong, scrollwheel: false, streetViewControl: false, mapTypeControl: false }; map = new google.maps.Map(document.getElementById('oh-event-map-canvas'), mapOptions); google.maps.event.addListener(map, 'click', function(evt) { console.log(evt); }) var infowindow = new google.maps.InfoWindow(); var service = new google.maps.places.PlacesService(map); service.getDetails({ placeId: 'ChIJHz4XFiW7j4ARCIp120CAcFE' }, function(place, status) { if (status === google.maps.places.PlacesServiceStatus.OK) { fillInAddress(place); var marker = new google.maps.Marker({ map: map, position: place.geometry.location }); // display window on the Map google.maps.event.addListener(marker, 'click', function() { infowindow.setContent('<div><b>' + place.name + '</b><br>' + document.getElementById('street_number').value + ' ' + document.getElementById('route').value + '<br>' + document.getElementById('locality').value + ' ' + document.getElementById('postal_code').value + ' ' + document.getElementById('administrative_area_level_1').value + '<br>' + document.getElementById('country').value + '<br><div class="view-link"> <a target="_blank" href="https://www.google.de//maps/place/adsfasdfadsfadf"> <span>In Google Maps ansehen</span> </a> </div>') infowindow.open(map, this); }); } }); } google.maps.event.addDomListener(window, "load", initialize); var componentForm = { street_number: 'short_name', route: 'long_name', locality: 'long_name', administrative_area_level_1: 'short_name', country: 'long_name', postal_code: 'short_name' }; function fillInAddress(place) { for (var component in componentForm) { document.getElementById(component).value = ''; document.getElementById(component).disabled = false; } // Get each component of the address from the place details // and fill the corresponding field on the form. 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]]; document.getElementById(addressType).value = val; } } }
html, body, #oh-event-map-canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } #address { display: none; }
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> <div id="oh-event-map-canvas"></div> <table id="address"> <tr> <td class="label">Street address</td> <td class="slimField"> <input class="field" id="street_number" disabled="true" /> </td> <td class="wideField" colspan="2"> <input class="field" id="route" disabled="true" /> </td> </tr> <tr> <td class="label">City</td> <!-- Note: Selection of address components in this example is typical. You may need to adjust it for the locations relevant to your app. See https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform --> <td class="wideField" colspan="3"> <input class="field" id="locality" disabled="true" /> </td> </tr> <tr> <td class="label">State</td> <td class="slimField"> <input class="field" id="administrative_area_level_1" disabled="true" /> </td> <td class="label">Zip code</td> <td class="wideField"> <input class="field" id="postal_code" disabled="true" /> </td> </tr> <tr> <td class="label">Country</td> <td class="wideField" colspan="3"> <input class="field" id="country" disabled="true" /> </td> </tr> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.