Multiple Map Selection

Using jQuery plugin gMap3 to utilize and organize a multiple map selection tool

by ryanverdel

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<script src="http://www.mindboxdesigns.com/test-scripts/gmap3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<link rel="stylesheet" href="http://www.mindboxdesigns.com/test-scripts/main.css">
<body>
    
    <script type="text/javascript">
        
    ///Show Hide Effect///    
        
    function showElement(elementId) {
	
	
	if (obj = document.getElementsByTagName("tr")){
	var obj = document.getElementById(elementId);
	obj.style.display="table-row";	
	
	}
	
	else{
	var obj = document.getElementById(elementId);
	obj.style.display="block";
	}
	
	
}

function hideElement(elementId) {
	var obj = document.getElementById(elementId);
	obj.style.display="none";	
}

</script>
  
   <div id="pagebody">

   <div id="content">
   
    <table id="geofenceOptions">
    <tbody>
    	<tr id="mapSelection">
        <td>
        <label>JSON Array</label>
    <input type="radio" name="mapSelect" value="JSONArray" id="default_selection" checked onClick="showElement('JSONArray'); hideElement('dragnDrop');hideElement('addressList');">
    
  	<label>Drag n' Drop</label>
    <input type="radio" name="mapSelect" value="dragnDrop" id="drop_selection" onClick="showElement('dragnDrop'); hideElement('JSONArray');hideElement('addressList');">
    
    <label>Address</label>
    <input type="radio" name="mapSelect" value="addrSelect" id="address_selection" onClick="showElement('addressList'); hideElement('JSONArray');hideElement('dragnDrop');">
    </td>
        </tr>
        </tbody>
        </table>
        
        <table>
        <tbody>
        
        <tr>
        <td>
        <div id="map_array" class="gmap3"></div>
        </td>
        </tr>
        
        </tbody>
        </table>
        <table>
        <tbody>
    
		<tr id="JSONArray"...

JavaScript

$(document).ready(function() {	
    	
    //////// GMAP3 JSON ARRAY //////// 
	
	var mapOpts = {
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		mapTypeControl: true,
		mapTypeControlOptions: {
		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
		},
		navigationControl: true,
		scrollwheel: true,
		disableDoubleClickZoom: true,
		streetViewControl: false,
	}; 

    $(".gmap3").gmap3({
			map:{
			options: mapOpts
			}
		
		});
	
    $.mapArray = function(){
		
	$('#show_array').click(function(){
		
	$('.gmap3').gmap3('clear', 'markers');

      var coordinates = $("#geofenceCoords_array").val();
      var jsonObj = jQuery.parseJSON(coordinates);
	  var addBtn = $("#show_array"); 
	  
	  var iconValues =
      new google.maps.MarkerImage('http://www.mindboxdesigns.com/test-images/map_marker_default.png', //icon url
      new google.maps.Size(28.0, 43.0),
      new google.maps.Point(0, 0),
      new google.maps.Point(14.0, 43.0));
       
	   
	  var shadowValues =
	  new google.maps.MarkerImage('http://www.mindboxdesigns.com/test-images/map_marker_default_shadow.png', //icon shadow url
      new google.maps.Size(50.0, 43.0),
      new google.maps.Point(0, 0),
      new google.maps.Point(14.0, 43.0)); 

        $(".gmap3").gmap3({
        getlatlng:{
            callback: function(results){
              var markers=[];
              $.each(jsonObj, function(i, item) {

              var marker = new Object();
                  marker.lat = jsonObj[i].latitude;
                  marker.lng = jsonObj[i].longitude;
                  marker.options = new Object();
                  marker.options.icon = iconValues;
				  marker.options.shadow = shadowValues;
                  markers.push(marker);
              });


              $(".gmap3").gmap3({
                marker:{
                  values: markers,
                  options: {draggable: false,
			  	  animation: google.maps.Animation.DROP
				  },
				  
              },
              autofit:{maxZoom:...