Google map with multiple locations
How do I make an google map with multiple locations?
What is a google map with multiple locations? How do you make a google map with multiple locations? This script and codes were developed by Brendan Skousen on 09 December 2022, Friday.
Google map with multiple locations - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Google map with multiple locations</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="map-canvas" style="width: 50%; float:left"></div> <div style="width:46%; float:left"> <pre>
var request = { location: new google.maps.LatLng(-33.8665433, 151.1956316), radius: 500, types: ['store']
}; </pre> <script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places'></script> <script src="js/index.js"></script>
</body>
</html>
Google map with multiple locations - Script Codes CSS Codes
html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px }
Google map with multiple locations - Script Codes JS Codes
var map;
var infowindow;
function initialize() { var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316); map = new google.maps.Map(document.getElementById('map-canvas'), { center: pyrmont, zoom: 15 }); var request = { location: pyrmont, radius: 500, types: ['store'] }; infowindow = new google.maps.InfoWindow(); var service = new google.maps.places.PlacesService(map); service.nearbySearch(request, callback);
}
function callback(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { for (var i = 0; i < results.length; i++) { createMarker(results[i]); } }
}
function createMarker(place) { var placeLoc = place.geometry.location; var marker = new google.maps.Marker({ map: map, position: place.geometry.location }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(place.name); infowindow.open(map, this); });
}
google.maps.event.addDomListener(window, 'load', initialize);
Developer | Brendan Skousen |
Username | bskousen |
Uploaded | December 09, 2022 |
Rating | 3 |
Size | 2,242 Kb |
Views | 8,096 |
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!
Name | Size |
CSS transition hover with fontawesome | 2,211 Kb |
Wallpaper.js demo | 1,573 Kb |
CSS3 Warp Shadow | 2,271 Kb |
Responsive Green Accordion | 3,031 Kb |
Google map with multiple locations | 2,242 Kb |
Disable Copy of Text without Javascript | 1,578 Kb |
Responsive Gray Accordion | 3,005 Kb |
Nivo Lightbox | 3,584 Kb |
A Pen by Brendan Skousen | 2,954 Kb |
Testimonial fade in and out | 2,067 Kb |
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!
Name | Username | Size |
Bubble animation | Ftabor | 6,565 Kb |
CSS Grid Test | Ajaykarwal | 2,377 Kb |
CSS3 Diamond | Rendro | 1,960 Kb |
Degree Picker | Idered | 4,307 Kb |
Videogular - Overlay Play Plugin | 2fdevs | 2,432 Kb |
The CodePen Logo | Kindofone | 4,259 Kb |
Experiment | Toddmoy | 3,868 Kb |
Resizable SASS Icons | Marianarlt | 7,611 Kb |
Simple DevTools | Deegill | 2,511 Kb |
Draggable directive | YahyaKacem | 2,277 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!