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 |
CSS3 Warp Shadow | 2,271 Kb |
Give me money | 3,232 Kb |
Responsive Gray Accordion | 3,005 Kb |
Nivo Lightbox | 3,584 Kb |
Float My Goat CSS3 | 1,873 Kb |
Testimonial fade in and out | 2,067 Kb |
Responsive Green Accordion | 3,031 Kb |
Playing with wow and animate | 1,783 Kb |
A Pen by Brendan Skousen | 2,954 Kb |
Simple Thumbnail Gallery | 1,712 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 |
Ball physics | Blackkbot | 3,874 Kb |
Weird glowy CSS3 game | Toneworm | 3,684 Kb |
CSS3 Snow Animation | NickyCDK | 1,695 Kb |
Octopus Bar iPad App Interactions | Davidkpiano | 6,735 Kb |
SVG Icons Template | Legofsalmon | 2,618 Kb |
Modular Flip Card | Bbodine1 | 4,009 Kb |
P5.js data visualization | Enginarslan | 2,233 Kb |
Css3 slide | Nakome | 3,190 Kb |
A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
A Pen by Alex Bergin | Abergin | 3,347 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!