Questions tagged [google-maps-api-3]

The latest release of Google Maps JavaScript API, Version 3, empowers you to seamlessly integrate the incredible features of Google Maps into your website. With a specific focus on enhancing mobile experience, Version 3 offers remarkable support for various devices. For any queries related to non-programming or licensing aspects, feel free to reach out and engage with fellow developers in the Maps API Google Group through the provided link in the full description.

Influencing location preferences in Google's place search

I'm currently implementing a Google Places search feature and I need to enable "Location Biasing" for the GCC countries (UAE, Saudi Arabia, Oman, Kuwait & Bahrain). My goal is to achieve the functionality described in the following link: https://deve ...

javascriptgoogle-mapsgoogle-maps-api-3geolocation

Notify of a specific value in an array that is retrieved through an AJAX request

I'm currently facing an issue with trying to display the value obtained from an ajax call. The code snippet below is functional in such a way that it will successfully alert the value of 'row' when grid.onClick is triggered. However, I am struggling to fin ...

ajaxgoogle-mapsjquerygoogle-maps-api-3

Utilizing PHP and jQuery to dynamically populate Google Maps with multiple markers

I am currently working on integrating a Google map with a database to dynamically display multiple markers using PHP and MySQL. Below is the code I have been using: <?php //This section retrieves data from the database for later use in jQuery //CREATE ...

javascriptphpjquerygoogle-mapsgoogle-maps-api-3

Error in Angular 5: Google Maps not defined

Having trouble implementing Google Maps on my Angular 5 app. Upon loading the view, I am encountering this error in the JavaScript console: LoginComponent_Host.ngfactory.js? [sm]:1 ERROR ReferenceError: google is not defined at LoginComponent.ngAfterVie ...

angulargoogle-mapstypescriptgoogle-maps-api-3npm

Is the specified coordinate a point inside the boundaries of a polygon on Google Maps?

