Discussion :

[lgm77]

Bonjour,
j'ai un problème avec mon code.
sous firefox ma carte ne s'affiche pas, erreur console "TypeError: map is undefined"
sous chrome ça marche 75% du temps, mais j'ai des fois une erreur "Cannot read property 'setCenter' of undefined"
mon code pour un site wordpress

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
<?php
function googlemap_show(){
    //JAVASCIPT
wp_enqueue_script('jqueryui','https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js',array('jquery'),'1.8.12',true);
wp_enqueue_script('Google maps','http://maps.google.com/maps/api/js?sensor=false',array('jquery'),'',true);
add_action('wp_footer', 'googlemap_script',30 );
    //HTML
    echo '
    <style>
      #map-canvas {
        margin: 40px 0;
        padding: 0;
        height: 390px;
      }
 
    </style>
    <div id="map-canvas"></div>';   
}
function googlemap_script(){
?>
<script type="text/javascript">
var map;
var myMarker = null;
function initCarte() {
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    backgroundColor: "#ffffff", // background color
    zoom: 15, // map zoom position
    mapTypeId: google.maps.MapTypeId.ROADMAP,
}
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
}
var myGeocoder = new google.maps.Geocoder();
var GeocoderOptions = {
    'address' : '<?= get_option('infos_adresse'); ?> <?= get_option('infos_codepostal'); ?> <?= get_option('infos_ville'); ?>, FRANCE',
    'region' : 'FR'
}
// Notre fonction qui traitera le resultat
    function GeocodingResult( results , status )
    {
      // Si la recher à fonctionné
      if( status == google.maps.GeocoderStatus.OK ) {
 
        // S'il existait déjà un marker sur la map,
        // on l'enlève
        if(myMarker != null) {
          myMarker.setMap(null);
        }
 
        // On créé donc un nouveau marker sur l'adresse géocodée
        myMarker = new google.maps.Marker({
          position: results[0].geometry.location,
          map: map,
          title: "titre du site"
        });
 
       // Et on centre la vue sur ce marker
        map.setCenter(results[0].geometry.location);
 
      } // Fin si status OK
 
    } // Fin de la fonction
 
    // Nous pouvons maintenant lancer la recherche de l'adresse
    var myGeocoder = new google.maps.Geocoder();
    myGeocoder.geocode( GeocoderOptions, GeocodingResult );
 
google.maps.event.addDomListener(window, 'load', initCarte);
 
</script>
<?php
} ?>

[lgm77]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
function googlemap_show(){
    //JAVASCIPT
wp_enqueue_script('Google maps','http://maps.googleapis.com/maps/api/js?sensor=false',array('jquery'),'',true);
add_action('wp_footer', 'googlemap_script',30 );
    //HTML
    echo '
    <style>
      #map-canvas{
    position: relative;
    height: 360px;
    overflow: hidden;
    margin:40px 0;
}
 
#map-canvas iframe,   
#map-canvas object,  
#map-canvas embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
 
    </style>
    <div id="map-canvas" style="width:100%;"></div>';   
}
function googlemap_script(){
?>
<script type="text/javascript">
 
var geocoder;
var map;
var contentString ='<div class="content"><img alt="contact jrm colors" itemprop="logo" src="<?php bloginfo("template_directory"); ?>/images/jrm-colors-peinture.png" width="120" height="97" style="float:left;height: 97px;width:120px;"><div style="margin-left:130px;padding-top:20px;"><?= get_option('infos_adresse'); ?><br><?= get_option('infos_codepostal'); ?><?= get_option('infos_ville'); ?><br><?= json_encode(get_option('horaire')); ?></div></div>';
function initialize() {
  geocoder = new google.maps.Geocoder();
  geocoder.geocode( {
    address: '<?= get_option('infos_adresse'); ?> <?= get_option('infos_codepostal'); ?> <?= get_option('infos_ville'); ?>, FRANCE',}
    , function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
              map: map,
              draggable:false, //set marker draggable 
                animation: google.maps.Animation.DROP, //bounce animation
              position: results[0].geometry.location
          });
        var infowindow = new google.maps.InfoWindow({
        content: contentString,
        maxWidth: 350
            });
        infowindow.open(map,marker);
 
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
    });
  var mapOptions = {
    zoom: 14,
    panControl: true, //enable pan Control
            zoomControl: true, //enable zoom control
            zoomControlOptions: {
             style: google.maps.MapTypeControlStyle.DROPDOWN_MENU //zoom control size
        },
            scaleControl: true, // enable scale control
  }
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 
 
}
google.maps.event.addDomListener(window, 'resize', initialize);
google.maps.event.addDomListener(window, 'load', initialize);
 
</script>