Schyssta kartor genom moddade Google Maps

Först behöver du hämta en API-nyckel (Browser key ska du ha). Det görs här: https://developers.google.com/maps/documentation/javascript/tutorial#api_key (direktlänk).

Skicka in den i följande:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&sensor=false"></script>

 

Sen skapar du kartan. Här även med en egen marker. Magin händer i styles-arrayen. Förgjorda sköna styles kan man hämta/modda på t.ex. http://snazzymaps.com/

JS

// Generate custom map
if ($('#map').size() > 0)
	$('body').googleMaps();

 

(function($) {

	$.fn.googleMaps = function() {

		init();

		function init() {

				var lat = '[your-lat]',
					lng = '[your-lng]';

				var myLatlng = new google.maps.LatLng(lat,lng);
				var image = 'http://[dindomän.se]/assets/images/map-marker.png';

                var mapOptions = {
                    // Zoom (always required)
                    zoom: 9,

                    // The latitude and longitude to center the map (always required)
                    center: new google.maps.LatLng(lat, lng),
								mapTypeId: google.maps.MapTypeId.ROADMAP,
                    // Map styling
                    styles: [{featureType:"landscape",stylers:[{saturation:-100},{lightness:65},{visibility:"on"}]},{featureType:"poi",stylers:[{saturation:-100},{lightness:51},{visibility:"simplified"}]},{featureType:"road.highway",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"road.arterial",stylers:[{saturation:-100},{lightness:30},{visibility:"on"}]},{featureType:"road.local",stylers:[{saturation:-100},{lightness:40},{visibility:"on"}]},{featureType:"transit",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"administrative.province",stylers:[{visibility:"off"}]/**/},{featureType:"administrative.locality",stylers:[{visibility:"on"}]},{featureType:"administrative.neighborhood",stylers:[{visibility:"on"}]/**/},{featureType:"water",elementType:"labels",stylers:[{visibility:"on"},{lightness:-25},{saturation:-100}]},{featureType:"water",elementType:"geometry",stylers:[{hue:"#7b868c"},{lightness:-25},{saturation:-97}]}]
                };

                // Get the HTML DOM element that will contain your map 
                // We are using a div with id="map"
                var mapElement = document.getElementById('map');

                // Create the Google Map using out element and options defined above
                var map = new google.maps.Map(mapElement, mapOptions);

                // Place marker on map
        		var marker = new google.maps.Marker({
			    	position: myLatlng,
			    	animation: google.maps.Animation.b,
			    	map: map,
			    	icon: image
				});

		}

	}

})(jQuery);

 

HTML

<div id="map"></div>

 

CSS

#map {
	height: 300px; /* Höjd på kartan */
	width: 100%;
}

 

Fixa zoom-kontrollsbugg

Ofta kör man en

img {
max-width: 100%;
}

Detta breakar dock kontrollerna som läggs på av Google på kartan. För att fixa detta kör:

.gmnoprint img {
    max-width: none; 
}

eller

#map_canvas img{
max-width: none
}