{"id":1426,"date":"2015-03-06T18:35:44","date_gmt":"2015-03-06T18:35:44","guid":{"rendered":"https:\/\/themes.simonbouchard.com\/studio8\/?page_id=1426"},"modified":"2015-03-06T18:53:11","modified_gmt":"2015-03-06T18:53:11","slug":"google-map-multi","status":"publish","type":"page","link":"https:\/\/themes.simonbouchard.com\/studio8\/documentation\/built-in-short-codes\/google-map-multi\/","title":{"rendered":"Google Map (Multi)"},"content":{"rendered":"<h2 class=\"hard-top\">Attributes<\/h2>\n<table>\n<thead>\n<th>Attribute<\/th>\n<th>Description<\/th>\n<th>Values<\/th>\n<th>Default<\/th>\n<\/thead>\n<tbody>\n<tr>\n<td>locations<\/td>\n<td>Define the locations you want to retrieve. Separate your locations\/markers with a pipe &#8220;|&#8221;.<\/td>\n<td>Longitude, Latitude<\/td>\n<td>N\/A<\/td>\n<\/tr>\n<tr class=\"even\">\n<td>height<\/td>\n<td>Define the height of the map<\/td>\n<td>pixels, pt, em, %<\/td>\n<td>400px<\/td>\n<\/tr>\n<tr>\n<td>zoom<\/td>\n<td>Define the zoom of the map<\/td>\n<td>Numeric value<\/td>\n<td>10<\/td>\n<\/tr>\n<tr class=\"even\">\n<td>disableDefaultUI<\/td>\n<td>This property disables any automatic UI behavior from the Google Maps API.<\/td>\n<td>true, false<\/td>\n<td>true<\/td>\n<\/tr>\n<tr>\n<td>scrollwheel<\/td>\n<td>Disables scrollwheel zooming on the map.<\/td>\n<td>true, false<\/td>\n<td>false<\/td>\n<\/tr>\n<tr class=\"even\">\n<td>draggable<\/td>\n<td>If false, prevents the map from being dragged. Dragging is enabled by default.<\/td>\n<td>true, false<\/td>\n<td>true<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h6>Demo<\/h6>\n\n\n            <div id=\"map_canvas-1641\" class=\"google-map\" style=\"height: 400px;\"><\/div>\n\n            <script type=\"text\/javascript\">\n                jQuery(document).ready(function($) {\n                    \n                    \/\/ Locations List\n                    var locations = [ [45.5018603,-73.5672218],[45.4996344,-73.5025913],[45.5186693,-73.5440308] ];\n                            \n                    \/\/ map options\n                    var mapOptions = {\n                        styles: [{\"featureType\":\"administrative\",\"elementType\":\"labels.text.fill\",\"stylers\":[{\"color\":\"#444444\"}]},{\"featureType\":\"landscape\",\"elementType\":\"all\",\"stylers\":[{\"color\":\"#f2f2f2\"}]},{\"featureType\":\"poi\",\"elementType\":\"all\",\"stylers\":[{\"visibility\":\"off\"}]},{\"featureType\":\"road\",\"elementType\":\"all\",\"stylers\":[{\"saturation\":-100},{\"lightness\":45}]},{\"featureType\":\"road\",\"elementType\":\"labels.text\",\"stylers\":[{\"visibility\":\"off\"}]},{\"featureType\":\"road.highway\",\"elementType\":\"all\",\"stylers\":[{\"visibility\":\"simplified\"}]},{\"featureType\":\"road.arterial\",\"elementType\":\"labels.icon\",\"stylers\":[{\"visibility\":\"off\"}]},{\"featureType\":\"transit\",\"elementType\":\"all\",\"stylers\":[{\"visibility\":\"off\"}]},{\"featureType\":\"water\",\"elementType\":\"all\",\"stylers\":[{\"color\":\"#d9d9d9\"},{\"visibility\":\"on\"}]}]\r\n,\n                        zoom: 10,\n                        disableDefaultUI: true,\n                        scrollwheel: false,\n                        draggable: true,\n                        mapTypeId: google.maps.MapTypeId.ROADMAP,\n                        \/\/ let center the map from the first provided coordinates\n                        center: new google.maps.LatLng(locations[0][0], locations[0][1]),\n                    }\n                    \n                    \/\/ map\n                    var map = new google.maps.Map(document.getElementById(\"map_canvas-1641\"), mapOptions);\n\n                    \/\/ markers\n                    var marker, i;\n                    for (i = 0; i < locations.length; i++) {  \n                      marker = new google.maps.Marker({\n                        position: new google.maps.LatLng(locations[i][0], locations[i][1]),\n                        map: map\n                      });\n                    }\n                });\n            <\/script>\n<pre class=\"brush: plain;\">\n[google_map_multi locations=\"45.5018603,-73.5672218|45.4996344,-73.5025913|45.5186693,-73.5440308\"][\/google_map_multi]\n<\/pre>\n\n\n            <div id=\"map_canvas-1900\" class=\"google-map\" style=\"height: 400px;\"><\/div>\n\n            <script type=\"text\/javascript\">\n                jQuery(document).ready(function($) {\n                    \n                    \/\/ Locations List\n                    var locations = [ [45.5018603,-73.5672218],[45.4996344,-73.5025913],[45.5186693,-73.5440308] ];\n                            \n                    \/\/ map options\n                    var mapOptions = {\n                        styles: [{\"featureType\":\"administrative\",\"elementType\":\"labels.text.fill\",\"stylers\":[{\"color\":\"#444444\"}]},{\"featureType\":\"landscape\",\"elementType\":\"all\",\"stylers\":[{\"color\":\"#f2f2f2\"}]},{\"featureType\":\"poi\",\"elementType\":\"all\",\"stylers\":[{\"visibility\":\"off\"}]},{\"featureType\":\"road\",\"elementType\":\"all\",\"stylers\":[{\"saturation\":-100},{\"lightness\":45}]},{\"featureType\":\"road\",\"elementType\":\"labels.text\",\"stylers\":[{\"visibility\":\"off\"}]},{\"featureType\":\"road.highway\",\"elementType\":\"all\",\"stylers\":[{\"visibility\":\"simplified\"}]},{\"featureType\":\"road.arterial\",\"elementType\":\"labels.icon\",\"stylers\":[{\"visibility\":\"off\"}]},{\"featureType\":\"transit\",\"elementType\":\"all\",\"stylers\":[{\"visibility\":\"off\"}]},{\"featureType\":\"water\",\"elementType\":\"all\",\"stylers\":[{\"color\":\"#d9d9d9\"},{\"visibility\":\"on\"}]}]\r\n,\n                        zoom: 10,\n                        disableDefaultUI: true,\n                        scrollwheel: true,\n                        draggable: true,\n                        mapTypeId: google.maps.MapTypeId.ROADMAP,\n                        \/\/ let center the map from the first provided coordinates\n                        center: new google.maps.LatLng(locations[0][0], locations[0][1]),\n                    }\n                    \n                    \/\/ map\n                    var map = new google.maps.Map(document.getElementById(\"map_canvas-1900\"), mapOptions);\n\n                    \/\/ markers\n                    var marker, i;\n                    for (i = 0; i < locations.length; i++) {  \n                      marker = new google.maps.Marker({\n                        position: new google.maps.LatLng(locations[i][0], locations[i][1]),\n                        map: map\n                      });\n                    }\n                });\n            <\/script>\n<pre class=\"brush: plain;\">\n[google_map_multi draggable=\"true\" scrollwheel=\"true\" disableDefaultUI=\"false\" locations=\"45.5018603,-73.5672218|45.4996344,-73.5025913|45.5186693,-73.5440308\"][\/google_map_multi]\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Attributes Attribute Description Values Default locations Define the locations you want to retrieve. Separate your locations\/markers with a pipe &#8220;|&#8221;. Longitude, Latitude N\/A height Define the height of the map pixels, pt, em, % 400px zoom Define the zoom of the map Numeric value 10 disableDefaultUI This property disables any automatic UI behavior from the&#8230;  <a class=\"excerpt-read-more\" href=\"https:\/\/themes.simonbouchard.com\/studio8\/documentation\/built-in-short-codes\/google-map-multi\/\" title=\"Read Google Map (Multi)\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":619,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/themes.simonbouchard.com\/studio8\/wp-json\/wp\/v2\/pages\/1426"}],"collection":[{"href":"https:\/\/themes.simonbouchard.com\/studio8\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/themes.simonbouchard.com\/studio8\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/themes.simonbouchard.com\/studio8\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themes.simonbouchard.com\/studio8\/wp-json\/wp\/v2\/comments?post=1426"}],"version-history":[{"count":9,"href":"https:\/\/themes.simonbouchard.com\/studio8\/wp-json\/wp\/v2\/pages\/1426\/revisions"}],"predecessor-version":[{"id":1435,"href":"https:\/\/themes.simonbouchard.com\/studio8\/wp-json\/wp\/v2\/pages\/1426\/revisions\/1435"}],"up":[{"embeddable":true,"href":"https:\/\/themes.simonbouchard.com\/studio8\/wp-json\/wp\/v2\/pages\/619"}],"wp:attachment":[{"href":"https:\/\/themes.simonbouchard.com\/studio8\/wp-json\/wp\/v2\/media?parent=1426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}