Customize google map with colored multopointer

Here is the complete file I was working with

Hope this will be helpful to understand the google map options.

<section>
<style>
#map_wrapper {
height: 400px;
}

#map_canvas {
width: 100%;
height: 100%;
}
</style>
<div id=”map_wrapper”>
<div id=”map_canvas” class=”mapping”></div>
</div>
<script>
jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement(‘script’);
script.src = “http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize”;
document.body.appendChild(script);
});

function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: ‘roadmap’
};

// Display a map on the page
map = new google.maps.Map(document.getElementById(“map_canvas”), mapOptions);
map.setTilt(45);

// Multiple Markers
var markers = [
[‘910 N State St Hemet, CA 92543 USA’,33.766328,-116.971256],
[‘6475 Pacific Coast Hwy #355, Long Beach’, 33.75759,-118.108377],
[‘106 W Lime Ave #204 Monrovia, CA 91016’, 34.151887,-118.001415],
[‘4340 Campus Dr #100 Newport Beach, CA 92660 USA’,33.672586,-117.868014],
[‘44901 Village Ct Palm Desert, CA 92260 USA’, 33.726372,-116.361566],
[‘41319 12th St W Palmdale, CA 93551 USA’, 34.633711,-118.152288],
[‘16466 Bernardo Center Dr #260 San Diego, CA 92128 USA’, 33.018124,-117.078421]

];

// Info Window Content
var infoWindowContent = [
[‘<div class=”info_content”>’ +
‘<h3>Hemet Office:</h3>’ +
‘<p>Wallin & Klarich: A Law Corporation 910 North State Street Hemet, CA 92543 (877) 466-5245</p>’ +
‘</div>’],
[‘<div class=”info_content”>’ +
‘<h3>Long Beach Office:</h3>’ +
‘<p> Wallin & Klarich: A Law Corporation 6475 East Pacific Coast Highway Suite 355 Long Beach, CA 90803 (877) 466-5245</p>’ +
‘</div>’],
[‘<div class=”info_content”>’ +
‘<h3>Monrovia Office:</h3>’ +
‘<p>Wallin & Klarich: A Law Corporation 106 West Lime Avenue Suite 204 Monrovia, CA 91016 (877) 466-5245</p>’ +
‘</div>’],
[‘<div class=”info_content”>’ +
‘<h3>Newport Beach Office:</h3>’ +
‘<p> Wallin & Klarich: A Law Corporation 4340 Campus Drive Suite 100 Newport Beach, CA 92660 (877) 466-5245</p>’ +
‘</div>’],
[‘<div class=”info_content”>’ +
‘<h3>Palm Desert Office:</h3>’ +
‘<p> Wallin & Klarich: A Law Corporation 44901 Village Court Suite D Palm Desert, CA 92260 (877) 466-5245</p>’ +
‘</div>’],
[‘<div class=”info_content”>’ +
‘<h3>Palmdale Office:</h3>’ +
‘<p>Wallin & Klarich: A Law Corporation 41319 12th Street West Suite 101 Palmdale, CA 93551 (877) 466-5245</p>’ +
‘</div>’],
[‘<div class=”info_content”>’ +
‘<h3>Rancho Bernardo Office:</h3>’ +
‘<p>Wallin & Klarich: A Law Corporation 16466 Bernardo Center Drive Suite 260 Rancho Bernardo, CA 92128 (877) 466-5245</p>’ +
‘</div>’]
];

// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;

// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
icon :’http://wklaw.wpengine.com/wp-content/themes/wklaw/img/pointer.png’
});

// Allow each marker to have an info window
google.maps.event.addListener(marker, ‘click’, (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));

// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}

// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), ‘bounds_changed’, function(event) {
this.setZoom(9);
google.maps.event.removeListener(boundsListener);

});

var styles = [
{
stylers: [
{ hue: “#00ffe6” },
{ saturation: -20 }
]
},
{
featureType: “road”,
elementType: “geometry”,
stylers: [
{ lightness: 100 },
{ visibility: “simplified” }
]
},
{
featureType: “road”,
elementType: “labels”,
stylers: [
{ visibility: “off” }
]
}
];

map.setOptions({styles: styles, scrollwheel: false});
}
</script>
</section>

 

Leave a Comment