JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map_div"> </div>
CSS
*{ padding:0; margin:0; }
#map_div{
width:400px;
height:400px;
border:6px solid #F4F4F4;
margin:20px;
}
JavaScript
//------- Google Maps ---------//
// Creating a LatLng object containing the coordinate for the center of the map
var latlng = new google.maps.LatLng(53.385846,-1.471385);
// Creating an object literal containing the properties we want to pass to the map
var options = {
zoom: 15, // This number can be set to define the initial zoom level of the map
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP // This value can be set to define the map type ROADMAP/SATELLITE/HYBRID/TERRAIN
};
// Calling the constructor, thereby initializing the map
var map = new google.maps.Map(document.getElementById('map_div'), options);
// Define Marker properties
var image = new google.maps.MarkerImage('http://www.evoluted.net/images/marker.png',
// This marker is 129 pixels wide by 42 pixels tall.
new google.maps.Size(129, 42),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 18,42.
new google.maps.Point(18, 42)
);
var image2 = new google.maps.MarkerImage('http://www.evoluted.net/images/marker.png',
// This marker is 129 pixels wide by 42 pixels tall.
new google.maps.Size(129, 42),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 18,42.
new google.maps.Point(18, 42)
);
// Add Markers
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(53.385846,-1.471385),
map: map,
icon: image // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(53.38489,-1.476953),
map: map,
icon: image2 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
// Add listener for a click on the pin
google.maps.event.addListener(marker1, 'click', function() {
...