1. Dismiss Notice

Google Maps <script> positioning

Discussion in 'Infoway WordPress Theme' started by enitharmon, Dec 5, 2013.

Thread Status:
Not open for further replies.
  1. enitharmon

    enitharmon New Member

    Joined:
    Aug 21, 2013
    Messages:
    3
    Likes Received:
    0
    Hi, I'm adding a custom Google Map to a Infoway theme site, but when I paste the script just before </head> tag in header.php it just won't work.
    I tried to paste the code in other positions inside the <head></head> but no, it just doesn't work.
    Seems like there's a conflict with other jscripts.
    I also tried to paste my code through "Google Tracking Code" inside admin panel.

    This is the code I need to embed into the header, in order for showing the map inside a <div id="map_canvas">

    HTML:
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
      function initialize() {
      var styles =
        [ { "stylers": [ { "hue": "#ffa200" } ] },
        { "featureType": "poi.business", "stylers": [ { "visibility": "off" } ] },
        { "featureType": "transit.station", "stylers": [ { "visibility": "off" } ] },
        /*{ "featureType": "poi.place_of_worship", "stylers": [ { "visibility": "off" } ] },*/
        //{ "featureType": "road.highway", "elementType": "labels.text", "stylers": [ { "visibility": "on" }, { "color": "#000000" }, { "weight": 0.9 } ] },
        //{ "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "visibility": "on" }, { "color": "#ffffff" } ] }
        ];
 
        var map_options = {
        center: new google.maps.LatLng(41.822067,12.797937),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        panControl: false,
        zoomControl: true,
        zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL,
        position: google.maps.ControlPosition.LEFT_CENTER
                            },
        scaleControl: false,
        rotateControl: false,
        rotateControl: false,
        overviewMapControl: false,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        styles:styles
        };
 
        var map = new google.maps.Map(document.getElementById('map_canvas'), map_options)
        var myLatLng = new google.maps.LatLng(41.822067,12.797937);
 
        var contentString = '<div id="content">'+
              '<div id="siteNotice">'+
              '</div>'+
              '<h4 id="firstHeading" class="firstHeading">srl</h4>'+
              '<div id="bodyContent">'+
              '<p>Via </p>'+
              '<p>RM</p>'+
              '</div>'+
              '</div>';
 
        var infowindow = new google.maps.InfoWindow({
                  content: contentString
              });
        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        var Marker = new google.maps.Marker({
            position: myLatLng,
            title:'Gestcap srl',
            icon: 'http://www.studiomedicodonati.it/donatiMark.png',
            map: map
        });
        google.maps.event.addListener(Marker, 'click', function() {
            infowindow.open(map,Marker);
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
     
 
    </script>
     
    enitharmon, Dec 5, 2013
    #1
  2. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Hello,

    I think you try to add Google map in your site.
    For this
    Just go to https://maps.google.com/ and copy your iframe embed code from there.

    Sending image for reference

    [​IMG]

    then,
    Go to
    Appearance > Widgets
    Drag Text widgets and paste iframe code there and drop it in the first widget area, It will automatically display at your footer.
     
    Gourav, Dec 5, 2013
    #2
  3. enitharmon

    enitharmon New Member

    Joined:
    Aug 21, 2013
    Messages:
    3
    Likes Received:
    0
    Well, thank you Gourav, but I'm not using a standard Gmap for my website.
    I'm making a custom one through API v3 ( https://developers.google.com/maps/documentation/javascript/tutorial ).
    That's why I'm trying to understand why the JS code is not loading properly, or if there is an interaction between GMaps script and other JS in the header.


    [EDIT] Ok, I solved the issue fixing JS code. Now it works properly pasting the code just before </head> tag .

    Thank you !
     
    enitharmon, Dec 5, 2013
    #3
Thread Status:
Not open for further replies.

Share This Page