Custom Google Maps API

Developer
Thulio Philipe
Size
2,965 Kb
Views
10,120
  1. Custom Google Maps API Previews
  2. Custom Google Maps API HTML Codes
  3. Custom Google Maps API CSS Codes
  4. Custom Google Maps API JS Codes

How do I make an custom google maps api?

Example of use to custom google maps.. What is a custom google maps api? How do you make a custom google maps api? This script and codes were developed by Thulio Philipe on 09 January 2023, Monday.

Custom Google Maps API Previews
IQ Test

Custom Google Maps API - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Google Maps API </title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="mapa"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Custom Google Maps API - Script Codes CSS Codes

#mapa { width: 100%; height: 500px; border: 1px solid #ccc;
}

Custom Google Maps API - Script Codes JS Codes

function initialize() { // Exibir mapa; var myLatlng = new google.maps.LatLng(-8.0631495, -34.87131120000004); var mapOptions = { zoom: 17, center: myLatlng, panControl: false, // mapTypeId: google.maps.MapTypeId.ROADMAP mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] } } // Parâmetros do texto que será exibido no clique; var contentString = '<h2>Marco Zero</h2>' + '<p>Praça Rio Branco, Recife/PE.</p>' + '<a href="http://pt.wikipedia.org/wiki/Pra%C3%A7a_Rio_Branco_(Recife)" target="_blank">clique aqui para mais informações</a>'; var infowindow = new google.maps.InfoWindow({ content: contentString, maxWidth: 700 }); // Exibir o mapa na div #mapa; var map = new google.maps.Map(document.getElementById("mapa"), mapOptions); // Marcador personalizado; var image = 'https://cdn1.iconfinder.com/data/icons/gpsmapicons/blue/gpsmapicons01.png'; var marcadorPersonalizado = new google.maps.Marker({ position: myLatlng, map: map, icon: image, title: 'Downtown no Galo', animation: google.maps.Animation.DROP }); // Exibir texto ao clicar no ícone; google.maps.event.addListener(marcadorPersonalizado, 'click', function() { infowindow.open(map,marcadorPersonalizado); }); // Estilizando o mapa; // Criando um array com os estilos var styles = [ { stylers: [ { hue: "#41a7d5" }, { saturation: 60 }, { lightness: -20 }, { gamma: 1.51 } ] }, { featureType: "road", elementType: "geometry", stylers: [ { lightness: 100 }, { visibility: "simplified" } ] }, { featureType: "road", elementType: "labels" } ]; // crio um objeto passando o array de estilos (styles) e definindo um nome para ele; var styledMap = new google.maps.StyledMapType(styles, { name: "Mapa Style" }); // Aplicando as configurações do mapa map.mapTypes.set('map_style', styledMap); map.setMapTypeId('map_style');
}
// Função para carregamento assíncrono
function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDeHb17So0QupSGO_d6b8X-OyvJ32UQehs&sensor=true&callback=initialize"; document.body.appendChild(script);
}
window.onload = loadScript;
Custom Google Maps API - Script Codes
Custom Google Maps API - Script Codes
Home Page Home
Developer Thulio Philipe
Username thulioph
Uploaded January 09, 2023
Rating 3
Size 2,965 Kb
Views 10,120
Do you need developer help for Custom Google Maps API?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Thulio Philipe (thulioph) Script Codes
Name
Tilt Effect
Google static map to Base64
Google Maps - Reverse Geolocation
Animated paths - Google Maps
A Pen by Thulio Philipe
Select with plugin
Menu - Forks Meal Planner
Parallax with only CSS
Filter mixitup
Slideshow only with sass
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!