Remove limit on markers using Google Maps API Javascript - javascript

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

Related

How to add search box to Google map on website?

I have added maps to my website but can't seem to add a search box with the map to search locations. I have given the code below that I used for adding maps. Can someone help with adding search box to the code?
<div id="googleMap" style="width:100%;height:400px;"></div>
function myMap() {
var mapProp= {
center:new google.maps.LatLng(12.9716, 77.5946),
zoom:10,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
document.getElementById("latitude").value = e.latLng.lat();
document.getElementById("longitude").value = e.latLng.lng();
});
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=myMap"></script>
You can use Autocomplete in your code. It will provide a list of suggestion to complete the user's input. Once you choose the place from the list, you can then get the place property to present it on the map and put a marker on it.
Here is a simplified code where I incorporated your code to the Google Maps Platform Autocomplete code sample.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#googleMap {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#pac-container {
padding: 5px;
}
.pac-card {
margin: 10px 10px 0 0;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
background-color: #ffffff;
font-family: Roboto;
}
#title {
color: #fff;
background-color: #4d90fe;
font-size: 15px;
font-weight: 500;
padding-left: 5px;
}
.pac-controls label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#pac-input {
font-family: Roboto;
width: 400px;
}
#pac-input:focus {
border-color: #4d90fe;
}
</style>
</head>
<body>
<div class="pac-card" id="pac-card">
<div id="title">
Search Address
</div>
<div id="pac-container">
<input id="pac-input" type="text" placeholder="Enter a location">
</div>
</div>
<div id="googleMap"></div>
<script>
function myMap() {
var mapProp = {
center: new google.maps.LatLng(12.9716, 77.5946),
zoom: 10,
};
var map = new google.maps.Map(document.getElementById('googleMap'), mapProp);
var card = document.getElementById('pac-card');
var input = document.getElementById('pac-input');
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
var marker = new google.maps.Marker({
map: map
});
//Use Places Autocomplete
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function() {
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(10);
}
//Put markers on the place
marker.setPosition(place.geometry.location);
marker.setVisible(true);
});
}
</script>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=myMap" async defer></script>
</body>
</html>
You can also view this simplified code here.
You can use something like this:
// Create the search box and link it to the UI element.
var input = /** #type {HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** #type {HTMLInputElement} */(input));

google map API before / after function (like ajax)

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>

Google Maps Place ID Finder - Can not highlight (copy) information on InfoWindow

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;
}

Get the Clicked marker in Google maps and send it to a function