Is there a PHP method to determine if a pair of lat/lng values is within a polygon? I noticed that the Google Maps API has a containsLocation method (link: https://developers.google.com/maps/documentation/javascript/reference). Can this be utilized in PH ...

phpgoogle-mapsgoogle-maps-api-3

Exploring locations using the Google Geolocation API

I have a website and am trying to determine the location of my visitors. I came across this code on Google Code: <script type="text/javascript" src="gears_init.js"></script> <script type="text/javascript"> var geo = google.gears.factory ...

phpjavascriptjquerygoogle-maps-api-3

Postal Code Auto-Suggest by Google

I'm attempting to create a unique autocomplete feature for a text box that specifically provides postal codes. To accomplish this, I have followed the guidelines outlined in the documentation found at https://developers.google.com/places/webservice/autocom ...

javascriptgoogle-mapsgoogle-maps-api-3autocomplete

Investigating Memory Usage in Google Maps API v3

I have been working on my project utilizing the Google Maps API v3, but I have encountered some significant memory leaks while browsing. Despite my efforts to find unload methods specifically for Gmap, I have not been successful. My website uses ajax, and ...

ajaxmemory-leaksgoogle-maps-api-3

Enhance User Experience by Dynamically Updating Google Maps Markers with Custom Icons Using Django and JSON

Hey StackOverflow Community! I've been working on creating a web interface to showcase the communication statuses of different network elements. I'm almost done with the challenging part that I had been procrastinating. To add an awesome touch, I decided ...

ajaxjsondjangogoogle-mapsgoogle-maps-api-3

Displaying numerous Google maps on a single webpage featuring distinct collections of location markers

Currently, I am utilizing the Google Maps API to showcase two distinct Google maps on a single page. Each map comes with its own set of unique markers that are dynamically generated via Wordpress from various custom post types. While one map is successful ...

javascriptgoogle-mapsgoogle-maps-api-3

How to drop several pins on Google Maps with JavaScript

I am working on incorporating multiple markers into a Google map using ajax, javascript, and php. Although there are no errors in my code, the markers are not appearing as expected. I would greatly appreciate any assistance with this issue. Please refer to ...

javascriptphpajaxgoogle-mapsgoogle-maps-api-3

The fitBounds() method in Google Maps API V3 is extremely helpful for adjusting

I am trying to display a map on my website using this code: function initialize() { var myOptions = { center: new google.maps.LatLng(45.4555729, 9.169236), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP, panControl: true, mapTyp ...

javascriptgoogle-mapsgoogle-maps-api-3

Explore the wonders of Google Maps with the convenience of bpopup through ajax

I am currently using the bpopup plugin for ajax popups on my website. I have successfully implemented a popup with a Google map, but I am facing some issues when loading the map asynchronously. JavaScript $(document).on('click', '.aboutBranc ...

jqueryajaxgoogle-mapsgoogle-maps-api-3bpopup

Incorporating external API information into Google Maps

My current challenge involves creating a polygon on Google Maps using data obtained from an external API found at . Upon analyzing the API response, the following information is provided: { "id": 28, "name": "Local spots", "description": "", "isprivate": ...

javascriptjqueryajaxgoogle-mapsgoogle-maps-api-3

Adding markers to Google Maps for events

Greetings! I am currently utilizing the AngularGM library for my project, which can be found at https://github.com/dylanfprice/angular-gm. This library offers directives for Google Maps and markers. However, one limitation is that it does not support mar ...

google-mapsangularjsgoogle-maps-api-3google-maps-markersmarkerclusterer

Mapping Services API for Postal Code Borders by Google

After hitting a dead end with Google Maps Marker, I am seeking help to replicate the functionality for users on my website. Specifically, I want to take a user's postal code and outline their boundaries using Google Maps API. If anyone has knowledge o ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Changing Marker Color in Google Maps API

There are multiple Google Maps Markers colors based on certain conditions being TRUE or not. In addition, these Markers will change color when the mouse hovers over a division (a1,a2..ax). I want the Markers to revert back to their original color when th ...

javascriptgoogle-mapsgoogle-maps-api-3

When attempting to include fit="true" on ui-gmap-markers, a.lat does not function properly

It seems I am encountering an error that reads "TypeError: a.lat is not a function." I'm not sure why this is happening, so any assistance would be greatly appreciated! Below is the stack trace: TypeError: a.lat is not a function at oh.extend (main.js:34 ...

angularjsgoogle-mapsgoogle-maps-api-3

Deciphering the JSON structure of GoogleMaps Directions API

Looking to utilize the Google Maps API direction JSON Object? Check it out here In order to display instructions as a user reaches a location, I need to access the "STEPS" JSON Array. This array contains startLocation and endLocation objects. I have the ...

arraysjsongoogle-mapsgoogle-maps-api-3google-directions-api

"JSON data is successfully obtained through Ajax Request but triggers an error in

After conducting a thorough search for the error, I came across some useful hints which unfortunately did not help in resolving the issue. Many of the queries raised were related to an invalid JSON response. The problem arises when making an Ajax request ...

jqueryjsonajaxgoogle-maps-api-3coffeescript

Google Maps API - Custom Label for Map Markers

I am trying to implement a custom map on my website, and everything seems to be working fine except for one issue. The red marker on the map needs to have a label, but I don't want to use an additional image as an icon. Is there a way to add a label witho ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Utilizing latitude and longitude coordinates for generating visual representations of user location data

I am working on a mobile application that allows users to capture and save information about their favorite monuments. When a user takes a photo of a monument, the app instantly records the latitude and longitude values as separate entities. Afterwards, t ...

phpjquerypostgresqlgoogle-maps-api-3

Encountering difficulties with the functionality of Google Places API

I am attempting to incorporate the autocomplete functionality of Google Places API into a text field. Below is the code I have implemented: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script> <script ...

javascripthtmlgoogle-maps-api-3

`Unable to process JSON information from Google Places`

I am currently working on retrieving a rating for a specific place from Google using a JSON request by placeID. The fields I am requesting are the name and rating of the place. Upon viewing the JSON URL in my browser, I can see the data displayed as follow ...

jqueryjsongoogle-maps-api-3

The Google Javascript API Photo getURL function provides a temporary URL that may not always lead to the correct photo_reference

Currently, I am integrating Google Autocomplete with Maps Javascript API into my Angular 5 application. As part of my website functionality, I fetch details about a place, including available photos. The photo URL is obtained through the getURL() method. ...

javascriptangulargoogle-maps-api-3

"Modify marker icon upon click event in Google Maps by utilizing the loadGeoJson function

I have successfully loaded the markers from a json file using loadGeoJson. While I am able to SET the marker icon/img on load, I am unsure of how to CHANGE it upon click. Is there a way to target the clicked marker and perform a setIcon or similar action ...

javascriptgoogle-mapsgoogle-maps-api-3clickicons

Leveraging JS Variables within Twig Template

I am trying to incorporate a JavaScript variable into Twig. Despite attempting to implement the solution mentioned here, my code below does not render the map properly. If I remove the part between "var polylineCoordinates" and "polyline.setMap(map);", th ...

javascriptsymfonygoogle-maps-api-3twig

Does the zoom value in the HTML file adjust when I zoom in or out on the Google Map?

I'm uncertain if my question is sufficiently clear. Here's my dilemma: I've been utilizing the gmplot module in Python and I'm interested in adjusting the grids to be scalable based on the zoom level of the Google Map. However, being unfamiliar with HTML, ...

pythonhtmlgoogle-mapsgoogle-maps-api-3

Importing a geoJSON object directly onto Google Maps V3

I am currently working on developing a map using floor plans stored in mongodb. Instead of saving the JSON data into a file and calling it with map.data.loadGeoJson('myfile.json'), I want to create an object directly for better efficiency. Below ...

jsongoogle-mapsgoogle-maps-api-3geojson

What is the process for incorporating Dark Mode into a map?

Hey there! I'm diving into the world of web development and experimenting with a new react google maps package. I used npm i @vis.gl/react-google--maps to install it. I'm curious if there's a way to switch the embedded google map on my webs ...

reactjsnext.jsgoogle-maps-api-3darkmode

The Google Maps App fails to launch now

Recently, my map started experiencing issues. The problem seems to be related to the HTML using a javascript and css file that is loaded from Google Drive for display. However, when I directly load these files from my computer, it works perfectly fine. Bel ...

htmlgoogle-mapsgoogle-maps-api-3google-drive-api

Mapping corners with Google Maps

The mask assigned to webkit-mask-image will remain stationary even when scrolling the page. View jsFiddle Sample body{ height:1500px; } #wrapper { margin-top:250px; width: 300px; height: 300px; border-radius: 100px; overflow: hi ...

cssgoogle-maps-api-3

Conceal and Reveal every marker on the map

Creating a map using angular to display data on the web page and Google Map is my current project. This is my first major project utilizing Angular, and I have nearly achieved the functionality as planned. I am eager to enhance the site with more user-fri ...

javascriptangularjsdictionarygoogle-maps-api-3markers

Utilizing Json data with Jquery for dynamically placing markers on Google Maps

Seeking assistance as I am currently facing a problem where I need to loop through JSON data and add it as markers on Google Maps, but unfortunately, it only returns null value. Is there a way to automatically connect this to JSON? My plan is to have a Gr ...

javascriptjqueryjsongoogle-maps-api-3

What is the best way to add conditional statements within app.get() in node.js/express?

I have set up a node.js server with express to perform some operations, such as parsing a log file, extracting IP addresses, and converting them into coordinates using an external API. These coordinates will be used to display a Google map on my html/ejs p ...

node.jsexpressgoogle-maps-api-3

At times, the map may only be visible in the top left corner of its designated container

Currently, I am integrating the Google Maps API v3 for JavaScript into my project. However, I am facing an issue where the map only appears in the upper left corner under certain circumstances. To visualize this problem, you can visit this link and click ...

javascriptgoogle-maps-api-3

Utilizing the zIndex property on a map label does not produce any impact when combined with a GeoJSON layer

Utilizing the Google map label tool, I am trying to showcase certain property from GeoJSON data on a GeoJSON layer. However, the issue arises as the layer has a dark color and the label is appearing blurry behind the GeoJSON data layer. Despite attempting ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3geojson

The zoom level on Google Maps adjusts based on the size of the window when it

In reference to my previous inquiry about Google maps responsive resize, I am now looking to incorporate dynamic zoom levels based on the window size. Specifically, I want the map to automatically adjust its zoom level when the browser window is resized -- ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Identify and mark labels when hovering over them

Hello everyone! I'm completely new to this, so please be gentle :). Apologies in advance if my terminology is off. I have zero experience with HTML, but I landed here from working with FileMaker. Currently, I am developing a FileMaker database for my ...

htmlgoogle-maps-api-3

Safari-exclusive: Google Maps API dynamically altering page aesthetics post-loading

Recently, I encountered a peculiar problem. Upon loading a page, the text displayed with full opacity. However, upon the Google Maps API loading after 2 seconds, the entire page's styling suddenly changed. It was as if the text on the page became less opaq ...

javascripthtmlcssgoogle-mapsgoogle-maps-api-3

Discrepancy detected in AGM Map printout

When attempting to print my Angular AGM Map from Chrome, I noticed a large grey gap in the map. This gap is visible even when "background graphics" are turned off and it causes the map image below it to shift downwards. If you want to reproduce this issue ...

cssangulargoogle-maps-api-3printingangular-google-maps

Limit access to Google Fusion Table to specific types of maps. Eliminate Google Fusion Table for selected map formats

Currently, I am in the process of creating a web map using the Google Maps Javascript API. My objective is to display a Google Fusion Table containing buildings in Boston exclusively on a stylized map named "Buildings." When I switch to the Buildings map t ...

javascripthtmlgoogle-mapsgoogle-maps-api-3google-fusion-tables

Issues with validating the Google Maps API JavaScript tag

Currently working on updating a website to be fully validated with HTML5 using W3C standards. Having trouble validating the Google Maps API JavaScript tag in the code snippet below: <script src="http://maps.googleapis.com/maps/api/js?libraries=places& ...

javascriptvalidationgoogle-maps-api-3

What is preventing me from loading Google Maps within my Angular 2 component?

Below is the TypeScript code for my component: import {Component, OnInit, Output, EventEmitter} from '@angular/core'; declare var google: any; @Component({ selector: 'app-root', templateUrl: './app.component.html', st ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3angular

Incorporate JSON information into HTML dropdown menu using Google API

I'm finding it difficult with this task. Below is a list that needs the name and address inserted into the dropdown menu from the JSON file. <div class="dropdown-list"> <div class="list-container"> <ul class="list"> ...

javascriptjsongoogle-maps-api-3

Setting the borderRadius for a web view on Android Maps V3: A complete guide

In my application, I am using Android Map V3 and have encountered a bug specific to the Kit-Kat version. The chromium kit throws up an error message - nativeOnDraw failed; clearing to background color, which prevents the map from being displayed. Despite ...

javascriptandroidcssgoogle-mapsgoogle-maps-api-3

Customizing Google Maps API v3: Utilizing Custom Images as symbolPath Instead of Default Symbols

Recently, I discovered the fascinating feature called Symbol Animation in Google API's documentation. All aspects of my code are functioning optimally; however, I am curious to know if it is possible to substitute an image for a symbol in the following co ...

javascriptjquerygoogle-mapsgoogle-maps-api-3google-maps-markers

Google Maps API now offers the ability to generate directions with up to 500 waypoints

I am facing a challenge with displaying a route on Google Maps using an array of 500 waypoints extracted from a GPS route. Google Maps is unable to create a direction or route with more than 23 waypoints, making it difficult to replicate the original GPS ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3ionic-framework

creating unique marker shapes with angular google maps

I am currently integrating the angular google maps directive (found at http://angular-ui.github.io/angular-google-maps/) into my application. In the process of converting my code to work with this directive, I have encountered an issue while trying to appl ...

angularjsgoogle-mapsgoogle-maps-api-3angular-google-maps

Guide to integrating Google Maps JS API into a React application without relying on third-party libraries

I'm currently grappling with the concept of integrating external APIs in React and am interested in using Google Maps' API to showcase a map within a child component. My goal is to gain insight into how this can be done without relying on any external libr ...

javascriptajaxgoogle-mapsreactjsgoogle-maps-api-3

Tips for minimizing the number of map calls in an Angular Web App using agm-core

Our team has developed a user-friendly application using Angular with 5 pages, each featuring a Google map. The main reason for choosing Angular was to minimize the number of Map calls per user session to just 1; previously in our javascript-based app, thi ...

angulargoogle-mapsgoogle-maps-api-3angular-google-mapsagm-core

Turn off info windows for businesses and other points of interest, except for those within your own polygons on Google Maps

Is there a way to make only the infowindows attached to my polygons clickable on Google Maps? I don't want Points of Interests like Restaurants to have clickable infowindows. I tried changing the map style to hide business labels, but infowindows still a ...

cssgoogle-mapsgoogle-maps-api-3infowindow

Navigating with Google Maps and Its Pointers

I've successfully integrated a JSON array of Marker positions into a Google map. Each marker has an associated infoWindow, which is also functioning as expected. However, I'm encountering an issue where clicking on a marker only displays the in ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Implement a React Component as a unique OverlayView within the Google Maps application

Utilizing the Google Maps JavaScript API V3, I have created a map with clustered and draggable map markers. Instead of relying on React libraries that interact with the google maps API, we chose to build our own solution due to limitations in drag function ...

javascriptreactjsgoogle-mapsgoogle-maps-api-3

Utilize the fitBounds feature from GoogleMaps in Vuejs for seamless integration

I've been working on getting the map boundaries to work properly, using a method in conjunction with my existing initMap and askGeolocation methods. Despite my best efforts, I can't seem to get the bounds functionality working so that the map zo ...

javascriptgoogle-mapsvue.jsgoogle-maps-api-3

Retrieving latitude and longitude from place id in an Angular Google Maps component

Currently utilizing the google-maps component to extract latitude and longitude from Google Maps prediction data. Additionally, I have integrated a search bar using google-maps component. I have successfully implemented a search bar with ngx-google-places ...

angulartypescriptgoogle-mapsgoogle-maps-api-3

Issue encountered when integrating vue2-google-maps into a project using vue.js and Laravel 5.6.12

I am currently utilizing Laravel 5.6.12 in combination with vue.js I am attempting to integrate Google Maps using the following GitHub link I am adhering to the instructions provided in the aforementioned link, as follows. Installation npm install vue2 ...

google-maps-api-3vue.jslaravel-5.6

Obtain the identification address for a group of items

I have a JSON object containing place IDs, and I am attempting to retrieve the corresponding addresses for each ID. This is the code snippet I'm using: <div id="places" class="places"></div> <script> function initialize() { j ...

javascriptjquerygoogle-mapsgoogle-maps-api-3google-places-api

Understanding how to utilize environment variables in React.js can drastically improve

One of the key components in my project is using an environment variable like this: process.env.GOOGLE_MAPS_API This variable holds a Google API key which is crucial for rendering maps. However, I'm facing an issue with the following code snippet: expor ...

reactjsgoogle-mapsgoogle-maps-api-3environment-variables

What are some tips for utilizing markers that display location values in the format of a bar chart on Google Maps?

Hey there, I have a project in mind to create a Google map with markers representing specific locations and their values displayed as bar charts. Here is the code snippet from my index page: --index.html-- <!DOCTYPE html> <html> <head ...

javascripthtmlangularjsgoogle-mapsgoogle-maps-api-3

What methods can be used to extend the distance measurement with the help of Google Maps

I've searched online for the answer, but still haven't found it. I'm currently developing a website where users can search and select a location using the Google Geocoding API. Once the user chooses a place, I retrieve its bounds, but then I want to give ...

javascriptgoogle-mapsgoogle-maps-api-3

What steps do I need to take to update Oceania to Australia on Google Maps?

While incorporating the Google Maps API into Angular, an issue arises when zooming out completely: https://i.stack.imgur.com/oZRut.png The label is displaying "Oceania" instead of "Australia". Is there a feasible method to modify this discrepancy? ...

angulargoogle-mapsgoogle-maps-api-3

Display infobox within agm-marker-cluster

When trying to open the infoWindow inner agm-marker-cluster, I encountered an error message: Cannot read property 'then' of undefined This error occurred in the following line of code: return _this._markerManager.getNativeMarker(infoWindow.hos ...

angularjsgoogle-maps-api-3

Troubleshooting Problems with Google Maps and Javascript/JSON in Internet Explorer

Currently, I am utilizing the Google Maps API to construct a map that displays store locations in close proximity to a user-specified location. Everything is functioning properly, however, I am encountering an error in Internet Explorer that I would like t ...

javascriptjsoninternet-explorergoogle-mapsgoogle-maps-api-3

Is there a way to display a Google Map marker after a certain amount of time without needing to refresh the

Is it possible to update Google Map markers without refreshing the map itself every 30 seconds? The markers' latitudes and longitudes are retrieved from a database. Once obtained, these markers are then allocated onto the Google Map. However, the issue ...

javascriptphpgoogle-maps-api-3

Tips for referencing Google Maps initialization in individual files within a website application

After setting up my Google Maps API snippet: <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script> in the index.html file, I encountered the error: Uncaught InvalidValueEr ...

javascripthtmlangularjsgoogle-mapsgoogle-maps-api-3

Google Maps API is successfully loading from an HTML file, however, it is not functioning properly when accessed

I am facing an issue while trying to connect to the Google Maps API through an AngularJS application on my localhost. Despite finding the javascript file in the HTML and displaying 'test1' in the console, the `initMap` function is not being called and 'tes ...

javascriptangularjsgoogle-maps-api-3localhost

Is there a way to efficiently modify the positions of numerous markers on Google Maps while utilizing PhoneGap?

Hey there, I'm new to this and I have a service for tracking multiple cars. I'm using a timer to receive their locations, but I'm having trouble figuring out how to update the old marker with the new value. I've tried deleting all the markers and then ad ...

javascriptajaxcordovagoogle-maps-api-3

Retrieve coordinates of the clicked location with RichMarker in the Google Maps JavaScript API v3

I followed the solution provided here for richmarker.js After implementing it, when I use my_rich_marker.addListener('click', function(event) { console.log(event); //undefined } What I am trying to achieve is to access event.latLng of the ...

javascriptgoogle-maps-api-3

Using a ng-repeat directive with a custom marker from ng-map causes $digest loop errors, yet the functionality remains intact

Presently, I am utilizing this library to incorporate custom markers on a map. I successfully implemented it without any errors on Plunker, but encountered issues when trying to replicate the same on my own website (despite using identical script src link ...

angularjsgoogle-maps-api-3angular-google-mapsangularjs-digestng-map

Listener for clicking on a marker in Google Maps

Trying to add a click event to Google Map markers in my Cordova app has proven to be quite challenging. The recommended ways mentioned in the documentation don't seem to work, unless I make the marker draggable - which is not an option for me. It seems thi ...

javascriptangularjscordovagoogle-mapsgoogle-maps-api-3

`How can I incorporate personalized animations on Google Map V3 Markers as they are individually dropped on the map?`

This is a basic example of dropping markers one by one on Google Maps V3. I have implemented the drop animation when adding markers to the map. However, I am interested in customizing the drop with a fade animation. Is it possible using JavaScript or any ...

javascriptandroidjquerygoogle-mapsgoogle-maps-api-3

Access to a custom Google Map via an API connection

I currently have multiple custom Google Maps that I created using and they are all associated with my Google account. Is it possible to access these maps using the Google Maps JavaScript API? It seems like the API does not work with manually created maps ...

javascriptjsongoogle-mapsgoogle-maps-api-3

Angular - Javascript - Oops! The variable 'google' seems to have gone missing after reloading the page

For my website, I utilized Angular 2+ and integrated the Google Maps Api by adding the following code to my index.html file: <script async defer src="//maps.googleapis.com/maps/api/js?[myKey]&libraries=places"> </script> ...

javascriptangulargoogle-mapsvariablesgoogle-maps-api-3

Trouble with maps not showing up and the console isn't showing any errors when using @react-google-m

Currently, I am facing an issue while trying to integrate Google Maps by following a blog post that provides instructions on next13 TypeScript. Despite reaching the point where the maps should be displayed, nothing appears on the screen. Surprisingly, ther ...

typescriptnext.jsgoogle-maps-api-3