JSFiddle - React, Tailwind, and code Playground
by frapporti
HTML
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
<script type="text/javascript">
var app = {};
function drawmap2() {
map = app.map;
var infowindow;
var service ;
function initialize(lat,lng)
{
var origin = new google.maps.LatLng(lat,lng);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: origin,
zoom: 16
});
var request = {
location: origin,
radius: 2500,
types: ['train_station','bus_station','subway_station','transit_station']
};
infowindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
service.search(request, 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 image = {
url: 'http://fornacestudio.com/sharedimg/icon-bus-stop.png',
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 17),
scaledSize: new google.maps.Size(25, 25)
};
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
icon: image,
position: place.geometry.location
});
var content='<strong style="font-size:1.2em">'+place.name+'</strong>'+
'<br/><strong>Latitude:</strong>'+placeLoc.lat()+
'<br/><strong>Longitude:</strong>'+placeLoc.lng()+
'<br/><strong>Type:</strong>'+place.types[0]+
'<br/><strong>Rating:</strong>'+(place.rating||'n/a');
var more_content='<img...