Features
Demo
Pricing
Support
Docs
Documentation
Versions
Feature Requests
Samples
Map
“ It has never been so easy to
instance a Google Map
”
Demo
<?php echo JDom::_('html.fly.map.google', array( 'keyAPI' => JComponentHelper::getParams('com_hellomyworld')->get('google_map_api'), 'request' => array( // Disable the mouse scroll wheel zooming feature 'scrollwheel' => false, 'zoom' => 10, ), 'markers' => array( // Fit the bounds of the map around the markers 'fitBounds' => true, // Set the markers datas from a list 'list' => Array, 'iconWidth' => '34', 'iconHeight' => '20', // Furnish the keys to extract datas from the dynamic list 'dataKeys' => array( 'lat' => 'latitude', 'lng' => 'longitude', // Search by name, or address 'address' => '{name} {_country_name}', 'title' => '{name} [{_country_name}]', // Template Description 'content' => <a href="index.php?option=com_hellomyworld&view=country&layout=country&cid={country}" target="_blank"> <img class="pull-right" src="index.php?option=com_hellomyworld&task=file&size=34x20&path=[DIR_COUNTRIES_FLAG]/{_country_flag}" title="{_country_name}" > </a> <span style="font-size: 18px;">{name}</span> <br/> <span>Population</span>: <span style="font-weight: bold;">{population}</span> <br/> {html_travellers}, ), ) )); ?>
BASIC MAPS
Base
Map Size
Map Bounds
Mouse Wheel
Demo
<?php echo JDom::_('html.fly.map.google', array( // Your API Key furnished by Google 'keyAPI' => '<YOUR API KEY>', // Map request sent to Google 'request' => array( // Set the center of the map 'center' => array( 'lat' => -34.397, 'lng' => 150.644 ), // Map zoom 'zoom' => 8, ) )); ?>
Demo
<?php echo JDom::_('html.fly.map.google', array( 'keyAPI' => '<YOUR API KEY>', // Define the size of the map 'width' => '300', 'height' => '300', 'request' => array( 'center' => array( 'lat' => -34.397, 'lng' => 150.644 ), 'zoom' => 8, ) )); ?>
Demo
<?php echo JDom::_('html.fly.map.google', array( 'keyAPI' => '<YOUR API KEY>', 'request' => array( // Defines the bounds for this map 'bounds' => array( // Longitudes 'east' => -85.65, 'west' => -88.65, // Latitudes 'north' => 44.85, 'south' => 35.85, ), ), )); ?>
Demo
<?php echo JDom::_('html.fly.map.google', array( 'keyAPI' => '<YOUR API KEY>', 'request' => array( // Disable the mouse scroll wheel zooming feature 'scrollwheel' => false, 'center' => array( 'lat' => -34.397, 'lng' => 150.644 ), 'zoom' => 8, ) )); ?>
STYLED MAPS
Satellite
Apply Styles
Demo
<?php echo JDom::_('html.fly.map.google', array( 'keyAPI' => '<YOUR API KEY>', 'request' => array( // Map type 'mapType' => 'SATELLITE', 'center' => array( 'lat' => -34.397, 'lng' => 150.644 ), 'zoom' => 8, ), )); ?>
Demo
<?php echo JDom::_('html.fly.map.google', array( 'keyAPI' => '<YOUR API KEY>', 'request' => array( // Sydney 'center' => array( 'lat' => -34.397, 'lng' => 150.644 ), 'zoom' => 8, // Define the map Style (Google structure of definition) 'googleStyles' => array( array( 'featureType' => 'all', 'stylers' => array( array( 'saturation' => -80 ) ) ), array( 'featureType' => 'road.arterial', 'elementType' => 'geometry', 'stylers' => array( array( 'hue' => '#00ffee', 'saturation' => 50 ) ) ), array( 'featureType' => 'poi.business', 'elementType' => 'labels', 'stylers' => array( array( 'visibility' => 'off', ) ) ) ) ), )); ?>
MARKERS
Marker
Marker Geocoding
Info Boxes
Demo
<?php echo JDom::_('html.fly.map.google', array( 'keyAPI' => '<YOUR API KEY>', 'request' => array( 'zoom' => 4, ), 'markers' => array( 'fitBounds' => true, 'data' => array( array( // Australia 'position' => array( 'lat' => -25.363, 'lng' => 131.044 ), 'title' => 'Australia' ), ) ), )); ?>
Demo
<?php echo JDom::_('html.fly.map.google', array( 'keyAPI' => '<YOUR API KEY>', 'request' => array( 'zoom' => 8, ), 'markers' => array( 'fitBounds' => true, 'data' => array( array( 'address' => 'Paris' ), ) ) )); ?>
Demo
<?php echo JDom::_('html.fly.map.google', array( 'keyAPI' => '<YOUR API KEY>', 'markers' => array( // Automaticaly fits the map around the markers 'fitBounds' => true, 'data' => array( array( // Chicago 'position' => array( 'lat' => 41.85, 'lng' => -87.65 ), 'title' => 'Chicago', 'content' => '<b>Chicago</b> is the third most populous city in the United States. With over 2.7 million residents, it is the most populous city in the state of Illinois and the Midwestern United States. The Chicago metropolitan area, often referred to as Chicagoland, has nearly 10 million people and is the third-largest in the U.S' . '<br/>Source: <a href="https://en.wikipedia.org/wiki/Chicago" target="_blank">Wikipedia</a>' ), array( // Indianapolis 'position' => array( 'lat' => 39.79, 'lng' => -86.14 ), 'title' => 'Indianapolis', 'content' => '<b>Indianapolis</b> is the capital of the U.S. state of Indiana and the seat of Marion County. It is located in the East North Central region of the Midwest, near the confluence of the White River and Fall Creek. The city covers 372 square miles (963.5 km²) and had an estimated population of 853,173 in 2015, making it the largest city in Indiana, second largest in the Midwest, and 14th largest in the U.S' . '<br/>Source: <a href="https://en.wikipedia.org/wiki/Indianapolis" target="_blank">Wikipedia</a>' ) ) ), )); ?>
GEOCODING
Address Search
Directions API
Demo
<?php echo JDom::_('html.fly.map.google', array( 'keyAPI' => '<YOUR API KEY>', 'request' => array( // The Geocoding research for the center of the map 'address' => 'Iceland', 'zoom' => 6 ), )); ?>
Demo
<?php $chicago = array( 'lat' => 41.85, 'lng' => -87.65 ); $indianapolis = array( 'lat' => 39.79, 'lng' => -86.14 ); echo JDom::_('html.fly.map.google', array( 'keyAPI' => '<YOUR API KEY>', 'request' => array( // Center the map on Chicago 'center' => $chicago, 'zoom' => 8, ), 'directions' => array( array( // Set the origin 'origin' => $chicago, // Set the destination 'destination' => $indianapolis, // Set the Travel Mode 'travelMode' => 'DRIVING', ) ), )); ?>
DYNAMIC DATAS
Dynamic Datas
Icons
Demo
<?php echo JDom::_('html.fly.map.google', array( 'keyAPI' => '<YOUR API KEY>', 'markers' => array( 'fitBounds' => true, // Set the markers datas from a list 'list' => $cities, 'dataKeys' => array( 'lat' => 'latitude', 'lng' => 'longitude', // Search by name, or address, when the coordinate are missing or empty 'address' => '{name} {_country_name}', // Set the marker title 'title' => '{name} [{_country_name}]', // Template Description 'content' => '<span style="font-size:16px;">{name}</span><br/>Country : <span style="font-weight:bold;">{_country_name}</span>' ), ), )); ?>
Demo
<?php echo JDom::_('html.fly.map.google', array( 'keyAPI' => '<YOUR API KEY>', 'markers' => array( 'fitBounds' => true, // Set the markers datas from a list 'list' => $cities, 'iconWidth' => 34, 'iconHeight' => 20, 'dataKeys' => array( 'lat' => 'latitude', 'lng' => 'longitude', // Also works with indirect access images 'icon' => 'index.php?option=com_hellomyworld&task=file&size=34x20&path=[DIR_COUNTRIES_FLAG]/{_country_flag}', ), ), )); ?>
STATIC MAPS
Static Photo
Styled
Demo
<?php echo JDom::_('html.fly.map.google', array( 'keyAPI' => '<YOUR API KEY>', // Size must be given in pixels, percentages not allowed // max size: 640x640 'width' => '600', 'height' => '400', // Set the static mode 'static' => true, 'request' => array( // Canaries Islands 'center' => array( 'lat' => 28.0633564, 'lng' => -17.2378262 ), 'zoom' => 8, // Satellite photo 'mapType' => 'SATELLITE', ) )); ?>
Demo
<?php echo JDom::_('html.fly.map.google', array( 'keyAPI' => '<YOUR API KEY>', // Size must be given in pixels, percentages not allowed // max size: 640x640 'width' => '600', 'height' => '400', 'static' => true, 'request' => array( // Canaries Islands 'center' => array( 'lat' => 28.0633564, 'lng' => -17.2378262 ), 'zoom' => 8, // Map Styles 'googleStyles' => array( array( 'featureType' => 'all', 'stylers' => array( array( 'saturation' => -80 ) ) ), array( 'elementType' => 'labels', 'stylers' => array( array( 'visibility' => 'off' ) ) ), array( 'featureType' => 'poi.business', 'elementType' => 'labels', 'stylers' => array( array( 'visibility' => 'off', ) ) ) ) ) )); ?>
“
”
I want to save the world...... let's cook a solution about it.
VeCrea (Forum)
Get Started
Log In
Sign In
