JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="divMap"></div>
CSS
#divMap {
width: 640px;
height: 480px;
}
JavaScript
var searchResults = {"100065":{"Rank":100065,"ID":100065,"Country":"France","Department":null,"CityName":"Paris","ZipCode":"75019","PropertyType":"Apartment","Title":"Super sweet villa100065","Address":"","Price":45000.0000,"Longitude":2.386708,"Latitude":48.890614,"HideAddress":false,"Zone":null,"IsAgency":true,"Image":null,"ImageContentType":""}};
var map = null;
var imgBluePin = '<%= ResolveUrl("~/images/pin_blue.png") %>';
var imgGreenPin = '<%= ResolveUrl("~/images/pin_green.png") %>';
var bounds = new google.maps.LatLngBounds();
var markers = [];
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(47.5200, 2.1959),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('divMap'), myOptions);
}
$(document).ready(function () {
ResetMap();
});
function ResetMap() {
initialize();
showListingsOnMap();
}
function showListingsOnMap() {
for (var index in searchResults) {
showAddressesOnMap(
searchResults[index].ID,
searchResults[index].Title,
searchResults[index].Image,
searchResults[index].ImageContentType,
searchResults[index].Latitude,
searchResults[index].Longitude,
searchResults[index].Address,
searchResults[index].CityName,
searchResults[index].Zone,
searchResults[index].ZipCode,
searchResults[index].Country,
searchResults[index].IsAgency,
searchResults.length);
}
}
function GetLocationString(address, city, zone, zip, country) {
var locationString = address;
if (city != undefined && city.length > 0) {
locationString += ", " + city;
}
if...