‘google’ is not defined Using Google Maps JavaScript API Loader

I have a Vue CLI project that uses the Google Maps JavaScript API Loader. I import the loader using the code below: import { Loader } from “@googlemaps/js-api-loader”; After that, I defined …

Multiple tile issue google maps API v3 JS

I have a map where user from an admin panel can add many tiled layers to the map. Those layers will be added to the map in the form of loop. The user can switch the layer on and off based on their …

Change icon back to default state after infoWindow closed Google Maps

So my goal here is to make the icon go from the “normalIcon” state to the “activeIcon” state on button click, which it currently does. It opens an infoWindow when the pin is …

Google Maps Infobox images pop out to another infobox with an image gallery

So I have this location that I have images for. I have about 15 images and I want there to only be 4 images on the infoWindow for the location and then you can click on the images and it will …

Generate dynamic KML and load it with Maps API

Hi all i have task to create monitoring of 200 ip addresses and for each of this ip we have location latitude/longitude. Now for the monitoring purpose i have perl script runing which pings all …

Adding Marker Label underneath a marker to Google Maps in google-maps-react

I am using google-maps-react package to create the Google map and using Marker to create the markers. My Question: How can I add the marker label underneath the marker? Right now I have it displaying a title but its on-top of the marker. I have screen shots of what I have now vs what I’m trying to accomplish besides the custom marker icon. This is my function of creating the marker. }; Then this is my render to display the map then calling the display marker function. } This is my marker now This is what I’m trying to get

Moving Bus Icon on Google Map Using JavaScript

I’m using Javascript Google Map. I want to add a moving bus icon as the map marker will reload a new location every 5 seconds. Everything is running perfectly. I just want to add an icon that will look like a real bus, which will move on the road. I did search for that and found the following code: My Question is: how can I generate the same icon/code for a school bus? Thanks in advance. Answer The code that you provided is a SVG path. You can create your own SVG path that draws a bus and then use

calculate distance between two coordinates in javascript?

I am trying to calculate distance between two lats and longs in KM and show that distance in label or paragraph. I have an address from which I need to figure out lat1 and lon1. I am able to figure …

Position of a dragged latlon Google Map JavaScript

Below code shows the path between two latlongs : function mapLocation() { var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { …

Get only countries to autocomplete from Google Maps API

I’m using Google Maps API to get autocomplete list of cities and countries (without other details), and it works exellent. var input = document.getElementById(‘newAddress’); var options = { …