I want to put a loading icon before finding or I need catch find location start/end function (like ajax before/success function)
I could not find any resources related to this .I want to do; When you click on the "Find current location" button, you will see a small icon. Hide the icon when the process is finished
I use javascript without jquery
using Geocoding service code, I added <div id="loader"></div> inside <div id="floating-panel"></div>.In this I have added image tag when geocodeAddress(geocoder, resultsMap) is called. You can change with desired icon
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {
lat: -34.397,
lng: 150.644
}
});
var geocoder = new google.maps.Geocoder();
document.getElementById('submit').addEventListener('click', function() {
geocodeAddress(geocoder, map);
});
}
function geocodeAddress(geocoder, resultsMap) {
document.getElementById('loader').innerHTML = "<img src='https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif'>"
var address = document.getElementById('address').value;
geocoder.geocode({
'address': address
}, function(results, status) {
if (status === 'OK') {
document.getElementById('loader').innerHTML = ""
resultsMap.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location
});
} else {
document.getElementById('loader').innerHTML = ""
alert('Geocode was not successful for the following reason: ' + status);
}
});
/*google.maps.event.addListenerOnce(map, 'idle', function(){
alert()
});*/
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
}
<div id="floating-panel">
<input id="address" type="textbox" value="Sydney, NSW">
<input id="submit" type="button" value="Geocode">
<div id="loader">
</div>
</div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
Related
I’m trying to add the generated latitude and longitude coordinates to jquery.post in the coord() function, in properties. Any help will be greatly appreciated. I’m trying to make this work with Shopify. Also, the coordinates need to be a key value pair to be able to be put in line item properties. Please help, I’ve been struggling with this for months.
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
width: 100%;
}
.map_parent {
width: 400px;
height: 400px;
position: relative;
margin: 50px auto;
}
#pin {
position: absolute;
top: 50%;
left: 50%;
}
.controls {
font-size: 1em;
line-height: 1.5em;
font-family: Arial;
margin: 50px auto;
width: 400px;
}
input, button {
line-height: 44px;
border-radius: 4px;
border: 0;
font-size: 1em;
padding: 0 20px;
}
input {
background: #eee;
width: 240px;
}
button {
color: white;
cursor: pointer;
background-color: darkgreen;
border: 0;
font-weight: bold;
}
button:hover {
background-color: darkblue;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="controls">
<div id="coordinates">
latitude: <span id="latitude">x</span><br />
longitude: <span id="longitude">y</span><br />
address: <span id="address">z</span><br />
</div>
<br />
<input type="text" id="address-input" placeholder="Search a place on a map">
<button type="button" id="find-address" onclick="findPlace()">Find</button>
<br /><br />
<button type="button" onclick="geolocation(); coord();">Locate me</button>
</div>
<div class="map_parent">
<div id="map">
</div>
<img src="https://cdn.shopify.com/s/files/1/0285/9840/3132/files/google-maps-pin.svg?v=1639860714" id="pin" />
</div>
<script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
var map, infoWindow;
var longitude, latitude;
var geocoder;
var san_felipe = { lat: 31.025071, lng: -114.840778 };
function coord() {
//var test = points
//json.stringify(test)
jQuery.post('/cart/add.js', {
quantity: 1,
id: 39697674240060,
properties: {
'Coordinates': 'test',
'Additional Information': 'test',
'Map': 'test'
}//,
//additional_details: {'Latitude/Longitude': latlng;,
//'Map': 'https://maps.google.com/?q='latlng;
//}
});
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: san_felipe,
zoom: 13
});
infoWindow = new google.maps.InfoWindow;
geocoder = new google.maps.Geocoder;
// GET coordinates and adress
map.addListener('center_changed', function() {
longitude = map.getCenter().lng();
latitude = map.getCenter().lat();
document.getElementById('longitude').innerText = longitude;
document.getElementById('latitude').innerText = latitude;
});
map.addListener('dragend', function() {
longitude = map.getCenter().lng();
latitude = map.getCenter().lat();
geocodeLatLng(latitude, longitude, geocoder, map);
})
}
// GEOLOCATION
function geolocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
// GEOLOCATION Error
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(maps);
}
When I click the geolocation button I want the latitude and longitude coordinates to be saved to the coord() function, jquery.post properties as Coordinates: latitude, longitude. Help I’m stuck in this part. I got the jquery.post to work and the geolocation(). But I don’t know how to save the generated latitude and longitude coordinates to the jquery.post properties. Help please.
I want to show find PlaceID tool in my website where user search his google registered name and in response google provide his place ID?
A working example can be found in this link. Full code below:
<!DOCTYPE html>
<html>
<head>
<title>Place ID Finder</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.controls {
background-color: #fff;
border-radius: 2px;
border: 1px solid transparent;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
height: 29px;
margin-left: 17px;
margin-top: 10px;
outline: none;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
.controls:focus {
border-color: #4d90fe;
}
.title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
</style>
</head>
<body>
<div style="display: none">
<input id="pac-input"
class="controls"
type="text"
placeholder="Enter a location">
</div>
<div id="map"></div>
<div id="infowindow-content">
<span id="place-name" class="title"></span><br>
<strong>Place ID:</strong> <span id="place-id"></span><br>
<span id="place-address"></span>
</div>
<script>
// This sample uses the Place Autocomplete widget to allow the user to search
// for and select a place. The sample then displays an info window containing
// the place ID and other information about the place that the user has
// selected.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var input = document.getElementById('pac-input');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
// Specify just the place data fields that you need.
autocomplete.setFields(['place_id', 'geometry', 'name']);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var infowindow = new google.maps.InfoWindow();
var infowindowContent = document.getElementById('infowindow-content');
infowindow.setContent(infowindowContent);
var marker = new google.maps.Marker({map: map});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
// Set the position of the marker using the place ID and location.
marker.setPlace({
placeId: place.place_id,
location: place.geometry.location
});
marker.setVisible(true);
infowindowContent.children['place-name'].textContent = place.name;
infowindowContent.children['place-id'].textContent = place.place_id;
infowindowContent.children['place-address'].textContent =
place.formatted_address;
infowindow.open(map, marker);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
async defer></script>
</body>
You'll need your own API key so make sure you go through Google's get started guide to properly set up your project and billing account.
Hope this helps!
There I have had this error when using Geocode I know there is a lot of the same question but I wasn't able to understand it so if you guys have a solution please give me your version of my code with your code inside of it
here is my code
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#floating-panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
width: 350px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#latlng {
width: 225px;
}
</style>
</head>
<body>
<div id="floating-panel">
<input id="latlng" type="text" value="40.714224,-73.961452">
<input id="submit" type="button" value="Reverse Geocode">
</div>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 40.731, lng: -73.997}
});
var geocoder = new google.maps.Geocoder;
var infowindow = new google.maps.InfoWindow;
document.getElementById('submit').addEventListener('click', function() {
geocodeLatLng(geocoder, map, infowindow);
});
}
function geocodeLatLng(geocoder, map, infowindow) {
var input = document.getElementById('latlng').value;
var latlngStr = input.split(',', 2);
var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === 'OK') {
if (results[0]) {
map.setZoom(11);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY" async defer></script>
Thank you I hope someone could help been having this problem alot
This error indicates on a missing Google Maps API key.
https://developers.google.com/maps/documentation/javascript/get-api-key
Click the button below, to get an API key using the Google Cloud Platform Console. You will be asked to (1) pick one or more products, (2) select or create a project, and (3) set up a billing account. Once your API key is created you will be prompted to restrict the key's usage. For more information, see Restricting an API key.
(Button is present in the link)
When loading the Maps JavaScript API, substitute YOUR_API_KEY in the
code below with the API key you got from the previous step.
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>
If you follow the steps beyond the link, that should fix the error you're getting.
I'm using the Google Place ID as a way to link locations and other content in my database. So Basically I've created an admin page that allows me to set up a way to easily enter new locations and it's content.
On my admin page I've added a map using Place ID finder from Google so I can search for a place and in the InfoWindow highlight to copy the Place ID information, and then paste this information. For some reason the infowindow does not allow the highlight.
I thought it might be because the additional code from my admin page but when I viewed the demo on Google developer documentation the demo also does not allow highlighting. If on the demo or my admin page I can click on another place on the map, a new InfoWindow pops up and that information is highlightable.
Can someone help using the code from documentation on Google Site (below), recode to allow the searched information window to be highlightable?
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.controls {
background-color: #fff;
border-radius: 2px;
border: 1px solid transparent;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
height: 29px;
margin-left: 17px;
margin-top: 10px;
outline: none;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
.controls:focus {
border-color: #4d90fe;
}
.title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location">
<div id="map"></div>
<div id="infowindow-content">
<span id="place-name" class="title"></span><br>
Place ID <span id="place-id"></span><br>
<span id="place-address"></span>
</div>
<script>
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var input = document.getElementById('pac-input');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var infowindow = new google.maps.InfoWindow();
var infowindowContent = document.getElementById('infowindow-content');
infowindow.setContent(infowindowContent);
var marker = new google.maps.Marker({
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
// Set the position of the marker using the place ID and location.
marker.setPlace({
placeId: place.place_id,
location: place.geometry.location
});
marker.setVisible(true);
infowindowContent.children['place-name'].textContent = place.name;
infowindowContent.children['place-id'].textContent = place.place_id;
infowindowContent.children['place-address'].textContent =
place.formatted_address;
infowindow.open(map, marker);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
async defer></script>
</body>
</html>
Link to the example in the documentation (which demonstrates the issue): Place ID Finder - Google Maps Javascript API
The infowindow-content has the CSS user-select: none; set (so the user can't select the text). You can override that with:
#infowindow-content {
user-select: text !important;
-webkit-user-select: text !important; /* for safari per Avrahm Kleinholz */
}
proof of concept fiddle
related issue in the issue tracker: Issue 11331: text inside InfoWindow cannot be selected
code snippet:
// This sample uses the Place Autocomplete widget to allow the user to search
// for and select a place. The sample then displays an info window containing
// the place ID and other information about the place that the user has
// selected.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -33.8688,
lng: 151.2195
},
zoom: 13
});
var input = document.getElementById('pac-input');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var infowindow = new google.maps.InfoWindow();
var infowindowContent = document.getElementById('infowindow-content');
infowindow.setContent(infowindowContent);
var marker = new google.maps.Marker({
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
// Set the position of the marker using the place ID and location.
marker.setPlace({
placeId: place.place_id,
location: place.geometry.location
});
marker.setVisible(true);
infowindowContent.children['place-name'].textContent = place.name;
infowindowContent.children['place-id'].textContent = place.place_id;
infowindowContent.children['place-address'].textContent =
place.formatted_address;
infowindow.open(map, marker);
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.controls {
background-color: #fff;
border-radius: 2px;
border: 1px solid transparent;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
height: 29px;
margin-left: 17px;
margin-top: 10px;
outline: none;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
.controls:focus {
border-color: #4d90fe;
}
.title {
font-weight: bold;
}
#infowindow-content {
user-select: text !important
}
<input id="pac-input" class="controls" type="text" placeholder="Enter a location">
<div id="map"></div>
<div id="infowindow-content">
<span id="place-name" class="title"></span>
<br>Place ID <span id="place-id"></span>
<br>
<span id="place-address"></span>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script>
To answer my own question with the help of geocodezip, I Googled user-select and found that for Safari they require -webkit-user-select: text; as user-select doesn't work with the Apple browser. So my code reads and it works perfectly!
#infowindow-content {
user-select: text !important;
-webkit-user-select: text !important;
}
I'd like to know how to remove the "limit" on markers that this piece of code has. I'm using the Geocode feature + Autocomplete feature from Google Maps API.
<title>Places Searchbox</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 300px;
}
#pac-input:focus {
border-color: #4d90fe;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#target {
width: 345px;
}
</style>
<body>
<div id="page-wrapper" class="google-map" style="padding:0;">
<div class="col-xs-12 col-sm-6 google-map" style="padding:0;">
<ul class="list-group">
<li class="list-group-item">
<h4>Item header</h4>
<address>
Address line 1<br>
Address line 2<br>
City<br>
Post Code
</address>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 google-map" style="padding:0;">
<input id="pac-input" class="form-control controls" type="text" placeholder="Search Box">
<div id="map"></div>
</div>
</div>
</body>
<script>
function initAutocomplete() {
var bounds = new google.maps.LatLngBounds();
var myOptions = {
mapTypeId: 'roadmap'
};
var addresses = ['WF1 1DE', 'SE6 4XN', 'SW15 5DD', 'CV10 7AL', 'BN10 7JG', 'BS14 8PZ', 'BN1 3DA', 'CV11 5HF', 'SE23 3SA', 'BN2 5QX', 'ST4 8YL', 'CM3 5SF', 'SP4 9JZ'];
// Info Window Content
var infoWindowContent = ['<div class="info_content"><h4>Item header</h4><p>Address line 1<br>Address line 2<br>City</p></div>'];
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById("map"), myOptions);
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
if (geocoder) {
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow();
var counter = 0;
for (var x = 0; x < addresses.length; x++) {
geocoder.geocode({
'address': addresses[x]
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
var iwContent = infoWindowContent[counter];
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: addresses[counter]
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(iwContent);
infoWindow.open(map, marker);
});
counter++;
// Automatically center the map fitting all markers on the screen
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
}
}
});
}
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&callback=initAutocomplete" async defer></script>
I do believe that the answer lies somewhere around :
for (var x = 0; x < addresses.length; x++) {
geocoder.geocode({
'address': addresses[x]
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
var iwContent = infoWindowContent[counter];
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: addresses[counter]
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(iwContent);
infoWindow.open(map, marker);
});
counter++;
// Automatically center the map fitting all markers on the screen
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
}
}
});
}
At this point it only displays 11 markers for some reason. I need for it to be able to show as many as I need as I'll be getting data from a database.
The geocoder is subject to a quota and a rate limit. Check the status returned by the service when it isn't OK. You will find it is OVER_QUERY_LIMIT.
There are several solutions to handling status OVER_QUERY_LIMIT from the service. A couple of options:
OVER_QUERY_LIMIT in Google Maps API v3: How do I pause/delay in Javascript to slow it down?
Multiple markers Google Map API v3 from array of addresses and avoid OVER_QUERY_LIMIT while geocoding on pageLoad