JSFiddle - React, Tailwind, and code Playground
by blowsie
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<div id="map"></div>
CSS
#map {
height:350px;
width:350px;
}
JavaScript
var infowindow = new google.maps.InfoWindow();
var locations = {
"one": {
"latLng": new google.maps.LatLng(52.511467, 13.447179),
"name": "A",
"address": "Street A"
},
"two": {
"latLng": new google.maps.LatLng(52.549061, 13.422975),
"name": "B",
"address": "Street A"
},
"three": {
"latLng": new google.maps.LatLng(52.497622, 13.396110),
"name": "C",
"address": "Street A"
},
"four": {
"latLng": new google.maps.LatLng(52.517683, 13.394393),
"name": "D",
"address": "Street A"
}
};
var markers = [];
var iterator = 0;
var map = "";
var icon = new google.maps.MarkerImage("https://dl.dropbox.com/u/14037764/marker_sprite.png", new google.maps.Size(30, 35), new google.maps.Point(0, 0));
var shadow = new google.maps.MarkerImage('https://dl.dropbox.com/u/14037764/marker_sprite.png', new google.maps.Size(25, 25), new google.maps.Point(30, 10), new google.maps.Point(5, 35));
var styles = [{
"stylers": [{
"invert_lightness": true
}]
}];
var style = new google.maps.StyledMapType(styles, {
name: "Twat"
});
function initialize() {
var mapOptions = {
zoom: 8,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'Twat']
}
//mapTypeId: [google.maps.MapTypeId.ROADMAP, 'twat'],
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.mapTypes.set('Twat', style);
map.setMapTypeId('Twat');
}
function updateMarkers() {
// Set Vars / Reset
var i = 0;
var marker;
//Empty Markers Array and remove from gMap
$.each(markers, function (k, v) {
v.setMap(null);
});
markers.length = 0;
// Reset Bounds
var bounds = new google.maps.LatLngBounds();
// Plot New Markers & Info Windows based on the current locations
$.each(locations, function (k, v) {
// Create, Extend Bounds & Fit to Screen
bounds.extend(v.latLng);
map.fitBounds(bounds);
// Create Marker
marker = new google.maps.Marker({
...