I tried to make google maps for cities in jordan that will Show information about the city to the user when the marker clicked
My problem is When I tried to get the Marker that been clicked by the user ,it always send the last marker in the For-loop that instantiate the markers and give the information
The for-loop works will and Give each marker it's own title,label and give an event listener for each marker
How can I get the clicked marker ?
<!DOCTYPE html>
<html>
<head>
<title>Gis Map</title>
<style>
.background {} p {
background-color: white;
}
span {
color: blue;
}
#Footer {
width: 100%;
height: 30px;
position: relative;
left: 0px;
bottom: 0px;
}
#Footer_text {
padding: 10px;
color: black;
background-color: #5B1B14;
}
#Fixed {
position: fixed;
top: 0px;
left: 0px;
height: 70px;
width: 100%;
z-index: 3;
background-color: #5B1B14;
}
#Fixed_img_c {
width: 20%;
height: 100%;
margin: 0 auto;
}
#Fixed_img {
height: 100%;
}
.paragraphs {
text-align: center;
z-index: 1;
font-size: 20px;
width: 100%;
color: red;
}
/*************************Menu*****************************/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0px;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover,
.offcanvas a:focus {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
</style>
</head>
<body>
<div id="Fixed">
<div id="Fixed_img_c">
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<div class="container">
<div id="mySidenav" class="sidenav">
×
Something
Something
</div>
<div id="map" style="width:100%;height:500px"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(
document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(31.9, 35.8),
mapTypeId: 'terrain'
});
//jordan cities locations
var locations = [
[31.8354533, 35.9674337],
[31.186446, 35.6248844],
[30.8071736, 35.5228078],
[32.0522945, 35.9935951],
[31.7157524, 35.7633807],
[32.0321557, 35.655972],
[32.3402518, 36.1527321],
[32.2699656, 35.824437],
[32.3415654, 35.7322292],
[32.5525113, 35.81239],
[30.2200923, 35.5467541],
[29.5909744, 35.1750487]
]
var info = [
["Amman", 4.007256],
["Al_Karak", 316.629],
["Tafilah", 96.291],
["Zarqa ", 1.364878],
["Madaba ", 189.192],
["Balqa ", 491.709],
["Mafraq ", 549.948],
["Jerash ", 237.059],
["Ajloun ", 176.080],
["Irbid ", 1.770158],
["Ma'an", 144.083],
["Aqaba ", 188.160]
]
var markers = new Array();
for (var i = 0; i < locations.length; i++) {
var coords = locations[i];
var latLng = new google.maps.LatLng(coords[0], coords[1]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
label: info[i][0],
title: info[i][0]
});
var infowindow = new google.maps.InfoWindow({
content: info[i][1] + ""
});
google.maps.event.addListener(marker, 'click', function() {
openNav();
//changeText();
infowindow.open(map, marker);
});
google.maps.event.addListener(map, 'click', function() {
closeNav()
});
}
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZInPKXBMPYpDNRGJwjGqJb6MRGog_haU&libraries=visualization&callback=initMap">
</script>
<div id="Footer">
<p id="Footer_text" class="paragraphs">dufault</p>
</div>
</div>
</body>
</html>
You need to associate the infowindow with the correct marker. One solution to that is function closure as demonstrated in the similar question: Google Maps JS API v3 - Simple Multiple Marker Example. For your code:
google.maps.event.addListener(marker, 'click', function(marker,i) {
return function() {
openNav();
//changeText();
// set the infowindow content for this marker (the function has closure on i)
infowindow.setContent(info[i][1]+"");
// open the infowindow on this marker (the function has closure on marker)
infowindow.open(map, marker);
}}(marker,i));
proof of concept fiddle
code snippet:
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
var map;
function initMap() {
map = new google.maps.Map(
document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(31.9, 35.8),
mapTypeId: 'terrain'
});
//jordan cities locations
var locations = [
[31.8354533, 35.9674337],
[31.186446, 35.6248844],
[30.8071736, 35.5228078],
[32.0522945, 35.9935951],
[31.7157524, 35.7633807],
[32.0321557, 35.655972],
[32.3402518, 36.1527321],
[32.2699656, 35.824437],
[32.3415654, 35.7322292],
[32.5525113, 35.81239],
[30.2200923, 35.5467541],
[29.5909744, 35.1750487]
]
var info = [
["Amman", 4.007256],
["Al_Karak", 316.629],
["Tafilah", 96.291],
["Zarqa ", 1.364878],
["Madaba ", 189.192],
["Balqa ", 491.709],
["Mafraq ", 549.948],
["Jerash ", 237.059],
["Ajloun ", 176.080],
["Irbid ", 1.770158],
["Ma'an", 144.083],
["Aqaba ", 188.160]
]
var markers = new Array();
for (var i = 0; i < locations.length; i++) {
var coords = locations[i];
var latLng = new google.maps.LatLng(coords[0], coords[1]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
label: info[i][0],
title: info[i][0]
});
var infowindow = new google.maps.InfoWindow({
content: info[i][1] + ""
});
google.maps.event.addListener(marker, 'click', function(marker, i) {
return function() {
openNav();
//changeText();
infowindow.setContent(info[i][1] + "");
infowindow.open(map, marker);
}
}(marker, i));
google.maps.event.addListener(map, 'click', function() {
closeNav()
});
}
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="Fixed">
<div id="Fixed_img_c">
</div>
</div>
<div class="container">
<div id="mySidenav" class="sidenav">
×
Something
Something
</div>
<div id="map" style="width:100%;height:500px"></div>
<div id="Footer">
<p id="Footer_text" class="paragraphs">dufault</p>
</div>
Try placing the listener in a function and pass the value you need
var myFunctinForListener = function(aMarker, aInfoWindow) {
google.maps.event.addListener(aMarker, 'click', function() {
openNav();
//changeText();
aInfoWindow.open(map, aMarker);
});
}
....
for (var i = 0; i < locations.length; i++) {
var coords = locations[i];
var latLng = new google.maps.LatLng(coords[0], coords[1]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
label: info[i][0],
title: info[i][0]
});
var infowindow = new google.maps.InfoWindow({
content: info[i][1] + ""
});
myFunctinForListener(marker, inforwinodow);
.....

How to show Google Map API only after it has completely loaded?

I'm trying to use the Places search functionality of Google Maps API.
My problem is, the search box shifts and the height of the API container changes after the map is completely loaded.
I've made a demonstration of the problem. Try refreshing the page and you'll observe the above mentioned behaviour.
I found similar questions and the suggestions were --
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
});
or
window.onload = map_initialize;
However, neither of them seem to solve this shift behaviour.
One option would be to set the input to display:none, add it to the map on the idle event, then display it.
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -33.8688,
lng: 151.2195
},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// 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);
google.maps.event.addListenerOnce(map, 'idle', function() {
input.style.display = "block";
});
proof of concept fiddle
code snippet:
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -33.8688,
lng: 151.2195
},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// 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);
google.maps.event.addListenerOnce(map, 'idle', function() {
input.style.display = "block";
});
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
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) {
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
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);
});
}
google.maps.event.addDomListener(window, 'load', initAutocomplete);
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;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<input id="pac-input" class="controls" type="text" placeholder="Search Box" style="display:none">
<div id="map"></div>
You can simply use the defer attribute for your <script> tag where you loading the google maps JS api, and a callback function to initialize your map.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google map demo</title>
<style type="text/css">
html,
body,
#map_canvas {
width: 100%;
height: 700px;
margin: 0;
padding: 0;
}
.infowindow * {
font-size: 90%;
margin: 0
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=initialize" defer></script>
</head>
<body>
<div id="map_canvas"></div>
</body>
<script type="text/javascript">
function initialize() {
alert("map api loaded");
// initialize map
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(37.422104808, -122.0838851)
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</html>

Categories