Skip to content

Instantly share code, notes, and snippets.

@joeldom

joeldom/sb-gmap

Last active August 29, 2015 14:07
Show Gist options
  • Save joeldom/cc81e4535a53a5171340 to your computer and use it in GitHub Desktop.
Save joeldom/cc81e4535a53a5171340 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. joeldom revised this gist Oct 1, 2014. 1 changed file with 42 additions and 43 deletions.
    85 changes: 42 additions & 43 deletions sb-gmap
    View file
    Original file line number Diff line number Diff line change
    @@ -1,45 +1,44 @@
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <div id="sitkobrunomap" style="height:200px;width:100%;"></div>
    <script type="text/javascript">
    function init_map(){
    var stylesArray = [
    {"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"off"}]},
    {"featureType":"all","elementType":"geometry.fill","stylers":[{"saturation":-100}]},
    {"featureType":"transit","elementType":"labels","stylers":[{"visibility":"off"}]},
    {"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":30}]},
    {"featureType":"water","elementType":"geometry.fill","stylers":[{"hue":"#4c639e"},{"lightness":-37}]},
    {"featureType":"road","elementType":"labels","stylers":[{"weight":2.44},{"saturation":-85},{"gamma":0.75}]},
    {"featureType":"road.local","elementType":"geometry.fill","stylers":[{"lightness":-10}]},
    {"featureType":"water","elementType":"labels","stylers":[{"saturation":-100},{"lightness":-11}]},
    {"featureType":"poi","elementType":"labels","stylers":[{"visibility":"on"},{"saturation":-73},{"lightness":-10}]}
    ]
    <div id="sitkobrunomap" style="height:200px;width:100%;"></div>
    <script type="text/javascript">
    function init_map(){
    var stylesArray = [
    {"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"off"}]},
    {"featureType":"all","elementType":"geometry.fill","stylers":[{"saturation":-100}]},
    {"featureType":"transit","elementType":"labels","stylers":[{"visibility":"off"}]},
    {"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":30}]},
    {"featureType":"water","elementType":"geometry.fill","stylers":[{"hue":"#4c639e"},{"lightness":-37}]},
    {"featureType":"road","elementType":"labels","stylers":[{"weight":2.44},{"saturation":-85},{"gamma":0.75}]},
    {"featureType":"road.local","elementType":"geometry.fill","stylers":[{"lightness":-10}]},
    {"featureType":"water","elementType":"labels","stylers":[{"saturation":-100},{"lightness":-11}]},
    {"featureType":"poi","elementType":"labels","stylers":[{"visibility":"on"},{"saturation":-73},{"lightness":-10}]}
    ]

    var myOptions = {
    zoom:14,
    center:new google.maps.LatLng(<?php echo $adds['lat']; ?>, <?php echo $adds['lng']; ?>),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    scrollwheel: false,
    panControl: false,
    zoomControl: true,
    zoomControlOptions: {
    style: google.maps.MapTypeControlStyle.SMALL,
    postion: google.maps.ControlPosition.TOP_LEFT
    },
    scaleControl: true,
    overviewMapControl: false

    };
    map = new google.maps.Map(document.getElementById("sitkobrunomap"), myOptions);
    map.setOptions({styles: stylesArray});
    var pinLocation = new google.maps.LatLng(<?php echo $adds['lat']; ?>, <?php echo $adds['lng']; ?>)
    marker = new google.maps.Marker({
    map: map,
    position: pinLocation,
    icon: "http://sb.linux.1903host.com/wp-content/themes/sitkobruno/imgs/sb-pin-shad.png"
    });
    var contentString = '<b>Sitko Bruno</b><br/>2740 Smallman Street Suite 300 15222 Pittsburgh';
    var infowindow = new google.maps.InfoWindow({ content: contentString });
    google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});}
    google.maps.event.addDomListener(window, 'load', init_map);
    </script>
    var myOptions = {
    zoom:14,
    center:new google.maps.LatLng(<?php echo $adds['lat']; ?>, <?php echo $adds['lng']; ?>),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    scrollwheel: false,
    panControl: false,
    zoomControl: true,
    zoomControlOptions: {
    style: google.maps.MapTypeControlStyle.SMALL,
    postion: google.maps.ControlPosition.TOP_LEFT
    },
    scaleControl: true,
    overviewMapControl: false
    };
    map = new google.maps.Map(document.getElementById("sitkobrunomap"), myOptions);
    map.setOptions({styles: stylesArray});
    var pinLocation = new google.maps.LatLng(<?php echo $adds['lat']; ?>, <?php echo $adds['lng']; ?>)
    marker = new google.maps.Marker({
    map: map,
    position: pinLocation,
    icon: "client image directory withheld"
    });
    var contentString = '<b>Client Name</b><br/>Client Address';
    var infowindow = new google.maps.InfoWindow({ content: contentString });
    google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});}
    google.maps.event.addDomListener(window, 'load', init_map);
    </script>
  2. joeldom revised this gist Oct 1, 2014. 1 changed file with 44 additions and 59 deletions.
    103 changes: 44 additions & 59 deletions sb-gmap
    View file
    Original file line number Diff line number Diff line change
    @@ -1,60 +1,45 @@
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <div id="sitkobrunomap" style="overflow:hidden;height:200px;width:100%;"></div>
    <script>
    window.onload = function () {
    var styles = [
    {
    featureType: 'water', // set the water color
    elementType: 'geometry.fill', // apply the color only to the fill
    stylers: [
    { color: '#bababa' }
    ]
    },{
    featureType: 'landscape.natural', // set the natural landscape
    elementType: 'all',
    stylers: [
    { hue: '#809f80' },
    { lightness: -35 }
    ]
    },{
    featureType: 'poi', // set the point of interest
    elementType: 'geometry',
    stylers: [
    { hue: '#444444' },
    { lightness: 30 }
    ]
    },{
    featureType: 'road', // set the road
    elementType: 'geometry',
    stylers: [
    { hue: '#d5c18c' },
    { lightness: 14 }
    ]
    },{
    featureType: 'road.local', // set the local road
    elementType: 'all',
    stylers: [
    { hue: '#ffd7a6' },
    { saturation: 100 },
    { lightness: -12 }
    ]
    }
    ];
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <div id="sitkobrunomap" style="height:200px;width:100%;"></div>
    <script type="text/javascript">
    function init_map(){
    var stylesArray = [
    {"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"off"}]},
    {"featureType":"all","elementType":"geometry.fill","stylers":[{"saturation":-100}]},
    {"featureType":"transit","elementType":"labels","stylers":[{"visibility":"off"}]},
    {"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":30}]},
    {"featureType":"water","elementType":"geometry.fill","stylers":[{"hue":"#4c639e"},{"lightness":-37}]},
    {"featureType":"road","elementType":"labels","stylers":[{"weight":2.44},{"saturation":-85},{"gamma":0.75}]},
    {"featureType":"road.local","elementType":"geometry.fill","stylers":[{"lightness":-10}]},
    {"featureType":"water","elementType":"labels","stylers":[{"saturation":-100},{"lightness":-11}]},
    {"featureType":"poi","elementType":"labels","stylers":[{"visibility":"on"},{"saturation":-73},{"lightness":-10}]}
    ]

    var options = {
    mapTypeControlOptions: {
    mapTypeIds: ['Styled']
    },
    center: new google.maps.LatLng(<?php echo $adds['lat']; ?>, <?php echo $adds['lng']; ?>),
    zoom: 14,
    disableDefaultUI: true,
    mapTypeId: 'Styled'
    };
    //not sure how to add this properly
    var marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(<?php echo $adds['lat']; ?>, <?php echo $adds['lng']; ?>)});
    var div = document.getElementById('sitkobrunomap');
    var map = new google.maps.Map(div, options, marker);
    var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
    map.mapTypes.set('Styled', styledMapType);
    };
    </script>
    var myOptions = {
    zoom:14,
    center:new google.maps.LatLng(<?php echo $adds['lat']; ?>, <?php echo $adds['lng']; ?>),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    scrollwheel: false,
    panControl: false,
    zoomControl: true,
    zoomControlOptions: {
    style: google.maps.MapTypeControlStyle.SMALL,
    postion: google.maps.ControlPosition.TOP_LEFT
    },
    scaleControl: true,
    overviewMapControl: false

    };
    map = new google.maps.Map(document.getElementById("sitkobrunomap"), myOptions);
    map.setOptions({styles: stylesArray});
    var pinLocation = new google.maps.LatLng(<?php echo $adds['lat']; ?>, <?php echo $adds['lng']; ?>)
    marker = new google.maps.Marker({
    map: map,
    position: pinLocation,
    icon: "http://sb.linux.1903host.com/wp-content/themes/sitkobruno/imgs/sb-pin-shad.png"
    });
    var contentString = '<b>Sitko Bruno</b><br/>2740 Smallman Street Suite 300 15222 Pittsburgh';
    var infowindow = new google.maps.InfoWindow({ content: contentString });
    google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});}
    google.maps.event.addDomListener(window, 'load', init_map);
    </script>
  3. joeldom revised this gist Oct 1, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion sb-gmap
    View file
    Original file line number Diff line number Diff line change
    @@ -50,7 +50,7 @@
    disableDefaultUI: true,
    mapTypeId: 'Styled'
    };
    //not siure how to add this properly
    //not sure how to add this properly
    var marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(<?php echo $adds['lat']; ?>, <?php echo $adds['lng']; ?>)});
    var div = document.getElementById('sitkobrunomap');
    var map = new google.maps.Map(div, options, marker);
  4. joeldom revised this gist Oct 1, 2014. 1 changed file with 58 additions and 58 deletions.
    116 changes: 58 additions & 58 deletions sb-gmap
    View file
    Original file line number Diff line number Diff line change
    @@ -1,60 +1,60 @@
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <div id="sitkobrunomap" style="overflow:hidden;height:200px;width:100%;"></div>
    <script>
    window.onload = function () {
    var styles = [
    {
    featureType: 'water', // set the water color
    elementType: 'geometry.fill', // apply the color only to the fill
    stylers: [
    { color: '#bababa' }
    ]
    },{
    featureType: 'landscape.natural', // set the natural landscape
    elementType: 'all',
    stylers: [
    { hue: '#809f80' },
    { lightness: -35 }
    ]
    }
    ,{
    featureType: 'poi', // set the point of interest
    elementType: 'geometry',
    stylers: [
    { hue: '#444444' },
    { lightness: 30 }
    ]
    },{
    featureType: 'road', // set the road
    elementType: 'geometry',
    stylers: [
    { hue: '#d5c18c' },
    { lightness: 14 }
    ]
    },{
    featureType: 'road.local', // set the local road
    elementType: 'all',
    stylers: [
    { hue: '#ffd7a6' },
    { saturation: 100 },
    { lightness: -12 }
    ]
    }
    ];
    <div id="sitkobrunomap" style="overflow:hidden;height:200px;width:100%;"></div>
    <script>
    window.onload = function () {
    var styles = [
    {
    featureType: 'water', // set the water color
    elementType: 'geometry.fill', // apply the color only to the fill
    stylers: [
    { color: '#bababa' }
    ]
    },{
    featureType: 'landscape.natural', // set the natural landscape
    elementType: 'all',
    stylers: [
    { hue: '#809f80' },
    { lightness: -35 }
    ]
    },{
    featureType: 'poi', // set the point of interest
    elementType: 'geometry',
    stylers: [
    { hue: '#444444' },
    { lightness: 30 }
    ]
    },{
    featureType: 'road', // set the road
    elementType: 'geometry',
    stylers: [
    { hue: '#d5c18c' },
    { lightness: 14 }
    ]
    },{
    featureType: 'road.local', // set the local road
    elementType: 'all',
    stylers: [
    { hue: '#ffd7a6' },
    { saturation: 100 },
    { lightness: -12 }
    ]
    }
    ];

    var options = {
    mapTypeControlOptions: {
    mapTypeIds: ['Styled']
    },
    center: new google.maps.LatLng(<?php echo $adds['lat']; ?>, <?php echo $adds['lng']; ?>),
    zoom: 14,
    disableDefaultUI: true,
    mapTypeId: 'Styled'
    };
    var marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(<?php echo $adds['lat']; ?>, <?php echo $adds['lng']; ?>)});
    var div = document.getElementById('sitkobrunomap');
    var map = new google.maps.Map(div, options, marker);
    var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
    map.mapTypes.set('Styled', styledMapType);
    }
    </script>
    var options = {
    mapTypeControlOptions: {
    mapTypeIds: ['Styled']
    },
    center: new google.maps.LatLng(<?php echo $adds['lat']; ?>, <?php echo $adds['lng']; ?>),
    zoom: 14,
    disableDefaultUI: true,
    mapTypeId: 'Styled'
    };
    //not siure how to add this properly
    var marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(<?php echo $adds['lat']; ?>, <?php echo $adds['lng']; ?>)});
    var div = document.getElementById('sitkobrunomap');
    var map = new google.maps.Map(div, options, marker);
    var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
    map.mapTypes.set('Styled', styledMapType);
    };
    </script>
  5. joeldom created this gist Oct 1, 2014.
    60 changes: 60 additions & 0 deletions sb-gmap
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <div id="sitkobrunomap" style="overflow:hidden;height:200px;width:100%;"></div>
    <script>
    window.onload = function () {
    var styles = [
    {
    featureType: 'water', // set the water color
    elementType: 'geometry.fill', // apply the color only to the fill
    stylers: [
    { color: '#bababa' }
    ]
    },{
    featureType: 'landscape.natural', // set the natural landscape
    elementType: 'all',
    stylers: [
    { hue: '#809f80' },
    { lightness: -35 }
    ]
    }
    ,{
    featureType: 'poi', // set the point of interest
    elementType: 'geometry',
    stylers: [
    { hue: '#444444' },
    { lightness: 30 }
    ]
    },{
    featureType: 'road', // set the road
    elementType: 'geometry',
    stylers: [
    { hue: '#d5c18c' },
    { lightness: 14 }
    ]
    },{
    featureType: 'road.local', // set the local road
    elementType: 'all',
    stylers: [
    { hue: '#ffd7a6' },
    { saturation: 100 },
    { lightness: -12 }
    ]
    }
    ];

    var options = {
    mapTypeControlOptions: {
    mapTypeIds: ['Styled']
    },
    center: new google.maps.LatLng(<?php echo $adds['lat']; ?>, <?php echo $adds['lng']; ?>),
    zoom: 14,
    disableDefaultUI: true,
    mapTypeId: 'Styled'
    };
    var marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(<?php echo $adds['lat']; ?>, <?php echo $adds['lng']; ?>)});
    var div = document.getElementById('sitkobrunomap');
    var map = new google.maps.Map(div, options, marker);
    var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
    map.mapTypes.set('Styled', styledMapType);
    }
    </script>