Google Map标记在上传到服务器后不显示，本地工作正常 [英] Google Map marker not showing after uploading to server, locally works fine

问题描述

我试图实现一个启用了Google地图的简单网页，但我遇到了一个问题，那就是我的Google地图标记在将文件上传到托管服务器后未显示出来，它在本地运行良好。

我尝试使用自定义标记和默认标记，问题是相同的，它在本地工作，但上传后没有。

以下是我正在使用的脚本

  / * GOOGLE MAPS * / 
 
函数初始化（）{
 
 //声明地图样式
 var grayscale = [{featureType：landscape，stylers：[ { 饱和： -  100}，{ 亮度：65}，{ 能见度： 上}]}，{ 类型特征： POI， 造型器：[{ 饱和： -  100 }，{ 亮度：51}，{ 能见度： 简化}]}，{ 类型特征： road.highway， 造型器：[{ 饱和： -  100}，{能见度： 简化 }]}，{ 类型特征 ： road.arterial， 造型器：[{ 饱和： -  100}，{ 亮度：30}，{ 能见度： 上 }]}，{ 类型特征： road.local， 造型器：[{ 饱和： -  100}，{ 亮度：40}，{ 能见度： 上}]}，{ 类型特征： 运输， 造型器：[{ 饱和： -  100}，{ 能见度： 简化}]}，{ 类型特征： administrative.province， 造型器：[ { 可视性： 关}]}，{ 类型特征： 水， 的ElementType： 标签， 造型器：[{ 可视性： 上}，{ 亮度： - 25}，{ 饱和： -  100}]}，{ 类型特征： 水， 的ElementType： 几何， 造型器：[{ 色相： ＃FFFF00}，{ 亮度： -  25}，{ 饱和： -  97}]}]; 
 
 var mapOptions = {
 center：{lat：46.211000，lng：16.913157}，
 zoom：13，
滚动：false 
 
}; 
 
 var map = new google.maps.Map（document.getElementById（'map-canvas'），
 mapOptions）; 
 
 //更改地图样式
 map.setOptions（{styles：greyscale}）; 
 
 var image ='img / vemo-google-map-marker.png'; 
 var marker = new google.maps.Marker（{
 position：{lat：46.211000，lng：16.913157}，
 map：map，
 title：VEMO TRADE doo ，
图标：图片，
}）; 
 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
  

$ b $

解决方案

  var image ='//YOUR_DOMAIN/img/vemo-google-map-marker.png'; 
  

I'm trying to implement a simple page that have google maps enabled, but I'm having an issue where my google maps marker is not showing after uploading the files to the hosting, it works fine locally.

I tried both using a custom marker and the default one, the issue is the same, it works locally but doesn't after uploading.

Here's the script I'm using

/*GOOGLE MAPS*/

function initialize() {

        // Declare map style
        var grayscale = [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}];     

        var mapOptions = {
          center: {lat: 46.211000, lng: 16.913157},
          zoom: 13,
          scrollwheel: false

        };

        var map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);

        // Change map style
        map.setOptions({styles: grayscale});

        var image = 'img/vemo-google-map-marker.png';
        var marker = new google.maps.Marker({
                position: {lat: 46.211000, lng: 16.913157},
                map: map,
                title: "VEMO TRADE d.o.o.",
                icon: image,
        });

}
google.maps.event.addDomListener(window, 'load', initialize);

解决方案

You need to specifiy whole absolute path here:

var image = '//YOUR_DOMAIN/img/vemo-google-map-marker.png';

这篇关于Google Map标记在上传到服务器后不显示，本地工作正常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！